react性能优化

字数 239阅读 249

性能检测工具

安装react性能检测工具:

npm i react-addons-perf --save-dev

然后在./app/index.js中加入参数:

import Perf from 'react-addons-perf' 
if (__DEV__) { window.Perf = Perf }
  • 运行程序,在操作之前在console中先运行Perf.start()开始检测;
  • 然后进行若干操作,运行Perf.stop停止检测,
  • 然后再运行Perf.printWasted()即可打印出浪费性能的组件列表。
    在项目开发过程中,要经常使用检测工具来看看性能
    是否正常。如果性能的影响不是很大,例如每次操作多浪费几毫秒、十几毫秒,个人以为没必要深究,但是如果浪费过多影响了用户体验,就必须去搞定它。

优化方法

推荐使用官方的优化方法:
优化shouldComponentUpdate,使用官网的优化插件 react-addons-pure-render-mixin

安装:npm i -save react-addons-pure-render-mixin;
使用:

import PureRenderMixin from 'react-addons-pure-render-mixin';
class XXX extends Compoennt{
    constructor(props, context){
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
    }
    ....
}

每个组件都可以这样写。

推荐阅读更多精彩内容