如何对react进行性能优化

 　　React本身就非常关注性能，其提供的虚拟DOM搭配上DIff算法，实现对DOM操作最小粒度的改变也是非常高效的，然而其组件的渲染机制，也决定了在对组件更新时还可以进行更细致的优化。 

　　

react组件渲染

　　在讲react生命周期时，就谈到过react组件分为了初始化渲染和更新渲染， 初始化渲染会调用根组件下的所有组件的render方法进行渲染， 如下图所示（绿色表示已经渲染）：

 

但是，当我们要更新某个组件的时候，如下面的绿色组件（从根组件传递下来应用在绿色组件上的数据发生变化）

即在这三层中，只有最底下的一层中的某个绿色组件的数据发生变化，所以理想状态就是只调用关键路径组件上的render，如下图：

 

但是 react 的默认做法是调用所有组件的render，再对生成的虚拟DOM进行比对，如果不变则不进行更新，这样的reader和虚拟DOM的对比是在浪费，如下图（黄色表示浪费的render和虚拟DOM的对比） 

（橘黄色 ＝ 浪费的渲染）

哦，不！我们所有的节点都被重新渲染了。

 

 

 

注意： 每次更新的方式是： 如果状态发生改变，就先render，render的过程是生成虚拟DOM的过程，然后在拿这个虚拟DOM和上一次的虚拟DOM进行比对，生成一个patch，通过这个patch打到真实DOM上，得到更新，虽然，通过虚拟DOM，react很好的做到了DOM的更新很少，但是，在状态发生变化的时候，react在render的时候却整个（所有的组件）都render了，而不是render一部分（最好只render状态发生变化的那个组件），这样就造成了浪费。 

 

那么如何才能避免发生这个浪费问题呢？  这里就要迁出我们的 shouldComponentUpdate 了。 

 

 　　

shouldComponentUpdate

　　在上面我们说到了在某一个组件更新的时候，只需要这一个组件调用render方法就可以了，而其他的组件不需要调用render方法（即使通过比对发现DOM没有改变，则不更新DOM，但是比对的时间也是被浪费了），那么怎么做到呢？实际上，react在每个组件生命周期更新的时候都会调用一个  shouldComponentUpdate(nextProps, nextState)函数， 他的职责就是返回true或false， true表示需要更新，而false表示不需要更新，默认返回true。 即使你没有显示的定义这个shouldComponentUpdate函数，那么返回的就是true，一定需要发生重新渲染，这样也就不安理解为什么会发生上面的资源浪费了  。

　　 为了避免一定程度的浪费，react官方还在0.14版本中添加了无状态组件，如下所示:

// es5
function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}

　　　

// es6
const HelloMessage = (props) => <div>Hello {props.name}</div>;

　　因为无状态组件压根就没有涉及到状态的改变，那么他们是不会参与到每次render和比对虚拟DOM的过程的，而是一旦创建，就稳如泰山了。 

　　

 

 

牛刀小试！ 直接把一些不需要更新的组件返回false

比如，下面时一个音量图标，这是一个svg图标，不需要更新，所以在shouldComponentUpdate中直接return false， 如下：

import React, {Component} from 'react';

class Mic extends Component {
    constructor(props) {
      super(props);
    }
    shouldComponentUpdate() {
        return false;
    }
    render() {
        return (
            <svg className="icon-svg icon-mic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
                <title>mic</title>
                <path className="path1" d="M15 22c2.761 0 5-2.239 5-5v-12c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 2.761 2.239 5 5 5zM22 14v3c0 3.866-3.134 7-7 7s-7-3.134-7-7v-3h-2v3c0 4.632 3.5 8.447 8 8.944v4.056h-4v2h10v-2h-4v-4.056c4.5-0.497 8-4.312 8-8.944v-3h-2z"></path>
            </svg>
        )
    }
}

export default Mic;

这样，无论上面的状态发生了怎样的改变，这里直接return false，所以就不会有render的过程了，避免了性能上的消耗和浪费。 其实，这样的情况直接使用无状态组件会更好，就不会有这个判断。 

 

 

 

登堂入室，对数据进行对比确定是否需要更新

先来个官网的例子，通过判断id是否改变来确定是否需要更新：

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

是不是很简单呢？但是是不是所有的都可以直接这么对比呢？ 我们来看下js的两种数据类型的比较：

// 原始类型
var a = 'hello the';
var b = a;
b = b + 'world';
console.log(a === b);  // false

// 引用类型
var c = ['hello', 'the'];
var d = c;
d.push('world');
console.log(c === d); // true

我们可以看到 a 和 b 不等，但是c和d是相等的，因为对于引用类型，比较的时地址，这里的地址并乜有发生改变！ 所以，我们得分情况处理了，原始数据类型和应用类型得采用不同的方法处理。 

 

原始数据类型： 

　　原始数据的比对很简单，我们直接比对就是了，但是我们还可以更简单的比对， 因为每一个组件这么写下去也是挺麻烦的，于是react官方有了插件帮助我们搞定这件事： 

• PureRenderMixin（es5的插件）

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

　　

• Shallow Compare（es6的插件）

var shallowCompare = require('react-addons-shallow-compare');
export class SampleComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

 

 

引用类型数据： 

　　因为引用类型比对的是地址，所以可能一直都返回true，所以，我们得想办法吧前后的数据编程不一样的引用， 如下：

• react官方提供了一个Immutability Helpers

var update = require('react-addons-update');

var newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

　　这样，newDate和myDate就可以比对了。 

 

 

•  直接改变引用

const newValue = {
    ...oldValue
    // 在这里做你想要的修改
};

// 快速检查 —— 只要检查引用
newValue === oldValue; // false

// 如果你愿意也可以用 Object.assign 语法
const newValue2 = Object.assign({}, oldValue);

newValue2 === oldValue; // false

 

　　

• • immutable.js　　

　　Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。

　　Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享, 这样，就是每次开辟了新的地址，但是其中的某个属性还是在对之前没有改变的数据作引用，这样的性能消耗，就会减少。请看下面动画：

 

 

 

其他的一些技巧：

• 慎用setState，因为容易造成重新渲染。  
• 请将方法的bind一律置于constructor。 
• 请只传递component需要的props

 

 

使用Immutable.js

　　immutable.js 可以很好的解决问题， 他的基本原则是对于不变的对象返回相同的引用，对于变化的对象，返回新的引用， 因此对于状态的比较只要使用如下代码：

shouldComponentUpdate() { return ref1 !== ref2; }

 

 

 

 

 

参考文章：

• react组件性能优化探索实践

• react应用性能优化之路
• react应用性能优化之路（英文）
• react移动web极致优化
• 高性能react组件