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则会列出对象原型链上所有可枚举属性