翻譯:瘋狂的技術宅javascript
若是你是一位有抱負的前端程序員並準備面試,那麼這篇文章很適合你。本文是你學習和麪試 React 所需知識的完美指南。java
JavaScript 工具緩慢而穩定地在市場中紮根,對 React 的需求呈指數級增加。選擇合適的技術來開發應用或網站變得愈來愈有挑戰性。其中 React 被認爲是增加最快的 Javascript 框架。react
截至今天,Github 上約有1,000名貢獻者。 Virtual DOM 和可重用組件等獨特功能吸引了前端開發人員的注意力。儘管它只是 MVC(模型 - 視圖 - 控制器)中「視圖」的庫,但它對 Angular,Meteor,Vue 等全面的框架也構成了強力的挑戰。下圖爲流行的 JS 框架的趨勢:程序員

React 面試題
如下是面試官最有可能問到的 50 個 React 面試題和答案。爲方便你學習,我對它們進行了分類:web
- 基本知識
- React 組件
- React Redux
- React 路由
基本知識
1. 區分Real DOM和Virtual DOM
Real DOM | Virtual DOM |
---|---|
1. 更新緩慢。 | 1. 更新更快。 |
2. 能夠直接更新 HTML。 | 2. 沒法直接更新 HTML。 |
3. 若是元素更新,則建立新DOM。 | 3. 若是元素更新,則更新 JSX 。 |
4. DOM操做代價很高。 | 4. DOM 操做很是簡單。 |
5. 消耗的內存較多。 | 5. 不多的內存消耗。 |
2. 什麼是React?
- React 是 Facebook 在 2011 年開發的前端 JavaScript 庫。
- 它遵循基於組件的方法,有助於構建可重用的UI組件。
- 它用於開發複雜和交互式的 Web 和移動 UI。
- 儘管它僅在 2015 年開源,但有一個很大的支持社區。
3. React有什麼特色?
React的主要功能以下:面試
- 它使用**虛擬DOM **而不是真正的DOM。
- 它能夠用服務器端渲染。
- 它遵循單向數據流或數據綁定。
4. 列出React的一些主要優勢。
React的一些主要優勢是:瀏覽器
- 它提升了應用的性能
- 能夠方便地在客戶端和服務器端使用
- 因爲 JSX,代碼的可讀性很好
- React 很容易與 Meteor,Angular 等其餘框架集成
- 使用React,編寫UI測試用例變得很是容易
5. React有哪些限制?
React的限制以下:服務器
- React 只是一個庫,而不是一個完整的框架
- 它的庫很是龐大,須要時間來理解
- 新手程序員可能很難理解
- 編碼變得複雜,由於它使用內聯模板和 JSX
6. 什麼是JSX?
JSX 是J avaScript XML 的簡寫。是 React 使用的一種文件,它利用 JavaScript 的表現力和相似 HTML 的模板語法。這使得 HTML 文件很是容易理解。此文件能使應用很是可靠,並可以提升其性能。下面是JSX的一個例子:架構
render(){
return( <div> <h1> Hello World from Edureka!!</h1> </div> ); } 複製代碼
7. 你瞭解 Virtual DOM 嗎?解釋一下它的工做原理。
Virtual DOM 是一個輕量級的 JavaScript 對象,它最初只是 real DOM 的副本。它是一個節點樹,它將元素、它們的屬性和內容做爲對象及其屬性。 React 的渲染函數從 React 組件中建立一個節點樹。而後它響應數據模型中的變化來更新該樹,該變化是由用戶或系統完成的各類動做引發的。
Virtual DOM 工做過程有三個簡單的步驟。
-
每當底層數據發生改變時,整個 UI 都將在 Virtual DOM 描述中從新渲染。
-
而後計算以前 DOM 表示與新表示的之間的差別。
-
完成計算後,將只用實際更改的內容更新 real DOM。
8. 爲何瀏覽器沒法讀取JSX?
瀏覽器只能處理 JavaScript 對象,而不能讀取常規 JavaScript 對象中的 JSX。因此爲了使瀏覽器可以讀取 JSX,首先,須要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換爲 JavaScript 對象,而後再將其傳給瀏覽器。
9. 與 ES5 相比,React 的 ES6 語法有何不一樣?
如下語法是 ES5 與 ES6 中的區別:
- require 與 import
// ES5
var React = require('react');
// ES6
import React from 'react';
複製代碼
- export 與 exports
// ES5
module.exports = Component;
// ES6
export default Component;
複製代碼
- component 和 function
// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}
複製代碼
- props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}
});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}
複製代碼
- state
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}
複製代碼
10. React與Angular有何不一樣?
主題 | React | Angular |
---|---|---|
1. 體系結構 | 只有 MVC 中的 View | 完整的 MVC |
2. 渲染 | 能夠在服務器端渲染 | 客戶端渲染 |
3. DOM | 使用 virtual DOM | 使用 real DOM |
4. 數據綁定 | 單向數據綁定 | 雙向數據綁定 |
5. 調試 | 編譯時調試 | 運行時調試 |
6. 做者 |
React 組件
11. 你理解「在React中,一切都是組件」這句話。
組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分紅小的獨立並可重用的部分。每一個組件彼此獨立,而不會影響 UI 的其他部分。
12. 解釋 React 中 render() 的目的。
每一個React組件強制要求必須有一個 render()。它返回一個 React 元素,是原生 DOM 組件的表示。若是須要渲染多個 HTML 元素,則必須將它們組合在一個封閉標記內,例如 <form>
、<group>
、<div>
等。此函數必須保持純淨,即必須每次調用時都返回相同的結果。
13. 如何將兩個或多個組件嵌入到一個組件中?
能夠經過如下方式將組件嵌入到一個組件中:
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
複製代碼
14. 什麼是 Props?
Props 是 React 中屬性的簡寫。它們是隻讀組件,必須保持純,即不可變。它們老是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。這有助於維護單向數據流,一般用於呈現動態生成的數據。
15. React中的狀態是什麼?它是如何使用的?
狀態是 React 組件的核心,是數據的來源,必須儘量簡單。基本上狀態是肯定組件呈現和行爲的對象。與props 不一樣,它們是可變的,並建立動態和交互式組件。能夠經過 this.state()
訪問它們。
16. 區分狀態和 props
條件 | State | Props |
---|---|---|
1. 從父組件中接收初始值 | Yes | Yes |
2. 父組件能夠改變值 | No | Yes |
3. 在組件中設置默認值 | Yes | Yes |
4. 在組件的內部變化 | Yes | No |
5. 設置子組件的初始值 | Yes | Yes |
6. 在子組件的內部更改 | No | Yes |
17. 如何更新組件的狀態?
能夠用 this.setState()
更新組件的狀態。
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx',
id: '101'
}
}
render()
{
setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
return (
<div>
<h1>Hello {this.state.name}</h1>
<h2>Your Id is {this.state.id}</h2>
</div>
);
}
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
複製代碼
18. React 中的箭頭函數是什麼?怎麼用?
箭頭函數(=>)是用於編寫函數表達式的簡短語法。這些函數容許正確綁定組件的上下文,由於在 ES6 中默認下不能使用自動綁定。使用高階函數時,箭頭函數很是有用。
//General way
render() {
return(
<MyInput onChange = {this.handleChange.bind(this) } />
);
}
//With Arrow Function
render() {
return(
<MyInput onChange = { (e)=>this.handleOnChange(e) } />
);
}
複製代碼
19. 區分有狀態和無狀態組件。
有狀態組件 | 無狀態組件 |
---|---|
1. 在內存中存儲有關組件狀態變化的信息 | 1. 計算組件的內部的狀態 |
2. 有權改變狀態 | 2. 無權改變狀態 |
3. 包含過去、如今和將來可能的狀態變化狀況 | 3. 不包含過去,如今和將來可能發生的狀態變化狀況 |
4. 接受無狀態組件狀態變化要求的通知,而後將 props 發送給他們。 | 4.從有狀態組件接收 props 並將其視爲回調函數。 |
20. React組件生命週期的階段是什麼?
React 組件的生命週期有三個不一樣的階段:
- *初始渲染階段:*這是組件即將開始其生命之旅並進入 DOM 的階段。
- *更新階段:*一旦組件被添加到 DOM,它只有在 prop 或狀態發生變化時纔可能更新和從新渲染。這些只發生在這個階段。
- *卸載階段:*這是組件生命週期的最後階段,組件被銷燬並從 DOM 中刪除。
21. 詳細解釋 React 組件的生命週期方法。
一些最重要的生命週期方法是:
- componentWillMount**()** – 在渲染以前執行,在客戶端和服務器端都會執行。
- componentDidMount**()** – 僅在第一次渲染後在客戶端執行。
- componentWillReceiveProps**()** – 當從父類接收到 props 而且在調用另外一個渲染器以前調用。
- shouldComponentUpdate**()** – 根據特定條件返回 true 或 false。若是你但願更新組件,請返回true 不然返回 false。默認狀況下,它返回 false。
- componentWillUpdate**()** – 在 DOM 中進行渲染以前調用。
- componentDidUpdate**()** – 在渲染髮生後當即調用。
- componentWillUnmount**()** – 從 DOM 卸載組件後調用。用於清理內存空間。
22. React中的事件是什麼?
在 React 中,事件是對鼠標懸停、鼠標單擊、按鍵等特定操做的觸發反應。處理這些事件相似於處理 DOM 元素中的事件。可是有一些語法差別,如:
- 用駝峯命名法對事件命名而不是僅使用小寫字母。
- 事件做爲函數而不是字符串傳遞。
事件參數重包含一組特定於事件的屬性。每一個事件類型都包含本身的屬性和行爲,只能經過其事件處理程序訪問。
23. 如何在React中建立一個事件?
class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Me!</div>
);
}
});
複製代碼
24. React中的合成事件是什麼?
合成事件是圍繞瀏覽器原生事件充當跨瀏覽器包裝器的對象。它們將不一樣瀏覽器的行爲合併爲一個 API。這樣作是爲了確保事件在不一樣瀏覽器中顯示一致的屬性。
25. 你對 React 的 refs 有什麼瞭解?
Refs 是 React 中引用的簡寫。它是一個有助於存儲對特定的 React 元素或組件的引用的屬性,它將由組件渲染配置函數返回。用於對 render() 返回的特定元素或組件的引用。當須要進行 DOM 測量或向組件添加方法時,它們會派上用場。
class ReferenceDemo extends React.Component{
display() {
const name = this.inputDemo.value;
document.getElementById('disp').innerHTML = name;
}
render() {
return(
<div>
Name: <input type="text" ref={input => this.inputDemo = input} />
<button name="Click" onClick={this.display}>Click</button>
<h2>Hello <span id="disp"></span> !!!</h2>
</div>
);
}
}
複製代碼
26. 列出一些應該使用 Refs 的狀況。
如下是應該使用 refs 的狀況:
- 須要管理焦點、選擇文本或媒體播放時
- 觸發式動畫
- 與第三方 DOM 庫集成
27. 如何模塊化 React 中的代碼?
可使用 export 和 import 屬性來模塊化代碼。它們有助於在不一樣的文件中單獨編寫組件。
//ChildComponent.jsx
export default class ChildComponent extends React.Component {
render() {
return(
<div>
<h1>This is a child component</h1>
</div>
);
}
}
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
render() {
return(
<div>
<App />
</div>
);
}
}
複製代碼
28. 如何在 React 中建立表單
React 表單相似於 HTML 表單。可是在 React 中,狀態包含在組件的 state 屬性中,而且只能經過 setState()
更新。所以元素不能直接更新它們的狀態,它們的提交是由 JavaScript 函數處理的。此函數能夠徹底訪問用戶輸入到表單的數據。
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleSubmit} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
複製代碼
29. 你對受控組件和非受控組件瞭解多少?
受控組件 | 非受控組件 |
---|---|
1. 沒有維持本身的狀態 | 1. 保持着本身的狀態 |
2.數據由父組件控制 | 2.數據由 DOM 控制 |
3. 經過 props 獲取當前值,而後經過回調通知更改 | 3. Refs 用於獲取其當前值 |
30. 什麼是高階組件(HOC)?
高階組件是重用組件邏輯的高級方法,是一種源於 React 的組件模式。 HOC 是自定義組件,在它以內包含另外一個組件。它們能夠接受子組件提供的任何動態,但不會修改或複製其輸入組件中的任何行爲。你能夠認爲 HOC 是「純(Pure)」組件。
31. 你能用HOC作什麼?
HOC可用於許多任務,例如:
- 代碼重用,邏輯和引導抽象
- 渲染劫持
- 狀態抽象和控制
- Props 控制
32. 什麼是純組件?
純(Pure) 組件是能夠編寫的最簡單、最快的組件。它們能夠替換任何只有 render() 的組件。這些組件加強了代碼的簡單性和應用的性能。
33. React 中 key 的重要性是什麼?
key 用於識別惟一的 Virtual DOM 元素及其驅動 UI 的相應數據。它們經過回收 DOM 中當前全部的元素來幫助 React 優化渲染。這些 key 必須是惟一的數字或字符串,React 只是從新排序元素而不是從新渲染它們。這能夠提升應用程序的性能。
React Redux
34. MVC框架的主要問題是什麼?
如下是MVC框架的一些主要問題:
- 對 DOM 操做的代價很是高
- 程序運行緩慢且效率低下
- 內存浪費嚴重
- 因爲循環依賴性,組件模型須要圍繞 models 和 views 進行建立
35. 解釋一下 Flux

36. 什麼是Redux?
Redux 是當今最熱門的前端開發庫之一。它是 JavaScript 程序的可預測狀態容器,用於整個應用的狀態管理。使用 Redux 開發的應用易於測試,能夠在不一樣環境中運行,並顯示一致的行爲。
37. Redux遵循的三個原則是什麼?
- ***單一事實來源:***整個應用的狀態存儲在單個 store 中的對象/狀態樹裏。單一狀態樹能夠更容易地跟蹤隨時間的變化,並調試或檢查應用程序。
- ***狀態是隻讀的:***改變狀態的惟一方法是去觸發一個動做。動做是描述變化的普通 JS 對象。就像 state 是數據的最小表示同樣,該操做是對數據更改的最小表示。
- ***使用純函數進行更改:***爲了指定狀態樹如何經過操做進行轉換,你須要純函數。純函數是那些返回值僅取決於其參數值的函數。

38. 你對「單一事實來源」有什麼理解?
Redux 使用 「Store」 將程序的整個狀態存儲在同一個地方。所以全部組件的狀態都存儲在 Store 中,而且它們從 Store 自己接收更新。單一狀態樹能夠更容易地跟蹤隨時間的變化,並調試或檢查程序。
39. 列出 Redux 的組件。
Redux 由如下組件組成:
- Action – 這是一個用來描述發生了什麼事情的對象。
- Reducer – 這是一個肯定狀態將如何變化的地方。
- Store – 整個程序的狀態/對象樹保存在Store中。
- View – 只顯示 Store 提供的數據。
40. 數據如何經過 Redux 流動?

41. 如何在 Redux 中定義 Action?
React 中的 Action 必須具備 type 屬性,該屬性指示正在執行的 ACTION 的類型。必須將它們定義爲字符串常量,而且還能夠向其添加更多的屬性。在 Redux 中,action 被名爲 Action Creators 的函數所建立。如下是 Action 和Action Creator 的示例:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
複製代碼
42. 解釋 Reducer 的做用。
Reducers 是純函數,它規定應用程序的狀態怎樣因響應 ACTION 而改變。Reducers 經過接受先前的狀態和 action 來工做,而後它返回一個新的狀態。它根據操做的類型肯定須要執行哪一種更新,而後返回新的值。若是不須要完成任務,它會返回原來的狀態。
43. Store 在 Redux 中的意義是什麼?
Store 是一個 JavaScript 對象,它能夠保存程序的狀態,並提供一些方法來訪問狀態、調度操做和註冊偵聽器。應用程序的整個狀態/對象樹保存在單一存儲中。所以,Redux 很是簡單且是可預測的。咱們能夠將中間件傳遞到 store 來處理數據,並記錄改變存儲狀態的各類操做。全部操做都經過 reducer 返回一個新狀態。
44. Redux與Flux有何不一樣?
Flux | Redux |
---|---|
1. Store 包含狀態和更改邏輯 | 1. Store 和更改邏輯是分開的 |
2. 有多個 Store | 2. 只有一個 Store |
3. 全部 Store 都互不影響且是平級的 | 3. 帶有分層 reducer 的單一 Store |
4. 有單一調度器 | 4. 沒有調度器的概念 |
5. React 組件訂閱 store | 5. 容器組件是有聯繫的 |
6. 狀態是可變的 | 6. 狀態是不可改變的 |
45. Redux 有哪些優勢?
Redux 的優勢以下:
- 結果的可預測性 - 因爲老是存在一個真實來源,即 store ,所以不存在如何將當前狀態與動做和應用的其餘部分同步的問題。
- 可維護性 - 代碼變得更容易維護,具備可預測的結果和嚴格的結構。
- 服務器端渲染 - 你只需將服務器上建立的 store 傳到客戶端便可。這對初始渲染很是有用,而且能夠優化應用性能,從而提供更好的用戶體驗。
- 開發人員工具 - 從操做到狀態更改,開發人員能夠實時跟蹤應用中發生的全部事情。
- 社區和生態系統 - Redux 背後有一個巨大的社區,這使得它更加迷人。一個由才華橫溢的人組成的大型社區爲庫的改進作出了貢獻,並開發了各類應用。
- 易於測試 - Redux 的代碼主要是小巧、純粹和獨立的功能。這使代碼可測試且獨立。
- 組織 - Redux 準確地說明了代碼的組織方式,這使得代碼在團隊使用時更加一致和簡單。
React 路由
46. 什麼是React 路由?
React 路由是一個構建在 React 之上的強大的路由庫,它有助於嚮應用程序添加新的屏幕和流。這使 URL 與網頁上顯示的數據保持同步。它負責維護標準化的結構和行爲,並用於開發單頁 Web 應用。 React 路由有一個簡單的API。
47. 爲何React Router v4中使用 switch 關鍵字 ?
雖然 <div>
** 用於封裝 Router 中的多個路由,當你想要僅顯示要在多個定義的路線中呈現的單個路線時,可使用 「switch」 關鍵字。使用時,<switch>
** 標記會按順序將已定義的 URL 與已定義的路由進行匹配。找到第一個匹配項後,它將渲染指定的路徑。從而繞過其它路線。
48. 爲何須要 React 中的路由?
Router 用於定義多個路由,當用戶定義特定的 URL 時,若是此 URL 與 Router 內定義的任何 「路由」 的路徑匹配,則用戶將重定向到該特定路由。因此基本上咱們須要在本身的應用中添加一個 Router 庫,容許建立多個路由,每一個路由都會向咱們提供一個獨特的視圖
<switch>
<route exact path=’/’ component={Home}/>
<route path=’/posts/:id’ component={Newpost}/>
<route path=’/posts’ component={Post}/>
</switch>
複製代碼
49. 列出 React Router 的優勢。
幾個優勢是:
- 就像 React 基於組件同樣,在 React Router v4 中,API 是 'All About Components'。能夠將 Router 可視化爲單個根組件(
<BrowserRouter>
),其中咱們將特定的子路由(<route>
)包起來。 - 無需手動設置歷史值:在 React Router v4 中,咱們要作的就是將路由包裝在
<BrowserRouter>
組件中。 - 包是分開的:共有三個包,分別用於 Web、Native 和 Core。這使咱們應用更加緊湊。基於相似的編碼風格很容易進行切換。
50. React Router與常規路由有何不一樣?
主題 | 常規路由 | React 路由 |
---|---|---|
參與的頁面 | 每一個視圖對應一個新文件 | 只涉及單個HTML頁面 |
URL 更改 | HTTP 請求被髮送到服務器而且接收相應的 HTML 頁面 | 僅更改歷史記錄屬性 |
體驗 | 用戶實際在每一個視圖的不一樣頁面切換 | 用戶認爲本身正在不一樣的頁面間切換 |
但願這套 React 面試題和答案能幫你準備面試。祝一切順利!