1.PureRender純渲染
純渲染,組件的渲染是被相同的props和state渲染得到的相同結果。
可以在shouldComponentUpdate函數中,對傳入的props和state與之前的進行淺比較,如果相同則組件不會執行render方法,來減少dom渲染次數。
其中用作淺比較的shallowEqual如下:
function shallowEqual(a,b){
if(a===b){
return true;
}
const aKeys=Object.keys(a);
const bKeys=Object.keys(b);
if(aKeys.length!==bKeys.length){
return false;
}
//僅進行淺度比較,僅比較其引用
return aKeys.every((key)=>{
return a[key]===b[key];
});
}
2.Immutable
不可變數據就是一旦創建,就不能再更改的數據,對Immutable對象進行修改,就會返回一個新的Immutable對象。
- 根本上,Immutable使用了結構共享,如果對象樹種的一個節點發生變化,只能修改這個節點與受它影響的父節點,其他節點則共享,可以節省內存。
- 兩個Immutable比較,可以用===比較其內存地址,也可以通過Immutable.is作值比較,只要兩個對象hashCode相等,值就是一樣的,避免了深度遍歷比較
- 可以在shouldComponentUpdate中使用===或is對state和props進行高效地判斷數據是否變化,來避免不必要的render
PS: Object.keys會列出對象所有可枚舉屬性,而for in則會列出對象原型鏈上所有可枚舉屬性