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