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方法聯系起來。
4、react生命周期函數
這個問題要考察的是組件的生命周期
一、初始化階段:
getDefaultProps:獲取實例的默認屬性
getInitialState:獲取每個實例的初始化狀態
componentWillMount:組件即將被裝載、渲染到頁面上
render:組件在這里生成虛擬的DOM節點
componentDidMount:組件真正在被裝載之后[AJAX請求]
二、運行中狀態:
componentWillReceiveProps:組件將要接收到屬性的時候調用
shouldComponentUpdate:組件接受到新屬性或者新狀態的時候(可以返回false,接收數據后不更新,阻止render調用,后面的函數不會被繼續執行了)
componentWillUpdate:組件即將更新不能修改屬性和狀態
render:組件重新描繪
componentDidUpdate:組件已經更新
三、銷毀階段:
componentWillUnmount:組件即將銷毀
5、react性能優化是哪個周期函數?
shouldComponentUpdate 這個方法用來判斷是否需要調用render方法重新描繪dom。因為dom的描繪非常消耗性能,如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff算法,可以極大的提高性能。
6、為什么虛擬dom會提高性能?
虛擬dom相當於在js和真實dom中間加了一個緩存,利用dom diff算法避免了沒有必要的dom操作,從而提高性能。
具體實現步驟如下:
用 JavaScript 對象結構表示 DOM 樹的結構;然后用這個樹構建一個真正的 DOM 樹,插到文檔當中
當狀態變更的時候,重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較,記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上,視圖就更新了。
7、diff算法?
把樹形結構按照層級分解,只比較同級元素。
給列表結構的每個單元添加唯一的key屬性,方便比較。
React 只會匹配相同 class 的 component(這里面的class指的是組件的名字)
合並操作,調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制.
選擇性子樹渲染。開發人員可以重寫shouldComponentUpdate提高diff的性能。
8、react性能優化方案
(1)重寫shouldComponentUpdate來避免不必要的dom操作。
(2)使用 production 版本的react.js。
(3)使用key來幫助React識別列表中所有子組件的最小變化。
9、簡述flux 思想
Flux 的最大特點,就是數據的”單向流動”。
1.用戶訪問 View
2.View 發出用戶的 Action
3.Dispatcher 收到 Action,要求 Store 進行相應的更新
4.Store 更新后,發出一個”change”事件
5.View 收到”change”事件后,更新頁面
10、React項目用過什么腳手架?Mern? Yeoman?
Mern:MERN是腳手架的工具,它可以很容易地使用Mongo, Express, React and NodeJS生成同構JS應用。它最大限度地減少安裝時間,並得到您使用的成熟技術來加速開發。
11、 Reactjs component 中 prop 和 state 的區別
props放初始化數據,一直不變的,state就是放要變的。
需要理解的是,props是一個父組件傳遞給子組件的數據流,這個數據流可以一直傳遞到子孫組件。而 state代表的是一個組件內部自身的狀態(可以是父組件、子孫組件)
改變一個組件自身狀態,從語義上來說,就是這個組件內部已經發生變化,有可能需要對此組件以及組件所包含的子孫組件進行重渲染。
兩者的變化都有可能導致組件重渲染
state:如果component的某些狀態需要被改變,並且會影響到component的render,那么這些狀態就應該用state表示。例如:一個購物車的component,會根據用戶在購物車中添加的產品和產品數量,顯示不同的價格,那么“總價”這個狀態,就應該用state表示。
props:如果component的某些狀態由外部所決定,並且會影響到component的render,那么這些狀態就應該用props表示。例如:一個下拉菜單的component,有哪些菜單項,是由這個component的使用者和使用場景決定的,那么“菜單項”這個狀態,就應該用props表示,並且由外部傳入。
11、調用 setState 之后發生了什么?
在代碼中調用setState函數之后,React 會將傳入的參數對象與組件當前的狀態合並,然后觸發所謂的調和過程(Reconciliation)。經過調和過程,React 會以相對高效的方式根據新的狀態構建 React 元素樹並且着手重新渲染整個UI界面。在 React 得到元素樹之后,React 會自動計算出新的樹與老樹的節點差異,然后根據差異對界面進行最小化重渲染。在差異計算算法中,React 能夠相對精確地知道哪些位置發生了改變以及應該如何改變,這就保證了按需更新,而不是全部重新渲染。
12、React 中 refs 的作用是什么?
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。我們可以為元素添加ref屬性然后在回調函數中接受該元素在 DOM 樹中的句柄,該值會作為回調函數的第一個參數返回
13、React 中 keys 的作用是什么?
Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 算法中 React 會借助元素的 Key 值來判斷該元素是新近創建的還是被移動而來的元素,從而減少不必要的元素重渲染。此外,React 還需要借助 Key 值來判斷元素與本地狀態的關聯關系,因此我們絕不可忽視轉換函數中 Key 的重要性。
14、shouldComponentUpdate 的作用是啥以及為何它這么重要?
shouldComponentUpdate 允許我們手動地判斷是否要進行組件更新,根據組件的應用場景設置函數的合理返回值能夠幫我們避免不必要的更新。
15、在生命周期中的哪一步你應該發起 AJAX 請求?
我們應當將AJAX 請求放到 componentDidMount 函數中執行,主要原因有下:
React 下一代調和算法 Fiber 會通過開始或停止渲染的方式優化應用性能,其會影響到 componentWillMount 的觸發次數。對於 componentWillMount 這個生命周期函數的調用次數會變得不確定,React 可能會多次頻繁調用 componentWillMount。如果我們將 AJAX 請求放到 componentWillMount 函數中,那么顯而易見其會被觸發多次,自然也就不是好的選擇。
如果我們將 AJAX 請求放置在生命周期的其他函數中,我們並不能保證請求僅在組件掛載完畢后才會要求響應。如果我們的數據請求在組件掛載之前就完成,並且調用了setState函數將數據添加到組件狀態中,對於未掛載的組件則會報錯。而在 componentDidMount 函數中進行 AJAX 請求則能有效避免這個問題。
---------------------
作者:QQ帝國
來源:CSDN
原文:https://blog.csdn.net/qq_empire/article/details/82859691
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!