註意:只有類組件才有生命周期鉤子函數,函數組件沒有生命周期鉤子函數。 生命周期 裝載階段:constructor() render() componentDidMount() 更新階段:render() componentDidupDate() 卸載階段:componentWillUnmount() ...
註意:只有類組件才有生命周期鉤子函數,函數組件沒有生命周期鉤子函數。
生命周期
- 裝載階段:constructor() render() componentDidMount()
- 更新階段:render() componentDidupDate()
- 卸載階段:componentWillUnmount()
(面試題)shouldComponentUpdate()
- 返回true時,正常進入更新階段,返回false時,不進入更新階段。
- this.$forceUpdate()這個方法調用,會繞過shouldComponentUpdate(),一定會 進入更新階段。
- shouldComponentUpdate()一般用於性能調優,阻塞掉哪些不參與視圖渲染的變數更新導致的(Fiber)生成。
- shouldComponentUpdate()只有在類組件Component中才有用,在PureComponent中沒用。
React組件的渲染(更新)流程
由兩個階段構成,一個是render階段,一個是commit階段。
render階段: 目標是生成Fiber樹,這個過程是非同步的,可以中斷的,並且不執行任何副作用。
commit階段:目標是把協調運算的結果,一次性提交渲染(更新)成真實DOM,這個過程在React(v17)是不可中斷的,在React(v18)中可以人為的中斷(由startTransitansition進行中斷)
React響應式原理(Fiber架構)
什麼是Fiber單元
每一個JSX元素節點都是一個Fiber單元(React.creatElement()的返回值)
為什麼React要構建複雜的Fiber樹
為了讓協調運算,commit階段可以迴圈執行,而不是遞歸
怎麼執行協調運算
沒個Fiber單元上都有一個alternater指針,指向舊Fiber中的自己。如果新的Fiber樹存在,但舊的Fiber樹不存在,說明新增節點;如果新的Fiber樹不存在,但舊的Fiber樹存在,說明這個節點是要刪除的節點;如果新舊Fiber樹都存在這個節點,進一步遍歷新舊節點的屬性,對比新舊節點的變化。
這些獨立的Fiber單元是怎麼串聯成Fiber樹
給每個Fiber單元添加(child,sibling,parent)指針