關於React面試題匯總


1、redux中間件

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

常見的中間件:

redux-logger:提供日志輸出

redux-thunk:處理異步操作

redux-promise:處理異步操作,actionCreator的返回值是promise

 

2、redux有什么缺點

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

2.當一個組件相關數據更新時,即使父組件不需要用到這個組件,父組件還是會重新render,可能會有效率影響,或者需要寫復雜的shouldComponentUpdate進行判斷。

 

3、react組件的划分業務組件技術組件?

根據組件的職責通常把組件分為UI組件和容器組件。

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

兩者通過React-Redux 提供connect方法聯系起來。

具體使用可以參照如下鏈接:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

 

4、react生命周期函數

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

一、初始化階段:

getDefaultProps:獲取實例的默認屬性

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

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

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

componentDidMount:組件真正在被裝載之后

二、運行中狀態:

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

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候(可以返回false,接收數據后不更新,阻止render調用,后面的函數不會被繼續執行了)

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

render:組件重新描繪

componentDidUpdate:組件已經更新

三、銷毀階段:

componentWillUnmount:組件即將銷毀

 

5、react性能優化是哪個周期函數?

shouldComponentUpdate 這個方法用來判斷是否需要調用render方法重新描繪dom。因為dom的描繪非常消耗性能,如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff算法,可以極大的提高性能。

詳細參考:

https//segmentfault.com/a/1190000006254212

 

6、為什么虛擬dom會提高性能?

虛擬dom相當於在js和真實dom中間加了一個緩存,利用dom diff算法避免了沒有必要的dom操作,從而提高性能。

具體實現步驟如下:

用 JavaScript 對象結構表示 DOM 樹的結構;然后用這個樹構建一個真正的 DOM 樹,插到文檔當中

當狀態變更的時候,重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較,記錄兩棵樹差異

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

參考鏈接:

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

 

7、diff算法?

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

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

React 只會匹配相同 class 的 component(這里面的class指的是組件的名字)

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

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

參考鏈接:

https//segmentfault.com/a/1190000000606216

8、react性能優化方案

(1)重寫shouldComponentUpdate來避免不必要的dom操作。

(2)使用 production 版本的react.js。

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

參考鏈接:

https://segmentfault.com/a/1190000006254212
 

 

9、簡述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

10、React項目用過什么腳手架?Mern? Yeoman?

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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM