React面試題（超詳細，附答案）

• 2020 年 5 月 29 日
• 筆記

生命周期

• 組件將要掛載時觸發的函數：componentWillMount

• 組件掛載完成時觸發的函數：componentDidMount

• 是否要更新數據時觸發的函數：shouldComponentUpdate

• 將要更新數據時觸發的函數：componentWillUpdate

• 數據更新完成時觸發的函數：componentDidUpdate

• 組件將要銷毀時觸發的函數：componentWillUnmount

• 父組件中改變了props傳值時觸發的函數：componentWillReceiveProps

shouldComponentUpdate 的作用?

shouldComponentUpdate 允許我們手動地判斷是否要進行組件更新，根據組件的應用場景設置函數的合理返回值能夠幫我們避免不必要的更新

React 中 keys 的作用是什麼？

Keys是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識

• 在開發過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 演算法中React 會藉助元素的 Key 值來判斷該元素是新近創建的還是被移動而來的元素，從而減少不必要的元素重渲染。此外，React 還需要藉助 Key 值來判斷元素與本地狀態的關聯關係，因此我們絕不可忽視轉換函數中 Key 的重要性

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

• State 是一種數據結構，用於組件掛載時所需數據的默認值。State 可能會隨著時間的推移而發生突變，但多數時候是作為用戶事件行為的結果

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

何為受控組件(controlled component)?

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

展示組件(Presentational component)(也叫 UI 組件)和容器組件(Container component)（負責應用邏輯處理）之間有何不同

• 展示組件（UI 組件）

  • 負責展示 UI，也就是組件如何渲染，具有很強的內聚性

  • 只關心得到數據後如何渲染

• 容器組件（邏輯組件)

  • 負責應用邏輯處理，發送網路請求，處理返回數據，將處理過的數據傳遞給展示組件

  • 也提供修改數據源的方法，通過展示組件的props傳遞給展示組件

  • 當展示組件的狀態變更引起源數據變化時，展示組件通過調用容器組件提供的方法同步這些變化

react-router的原理

• BrowserRouter 或 HashRouter 用來渲染Router所代表的組件

  • BrowserRouter –瀏覽器路由(屬於後端路由) 會有一個#，通過這個# HTML 5 History進行前端跳轉他的感覺像錨點

  • HasRouter –前端has路由（屬於前端路由）很簡潔沒有#，但是需要 server 端支援

• Route 用來匹配組件路徑並且篩選需要渲染的組件

• Switch 用來篩選需要渲染的唯一組件

• Link 直接渲染某個頁面組件

• Redirect 類似於Link，在沒有Route匹配成功時觸發

何為高階組件（HOC）？

高階組件 其實就是一個函數而已，只不過參數是一個組件而已，返回了一個新的組件

復用組件的業務邏輯 react-redux connect 其實就是一個高階組件

HOC 是純函數，沒有副作用 ——純函數：輸入確定，輸出就一定確定

了解 redux 么，說一下 redux

• redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理

• 主要有三個核心方法，action，store，reducer

• 工作流程是 view 調用 store 的 dispatch 接收 action 傳入 store，reducer 進行 state 操作，view 通過 store 提供的 getState 獲取最新的數據

• 新增 state,對狀態的管理更加明確，通過 redux，流程更加規範了，減少手動編碼量，提高了編碼效率，同時缺點時當數據更新時有時候組件不需要，但是也要重新繪製，有些影響效率。一般情況下，我們在構建多交互，多數據流的複雜項目應用時才會使用它們

redux中間件的理解，以及用過哪些中間件

• redux-thunk：處理非同步操作

• redux-saga：處理非同步操作

• redux-promise：處理非同步操作，actionCreator 的返回值是promise

Redux 遵循的三個原則是什麼?

• 單一事實來源：整個應用程式的狀態存儲在單個存儲中的對象/狀態樹中

• 狀態是只讀的：更改狀態的惟一方法是觸發一個動作

• 使用純函數來修改state：為了描述 action 如何改變 state tree ，你需要編寫reducers

React , redux 可以運行在服務端嗎?有什麼優勢

1. 利於 SEO

2. 提高首屏渲染速度

3. 同構直出，使用同一份 JS 程式碼實現，便於開發和維護

react性能優化方案

• 重寫shouldComponentUpdate來避免不必要的 dom 操作

• 使用 production 版本的react.js

• 使用key來幫助React識別列表中所有子組件的最小變化

說說你用react有什麼坑點？

• JSX 做表達式判斷時候，需要強轉為boolean類型

• 盡量不要在 componentWillReviceProps 里使用 setState，如果一定要使用，那麼需要判斷結束條件，不然會出現無限重渲染，導致頁面崩潰

• 遍歷子節點的時候，不要用 index 作為組件的 key 進行傳入

react 的虛擬 dom 是怎麼實現的？

首先說說為什麼要使用Virturl DOM，因為操作真實DOM的耗費的性能代價太高，所以react內部使用js實現了一套 dom 結構，在每次操作在和真實 dom 之前，使用實現好的 diff 演算法，對虛擬 dom 進行比較，遞歸找出有變化的 dom 節點，然後對其進行更新操作。為了實現虛擬DOM，我們需要把每一種節點類型抽象成對象，每一種節點類型有自己的屬性，也就是prop，每次進行diff的時候，react會先比較該節點類型，假如節點類型不一樣，那麼react會直接刪除該節點，然後直接創建新的節點插入到其中，假如節點類型一樣，那麼會比較prop是否有更新，假如有prop不一樣，那麼react會判定該節點有更新，那麼重渲染該節點，然後在對其子節點進行比較，一層一層往下，直到沒有子節點

react diff 原理

• 把樹形結構按照層級分解，只比較同級元素

• 給列表結構的每個單元添加唯一的 key 屬性，方便比較

• React 只會匹配相同 class 的 component（這裡面的 class 指的是組件的名字）

• 合併操作，調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪製

• 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能

react 的渲染過程中，兄弟節點之間是怎麼處理的？也就是key值不一樣的時候

我們必須給每一個元素添加 key 屬性，大概的作用就是給每一個元素添加一個身份標識，方便react進行識別，在重渲染過程中，如果key一樣，若組件屬性有所變化，則react只更新組件對應的屬性；沒有變化則不更新，如果key不一樣，則react先銷毀該組件，然後重新創建該組件

react組件之間如何通訊？

父子：父傳子：props； 子傳父：子調用父組件中的函數並傳參； 兄弟：利用 redux 實現。 所有關係都通用的方法：利用PubSub.js訂閱

setState 為什麼是非同步的

1. 保證內部的一致性 （因為props是要等到父組件渲染過後才能拿到，也就是不能同步更新，state出於統一性設成非同步更新）

2. 性能優化 （舉例說你正在一個聊天窗口輸入，如果來了一條新消息又要render,那就會阻塞你的當前操作，導致延遲什麼的）

3. 支援state在幕後渲染（非同步可以使state在幕後更新，而不影響你當前舊的頁面的交互，提升用戶體驗）

react的優勢以及特點

• 優勢

  • 實現對虛擬DOM的操作，使得它速度快，提高了Web性能

  • 組件化，模組化。react里每一個模組都是一個組件，組件化開發，可維護性高

  • 單向數據流，比較有序，有便於管理，它隨著React視圖庫的開發而被 Facebook 概念化

  • 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的 API，甚至在 IE8 中都是沒問題的

• 不足

  • react中只是 MVC 模式的View部分，要依賴引入很多其他模組開發

  • 當父組件進行重新渲染操作時，即使子組件的props或state沒有做出任何改變，也會同樣進行重新渲染

• 特點

  • 聲明式設計：React採用聲明範式，可以輕鬆描述應用

  • 高效：React通過對DOM的模擬，最大限度地減少與DOM的交互

  • 靈活：React可以與已知的庫或框架很好地配合