React 效能調優總結

因為多數情況下我們在react元件當中是不會去寫shouldcomponentupdate這個hook來避免多餘渲染的，所以就造成了少量的效能浪費。雖然優化是個漫長的道路，過早優化是**的，但做還是要去做的。

下面講一下基本的一些手段

在react當中，每一次的setstate操作，都會讓virtual dom去做diff操作，雖然虛擬dom的計算很快，但是隨著元件越來越多，結構越來越複雜，當你改變某個簡單的state時，就會造成連帶很多component的重新render，所以我們可以在元件內部去新增shouldcomponentupdate鉤子來告訴react是否要更新元件

當然我們在實際開發過程當中，由於資料的複雜程度來說，基本是不會去寫shouldcomponentupdatehook，這時就可以去使用purecomponent類來宣告元件。

purecomponent的前身是purerendermixin,和component的區別就在於元件在render之前會自動執行一次shallowequal（淺比較）,就相當於元件的第一層props和state的資料如果沒有發生改變，render就不會去執行，從而減少了不必要的渲染。

根據react原始碼，如果元件是純元件(pure component)，那麼一下比較是很容易理解的：

if (this._compositetype === compositetypes.pureclass)

為什麼說是淺比較呢？這個很好理解，js的引用資料型別就很好的說明了這一點：

{} === {} //false
=== //false

當然，你也可以在shouldcomponentupdate中自己來寫深比較，在資料結構相對簡單的情況下：

shouldcomponentupdate(nextprops, nextstate)

如果是在purecomponent當中寫了這個鉤子，那麼它就會被優先執行。

當然，在資料結構和巢狀比較深的情況下，這個方案也就不太管用了，所以，我們在前期定義資料結構時也是乙個很重要的環節，可以去避免不必要的渲染。

facebook在2023年就推出了這個庫： immutable.js，用來使資料持久化。在資料建立後，就不得去改變，任何的增刪改操作都是true乙個新的immutable物件：

import  from "immutable";
const map1 = map(, b: 2, c: 3 });
const map2 = map1.set('b', 50);
map1 !== map2; // true
map1.get('b'); // 2
map2.get('b'); // 50
map1.get('a') === map2.get('a'); // true

immutablejs最大的兩個特性就是：immutable data structures（永續性資料結構）與structural sharing（結構共享），永續性資料結構保證資料一旦建立就不能修改，使用舊資料建立新資料時，舊資料也不會改變，不會像原生 js 那樣新資料的操作會影響舊資料。而結構共享是指沒有改變的資料共用乙個引用，這樣既減少了深拷貝的效能消耗，也減少了記憶體。比如下圖：

immutablejs的api過於複雜，而且我也沒有用redux，而是採用了mutable的mobx,看見mobx的作者寫了乙個庫immer，相對於immutablejs比較簡單：

import produce from "immer"
/** * classic react.setstate with a deep merge */
onbirthdayclick1 = () => 
}))}/** * ...but, since setstate accepts functions, * we can just create a curried producer and further simplify! */
onbirthdayclick2 = () => )
)}

每次bind都會返回乙個新函式，重複建立靜態函式會浪費效能。最好直接使用箭頭函式繫結或者利用閉包直接把處理函式傳入子元件

在我們去setstate時，最好用新值去覆蓋舊值，而不是修改原值。對於陣列，我們採用es6的spread語法：

this.setstate(prevstate => ());

對於物件，我們採用object.assign或spread:

this.setstate(, this.state.a, )
})//或者
this.setstate(}
})

style= } 這樣的做法傳入元件會造成重複渲染

這樣的方式會使shallowequal一定返回false

正確的方式：

const yourstyle =  
return (
yourcomponent>
)

或者我們直接就用上面說到的immutable.js 或者 immer.js 來處理

React 效能調優總結

效能調優總結

spark效能調優總結

hive效能調優總結

React 效能調優總結

效能調優總結

spark效能調優總結

hive效能調優總結

相關推薦