react 简单优化

在url后加 ?react_pref 能够结合Chrome自带的Performance作性能测试

单组件优化：

核心：减小render函数执行次数

事件绑定：

• 在constructor中使用bind绑定：

constructor(props) {
    super(props)
    this.eventHandle = this.eventHandle.bind(this)
}
复制代码

* 优势：只须要绑定一次，而且只会执行一次；
* 缺点：即便不须要state也须要添加constructor来绑定，代码量多一点
复制代码

• 在render中使用bind绑定：

// ...
render() {
    return (
        <button onClick={this.clickHandle.bind(this)}></button>
    )
}
// ...
复制代码

* 优势：写法简单；
* 缺点：每次执行render都会从新执行一次，屡次使用同一个函数须要绑定屡次（不推荐使用该方法）
复制代码

• 在render中使用箭头函数绑定：

// ...
render() {
    return (
        <button onClick={() => this.clickHandle()}></button>
    )
}
// ...
复制代码

* 优势：写法简单，相对于上一种方法性能稍好一点；
* 缺点：每次执行render都要从新生成一个函数
复制代码

• 在函数初始化时使用箭头函数绑定（实验性）：

// ...
clickHandle = () => {
    // ...
}
render() {
    return (
        <button onClick={this.clickHandle}></button>
    )
}
// ...
复制代码

* 优势：写法简单，结合了以上三种方法的优势；
* 缺点：目前是实验性的语法，须要babel转译
复制代码

总结：方式一是官方推荐的方式，也是性能最好的方式；方法二和方法三有性能问题，而且当方法做为属性传递给子组件时会触发re-render，由于子组件的props发生了改变；方法四是最好的绑定方式，可是须要结合babel转译

属性传递：

因为js的特性（对象在内存中的存储），若是传递的是一个对象，尽可能提早声明一个索引指向该对象，避免每次render都从新在内存中生成一个新的对象。

多组件优化：

核心：减小子组件render函数的执行次数（减小子组件的重渲）

定制子组件的shouldComponentUpdate

当父组件发生了render，子组件都会从新渲染。不少时候子组件并无发生任何改变，它接收到父组件传给它的props并无发生变化，自身的state也没有变化，这种状况下子组件的无脑从新render就能够在其shouldComponentUpdate()钩子函数里作一些操做。这个钩子函数默认返回true，即render会执行；咱们在里面作些业务上的检测，再返回true或false来肯定子组件该不应从新渲染。

使用React.PureComponent(React@15.3新增)

它相似于React.Component，区别在于PurComponent简单的实现了shouldComponentUpdate()而Component没有实现。适用状况：组件的render函数在给定相同的props和state时渲染相同的结果（纯组件），能够提高性能。

Note(官网上的Note) React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data. Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.

PureComponent的shouldComponent()只实现了浅对比，深对比太消耗性能（对象的深比较须要用到递归，复杂度过高，性能消耗太大）。

可使用immutable这个库来进行对象的深比较，复杂度比较低，可是这个库比较大。使用方法参考文档

redux优化

当咱们页面使用的数据须要对获取的redux中的数据进行一些处理（复杂的计算）才能使用，而且不少状态是常常切换得时候，咱们能够将那些状态缓存起来，避免每次切换都从新计算。可使用react官方推荐一个库——reselect，使用方法参考文档

列表类组件优化

当咱们渲染一个列表时，必须给每一项传key，不然react会报一个警告。这个key不建议使用数组遍历时的index，由于它只能帮助咱们消除警告而已，并无任何实际意义。若是咱们在数组前面添加一个元素，那么react会认为全部的元素都发生了改变，因此所有都从新渲染了，咱们并无感觉到虚拟DOM带给咱们的优化。因此key的值必须是惟一的才有意义。

推荐阅读
react组件性能优化探索实践
高性能 React 组件

原文连接（linxunzyf.cn/posts/d5323…）