react的更新機制
知識
01-05
- 每次setState都會調用組件的render函數？
- setState後會進入到shouldComponentUpdate鉤子函數，由該函數的返回值決定是否調用render函數。
- 如果組件中包含有子組件那麼render完之後會進入子組件的shouldComponentUpdate鉤子函數。
- 調用了render函數一定會重新渲染DOM？
- 調用了render函數並不意味著一定會重新渲染DOM。這裡需要提到react的虛擬dom的概念（virtual DOM）。render函數調用並不會直接渲染成dom，而是，返回一個virtual DOM，何為virtual DOM？他其實就是一個js對象，這個對象描述了真實dom的各個屬性。在真正渲染成為DOM之前，會執行react里的diff演算法，比較原virtual DOM和新的virtual DOM（新舊兩個對象）的差異，如果沒有差異則不會重新渲染DOM，如果有差異只重新渲染差異的地方，這也是react高性能的原理。
- diff演算法運行在哪個生命周期呢？
- 在render之後，render返回的是virtual DOM。diff演算法就是對virtual DOM進行比較。從而以最優策略更新DOM。
- 我們剛才提到shouldComponentUpdate可以控制render函數是否調用，shouldComponentUpdate返回為false時不調用render。假如state和props並沒有改變，那麼調用render，執行diff運算就毫無意義。我們可以在shouldComponentUpdate鉤子函數中比較state和props是否改變，如果沒有改變直接返回false，不進行render調用。這時候react引入了PureComponent概念，他會在render之前對state和props進行淺比較，若state和props都相同，則不會調用render。這個淺比較是在shouldComponentUpdate中進行的，所以，使用PureComponent時不能在用shouldComponentUpdate鉤子函數了，因為會覆蓋默認的鉤子函數行為。
- 關於父子組件中，shouldComponentUpdate和render調用順序：
- 父組件shouldComponentUpdate =》 父組件render =》子組件shouldComponentUpdate =》 子組件render ...
- 淺比較決定是否調用render函數（PureCompoennt）
- render返回virtual DOM，然後進行diff運算
- diff運算決定怎麼操作DOM
- 怎麼測試是否渲染DOM？
- 操作時可以觀測瀏覽器調試面板的元素節點是否有閃動，dom操作時即使值一樣也會有閃動。
- PureComponen和React.Component區別
- PureComponent在render之前會進行淺比較，React.Component不會。
- 當設置state和props的屬性值為引用類型時要格外注意，使用PureComponent時很可能不會把新值渲染到DOM上，因為淺比較的機制根本就沒調用 render。而React.Component不會淺比較，直接render，返回virtual DOM進行diff運算，從而更新DOM。合理的利用PureComponent可以提高性能，濫用則會拖慢性能。我認為，在state和props的屬性值都為值類型時使用會提高性能。反之，為引用類型時，為保證DOM的渲染，通常會使用ES6的展開語法從而使引用類型的屬性值不一樣（展開語法是新建了一個對象，與原對象指針不相同），使淺對比總是返回false，從而調用render。請注意，這時使用PureComponent比直接使用React.Component多做了一件事——淺對比，這時會對性能拖累。
※我再也不會去單休的公司上班了
※教你百家號一篇文章就能收益幾百，月入過萬簡簡單單
TAG:極客教程 |