關於React面試題彙總

一、redux中間件

中間件提供第三方插件的模式，自定義攔截 action -> reducer 的過程。變爲 action -> middlewares -> reducer 。這種機制可讓咱們改變數據流，實現如異步 action ，action 過濾，日誌輸出，異常報告等功能。

常見的中間件：

redux-logger：提供日誌輸出

redux-thunk：處理異步操做

redux-promise：處理異步操做，actionCreator的返回值是promise

二、redux有什麼缺點

1.一個組件所須要的數據，必須由父組件傳過來，而不能像flux中直接從store取。

2.當一個組件相關數據更新時，即便父組件不須要用到這個組件，父組件仍是會從新render，可能會有效率影響，或者須要寫複雜的shouldComponentUpdate進行判斷。

三、react組件的劃分業務組件技術組件？

根據組件的職責一般把組件分爲UI組件和容器組件。

UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。

二者經過React-Redux 提供connect方法聯繫起來。

具體使用能夠參照以下連接：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

四、react生命週期函數

這個問題要考察的是組件的生命週期

1、初始化階段：

getDefaultProps:獲取實例的默認屬性

getInitialState:獲取每一個實例的初始化狀態

componentWillMount：組件即將被裝載、渲染到頁面上

render:組件在這裏生成虛擬的DOM節點

componentDidMount:組件真正在被裝載以後

2、運行中狀態：

componentWillReceiveProps:組件將要接收到屬性的時候調用

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回false，接收數據後不更新，阻止render調用，後面的函數不會被繼續執行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態

render:組件從新描繪

componentDidUpdate:組件已經更新

3、銷燬階段：

componentWillUnmount:組件即將銷燬

五、react性能優化是哪一個周期函數？

shouldComponentUpdate 這個方法用來判斷是否須要調用render方法從新描繪dom。由於dom的描繪很是消耗性能，若是咱們能在shouldComponentUpdate方法中可以寫出更優化的dom diff算法，能夠極大的提升性能。

詳細參考：

https//segmentfault.com/a/1190000006254212

六、爲何虛擬dom會提升性能?

虛擬dom至關於在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操做，從而提升性能。

具體實現步驟以下：

用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中

當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別

把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

參考連接：

https://www.zhihu.com/question/29504639?sort=created

七、diff算法?

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

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

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

合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.

選擇性子樹渲染。開發人員能夠重寫shouldComponentUpdate提升diff的性能。

參考連接：

https//segmentfault.com/a/1190000000606216

八、react性能優化方案

（1）重寫shouldComponentUpdate來避免沒必要要的dom操做。

（2）使用 production 版本的react.js。

（3）使用key來幫助React識別列表中全部子組件的最小變化。

參考連接：

https://segmentfault.com/a/1190000006254212

九、簡述flux 思想

Flux 的最大特色，就是數據的"單向流動"。

1.用戶訪問 View

2.View 發出用戶的 Action

3.Dispatcher 收到 Action，要求 Store 進行相應的更新

4.Store 更新後，發出一個"change"事件

5.View 收到"change"事件後，更新頁面

參考連接：

http://www.ruanyifeng.com/blog/2016/01/flux.html

十、React項目用過什麼腳手架？Mern? Yeoman?

Mern：MERN是腳手架的工具，它能夠很容易地使用Mongo, Express, React and NodeJS生成同構JS應用。它最大限度地減小安裝時間，並獲得您使用的成熟技術來加速開發。

參考連接：http://www.open-open.com/lib/view/open1455953055292.html