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=created7、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/11900000062542129、簡述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