React的性能优化

1. 在constructor中绑定事件函数的this指向

把一个函数赋值给一个变量，然后用那个变量去执行函数会造成this的丢失，所以需要绑定this，把绑定放在构造函数中可以保证只绑定一次函数，如果放在render函数中绑定this的话每次渲染都会去绑定一次this，那样是很耗费性能的。

2. 使用箭头函数也就是异步函数的方式写setState

setState它是一个异步函数，他会合并多次修改，降低diff算法的比对频率。这样也会提升性能。

3. 虚拟DOM的使用

用JS对象描述DOM，而不是真的去调用浏览器API生成真实DOM。这样子啊比对前的生成会极大提升性能。

4. 同层比对

新旧状态的比对时采用同层比对，当发现某节点不一致了直接替换该节点的子树。而不管它的子树是不是真的改动了。

5. key值的使用

在列表循环的时候React会要求每一个列表项有一个独一无二，稳定的key值，它的目的是为了当状态改变时新旧状态的每一个列表项能够对应起来，方便比对。

6. shouldComponentUpdate

当父组件被重新渲染时即render函数执行时，子组件就会默认被重新渲染，但很多时候是不需要重新渲染每一个子组件的。这时就可以使用 shouldComponentUpdate 来判断是否真的需要重新渲染子组件。仅仅一个判断，就可以节约很多的消耗。
所以对于父组件发生变化而子组件不变的情况，使用shouldComponentUpdate会提升性能。

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content === this.props.content) {
        return false;
    } else {
        return true;
    }
}

作者：huyaoyao
链接：https://www.jianshu.com/p/bc00302c8d40
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。