react性能优化

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则会列出对象原型链上所有可枚举属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容