React性能优化方案之PureRenderMixin

React性能检测

安装react性能检测工具 npm i react-addons-perf --save，而后在初始化项目的./app/index.js中写入如下代码：

//性能检测
import Perf from 'react-addons-perf'
if(_DEV_){
    window.Perf=Perf
}
复制代码

在运行以前，先让react项目启动起来，而后打开开发者调试面板，在console中输入Perf.start()开始检测，在页面上进行若干的操做之后，执行Perf.end()，终止检测操做，而后执行Perf.printWasted()，在console中会打印出操做过程的一个列表展现本次性能结果。在实际项目开发中常常会使用它查看项目的性能状况。

若是性能影响不是很大，例如每次操做就消耗几秒到几十毫秒，那就没必要纠结。可是若是浪费过多时间影响到其用户体验，那咱们就必须搞定它。

PureRenderMixin 优化

react最经常使用的工具就是PureRenderMixin，使用 npm i react-addons-pure-render-mixin --save,安装并使用：

import React,{Component} from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

class Demo extends Component{
    constructor(props){
        super(props)
        this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind(this)
    }
    //省略其余代码....
}
复制代码

react的生命周期hook中有个shouldComponentUpdate，组件每一次改动，都要问一下这个函数是否要执行更新，当这个函数返回true，则执行更新。返回false，则不执行更新。默认的状况下，这个函数一直会返回true，即一些无效的更新也会执行。

为何会有无效的改动？咱们都知道，在react组件中，state和props的改变都会触发组件的更新和从新渲染。可是在react中有些时候state和props没有改变也会触发更新。这样就会致使无效的渲染。

这里使用this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind(this),其实是对组件原来的shouldComponentUpdate的方法进行重写，每次更新以前都要查看props和state的是否发生改变，若是改变；就返回false，没有就返回true。

因此咱们在react开发中都尽可能在组件中加入PureRenderMixin方法去优化性能。