1.PureRender純渲染
純渲染,組件的渲染是被相同的props和state渲染得到的相同結(jié)果。
可以在shouldComponentUpdate函數(shù)中,對(duì)傳入的props和state與之前的進(jìn)行淺比較,如果相同則組件不會(huì)執(zhí)行render方法缩麸,來(lái)減少dom渲染次數(shù)。
其中用作淺比較的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;
}
//僅進(jìn)行淺度比較赡矢,僅比較其引用
return aKeys.every((key)=>{
return a[key]===b[key];
});
}
2.Immutable
不可變數(shù)據(jù)就是一旦創(chuàng)建杭朱,就不能再更改的數(shù)據(jù),對(duì)Immutable對(duì)象進(jìn)行修改吹散,就會(huì)返回一個(gè)新的Immutable對(duì)象弧械。
- 根本上,Immutable使用了結(jié)構(gòu)共享空民,如果對(duì)象樹(shù)種的一個(gè)節(jié)點(diǎn)發(fā)生變化刃唐,只能修改這個(gè)節(jié)點(diǎn)與受它影響的父節(jié)點(diǎn),其他節(jié)點(diǎn)則共享,可以節(jié)省內(nèi)存画饥。
- 兩個(gè)Immutable比較衔瓮,可以用===比較其內(nèi)存地址,也可以通過(guò)Immutable.is作值比較抖甘,只要兩個(gè)對(duì)象hashCode相等报辱,值就是一樣的,避免了深度遍歷比較
- 可以在shouldComponentUpdate中使用===或is對(duì)state和props進(jìn)行高效地判斷數(shù)據(jù)是否變化单山,來(lái)避免不必要的render
PS: Object.keys會(huì)列出對(duì)象所有可枚舉屬性,而for in則會(huì)列出對(duì)象原型鏈上所有可枚舉屬性