React性能优化方案之PureRenderMixin

2,842 阅读2分钟

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方法去优化性能。