關於React面試題彙總

千鋒IT技術學習發表於2018-06-14

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



相關文章