【react面試題】不可錯過的react 面試題 「務必收藏」

下面是一個經常使用的關於 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)

一個純函數是一個不依賴於且不改變其做用域以外的變量狀態的函數，這也意味着一個純函數對於一樣的參數老是返回一樣的結果。

關於

語雀地址：https://www.yuque.com/rdhub/react/tgmqqt 歡迎點贊（給個稻穀）