下面是一個常用的關於 React 的面試問題列表：

無論作為一個面試者，或者招聘官，下面這些問題都可以去參考

React 的工作原理

React 會建立一個虛擬 DOM(virtual DOM)。當一個元件中的狀態改變時，React 首先會通過 "diffing" 演算法來標記虛擬 DOM 中的改變，第二步是調節(reconciliation)，會用 diff 的結果來更新 DOM。

使用 React 有何優點

• 只需檢視 render 函式就會很容易知道一個元件是如何被渲染的

• JSX 的引入，使得元件的程式碼更加可讀，也更容易看懂元件的佈局，或者元件之間是如何互相引用的

• 支援服務端渲染，這可以改進 SEO 和效能

• 易於測試

• React 只關注 View 層，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用

展示元件(Presentational component)和容器元件(Container component)之間有何不同

展示元件關心元件看起來是什麼。展示專門通過 props 接受資料和回撥，並且幾乎不會有自身的狀態，但當展示元件擁有自身的狀態時，通常也只關心 UI 狀態而不是資料的狀態。

容器元件則更關心元件是如何運作的。容器元件會為展示元件或者其它容器元件提供資料和行為(behavior)，它們會呼叫 Flux actions

類元件(Class component)和函式式元件(Functional component)之間有何不同

• 類元件不僅允許你使用更多額外的功能，如元件自身的狀態和生命週期鉤子，也能使元件直接訪問 store 並維持狀態

• 當元件僅是接收 props，並將元件自身渲染到頁面時，該元件就是一個 '無狀態元件(stateless component)'，可以使用一個純函式來建立這樣的元件。這種元件也被稱為啞元件(dumb components)或展示元件

(元件的)狀態(state)和屬性(props)之間有何不同

State 是一種資料結構，用於元件掛載時所需資料的預設值。State 可能會隨著時間的推移而發生突變，但多數時候是作為使用者事件行為的結果。

Props(properties 的簡寫)則是元件的配置。props 由父元件傳遞給子元件，並且就子元件而言，props 是不可變的(immutable)。元件不能改變自身的 props，但是可以把其子元件的 props 放在一起(統一管理)。Props 也不僅僅是資料--回撥函式也可以通過 props 傳遞。

指出(元件)生命週期方法的不同

• componentWillMount -- 多用於根元件中的應用程式配置

• componentDidMount -- 在這可以完成所有沒有 DOM 就不能做的所有配置，並開始獲取所有你需要的資料；如果需要設定事件監聽，也可以在這完成

• componentWillReceiveProps -- 這個周期函式作用於特定的 prop 改變導致的 state 轉換

• shouldComponentUpdate -- 如果你擔心元件過度渲染，shouldComponentUpdate 是一個改善效能的地方，因為如果元件接收了新的 prop， 它可以阻止(元件)重新渲染。shouldComponentUpdate 應該返回一個布林值來決定元件是否要重新渲染

• componentWillUpdate -- 很少使用。它可以用於代替元件的 componentWillReceiveProps 和 shouldComponentUpdate(但不能訪問之前的 props)

• componentDidUpdate -- 常用於更新 DOM，響應 prop 或 state 的改變

• componentWillUnmount -- 在這你可以取消網路請求，或者移除所有與元件相關的事件監聽器

應該在 React 元件的何處發起 Ajax 請求

在 React 元件中，應該在 componentDidMount 中發起網路請求。這個方法會在元件第一次“掛載”(被新增到 DOM)時執行，在元件的生命週期中僅會執行一次。更重要的是，你不能保證在元件掛載之前 Ajax 請求已經完成，如果是這樣，也就意味著你將嘗試在一個未掛載的元件上呼叫 setState，這將不起作用。在 componentDidMount 中發起網路請求將保證這有一個元件可以更新了。

何為受控元件(controlled component)

在 HTML 中，類似 <input>, <textarea> 和 <select> 這樣的表單元素會維護自身的狀態，並基於使用者的輸入來更新。當用戶提交表單時，前面提到的元素的值將隨表單一起被髮送。但在 React 中會有些不同，包含表單元素的元件將會在 state 中追蹤輸入的值，並且每次呼叫回撥函式時，如 onChange 會更新 state，重新渲染元件。一個輸入表單元素，它的值通過 React 的這種方式來控制，這樣的元素就被稱為"受控元素"。

在 React 中，refs 的作用是什麼

Refs 可以用於獲取一個 DOM 節點或者 React 元件的引用。何時使用 refs 的好的示例有管理焦點/文字選擇，觸發命令動畫，或者和第三方 DOM 庫整合。你應該避免使用 String 型別的 Refs 和內聯的 ref 回撥。Refs 回撥是 React 所推薦的。

何為高階元件(higher order component)

高階元件是一個以元件為引數並返回一個新元件的函式。HOC 執行你重用程式碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函式。除了簡單分享工具庫和簡單的組合，HOC最好的方式是共享 React 元件之間的行為。如果你發現你在不同的地方寫了大量程式碼來做同一件事時，就應該考慮將程式碼重構為可重用的 HOC。

練習

• 寫一個反轉其輸入的 HOC

• 寫一個從 API 提供資料給傳入的元件的 HOC

• 寫一個實現 shouldComponentUpdate 來避免 reconciliation 的 HOC

• 寫一個通過 React.Children.toArray 對傳入元件的子元件進行排序的 HOC

使用箭頭函式(arrow functions)的優點是什麼

• 作用域安全：在箭頭函式之前，每一個新建立的函式都有定義自身的 this 值(在建構函式中是新物件；在嚴格模式下，函式呼叫中的 this 是未定義的；如果函式被稱為“物件方法”，則為基礎物件等)，但箭頭函式不會，它會使用封閉執行上下文的 this 值。

• 簡單：箭頭函式易於閱讀和書寫

• 清晰：當一切都是一個箭頭函式，任何常規函式都可以立即用於定義作用域。開發者總是可以查詢 next-higher 函式語句，以檢視 this 的值

為什麼建議傳遞給 setState 的引數是一個 callback 而不是一個物件

因為 this.props 和 this.state 的更新可能是非同步的，不能依賴它們的值去計算下一個 state。

除了在建構函式中繫結 this，還有其它方式嗎

你可以使用屬性初始值設定項(property initializers)來正確繫結回撥，create-react-app 也是預設支援的。在回撥中你可以使用箭頭函式，但問題是每次元件渲染時都會建立一個新的回撥。

怎麼阻止元件的渲染

在元件的 render 方法中返回 null 並不會影響觸發元件的生命週期方法

當渲染一個列表時，何為 key？設定 key 的目的是什麼

Keys 會有助於 React 識別哪些 items 改變了，被添加了或者被移除了。Keys 應該被賦予陣列內的元素以賦予(DOM)元素一個穩定的標識，選擇一個 key 的最佳方法是使用一個字串，該字串能惟一地標識一個列表項。很多時候你會使用資料中的 IDs 作為 keys，當你沒有穩定的 IDs 用於被渲染的 items 時，可以使用專案索引作為渲染項的 key，但這種方式並不推薦，如果 items 可以重新排序，就會導致 re-render 變慢。

(在建構函式中)呼叫 super(props) 的目的是什麼

在 super() 被呼叫之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中呼叫 super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問 this.props。

何為 JSX

JSX 是 JavaScript 語法的一種語法擴充套件，並擁有 JavaScript 的全部功能。JSX 生產 React "元素"，你可以將任何的 JavaScript 表示式封裝在花括號裡，然後將其嵌入到 JSX 中。在編譯完成之後，JSX 表示式就變成了常規的 JavaScript 物件，這意味著你可以在 if 語句和 for 迴圈內部使用 JSX，將它賦值給變數，接受它作為引數，並從函式中返回它。

怎麼用 React.createElement 重寫下面的程式碼

Question：

const element = (
  <h1 className="greeting">
    Hello, rdhub.cn!
  </h1>
);

Answer：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, rdhub.cn!'
);

何為 Children

在JSX表示式中，一個開始標籤(比如<a>)和一個關閉標籤(比如</a>)之間的內容會作為一個特殊的屬性props.children被自動傳遞給包含著它的元件。

這個屬性有許多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。

在 React 中，何為 state

State 和 props 類似，但它是私有的，並且完全由元件自身控制。State 本質上是一個持有資料，並決定元件如何渲染的物件。

什麼原因會促使你脫離 create-react-app 的依賴

當你想去配置 webpack 或 babel presets。

何為 redux

Redux 的基本思想是整個應用的 state 保持在一個單一的 store 中。store 就是一個簡單的 javascript 物件，而改變應用 state 的唯一方式是在應用中觸發 actions，然後為這些 actions 編寫 reducers 來修改 state。整個 state 轉化是在 reducers 中完成，並且不應該有任何副作用。

在 Redux 中，何為 store

Store 是一個 javascript 物件，它儲存了整個應用的 state。與此同時，Store 也承擔以下職責：

• 允許通過 getState() 訪問 state

• 執行通過 dispatch(action) 改變 state

• 通過 subscribe(listener) 註冊 listeners

• 通過 subscribe(listener) 返回的函式處理 listeners 的登出

何為 action

Actions 是一個純 javascript 物件，它們必須有一個 type 屬性表明正在執行的 action 的型別。實質上，action 是將資料從應用程式傳送到 store 的有效載荷。

何為 reducer

一個 reducer 是一個純函式，該函式以先前的 state 和一個 action 作為引數，並返回下一個 state。

Redux Thunk 的作用是什麼

Redux thunk 是一個允許你編寫返回一個函式而不是一個 action 的 actions creators 的中介軟體。如果滿足某個條件，thunk 則可以用來延遲 action 的派發(dispatch)，這可以處理非同步 action 的派發(dispatch)。

何為純函式(pure function)

一個純函式是一個不依賴於且不改變其作用域之外的變數狀態的函式，這也意味著一個純函式對於同樣的引數總是返回同樣的結果。

前端工程師交流群：點選連結加入群聊【全棧Web工程師培養計劃】 475477494   專案分享學習！