React 性能优化

React 性能优化

性能检测

安装react性能检测工具npm i react-addons-perf --save,然后再./app/index.jsx中

// 性能测试
import Perf from 'react-addons-perf'
if (__DEV__) {
    window.Perf = Perf
}

运行程序,在操作之前,先运行Perf.start()开始检测,然后进行若干操作,运行Perf.stop()停止检测,然后再运行Perf.printWasted即可打印出浪费性能的组件列表.在开发过程中,要经常使用检测工具来看看性能是否正常.

PureRenderMixin 优化

React最基本的优化方式是使用PureRenderMixin,安装工具npm i react-addons-pure-render-mixin --save,然后在组件中引用并使用

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

class List extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }


}

React有一个生命周期hook叫做shouldComponentUpdate,组件每次更新之前,都要过一边这个函数,如果这个函数返回true则更新,如果返回false则不更新.而默认情况下,这个函数会一直返回true.就是说,如果有一些无效的改动触发了这个函数,也会导致无效的更新

什么是无效的改动?之前说过,组件中的props和state一旦变化会导致组件重新更新并渲染,但是如果props和state没有变化也莫名其妙的触发更新了呢?(这种情况确实存在) —这就是无效的渲染
这里使用this.shouldComponentUpdate = PureRenderMixin.bind(this)的意思是重写组件的shouldComponentUpdate函数,在每次更新前判断props和state.如果有变化则返回true,没有则返回false
因为在开发过程中,尽量使用PureRenderMixin

Immutable.js 优化

React的终极优化是使用Immutable来处理数据,Immutable实现了js中不可变数据的概念
但是也不是所有的场景都适用它,当我们的组件props和state中的数据结构层次不深(例如普通的数组,对象等)的时候,就没必要使用它.但是当数据结构层次很深(例如obj.x.y.a.b = 10这种),就可以考虑使用了
之所以不轻易使用是,Immutable定义了一种新的操作数据的语法,和平时操作的js不一样,并且每个地方都得这么用,学习成本高,易遗忘,风险很高

var map1 = Immutable.Map({a:1,b:2,c:3});
var map2 = map1.set('b',50);
map1.get('b'); //2
map2.get('b'); //50

因此,这里建议优化还是要从设计着手,尽量数据结构设计的扁平一些,这样既有利于优化系统性能,又减少了开发复杂度和开发成本