使用PureComponent提高render性能

最近在看ant pro 发现一个新奇的东西

这个 PureComponent 是哪里来的呢

什么是PureComponent

PureComponent就是React 15.3.0 新增了一个 PureComponent 类，我们可以以es6的方式方便的定义纯组件。

为什么使用PureComponent

使用PureComponent之后，组件在shoudComponentUpdate中会浅比较渲染前后的props和state，如果没有变化，组件不会进入接下来的生命周期，可以节省不必要的diff操作。
下面举个例子
这里有两个组件，Parent和Child

// parent.js
import React, {Component} from 'react';
import Child from './child';

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      title: 'title'
    };

    this.changeState = this.changeState.bind(this);
  }

  changeState() {
    this.state.title = Math.random();
    this.setState(this.state);
  }

  render() {
    return (
      <div>
        <h3>Container</h3>
        <button type="button" onClick={this.changeState}>change</button>
        <Child></Child>
      </div>
    );
  }

  componentWillUpdate() {
    console.log('parent will update');
  }
}

export default Parent;
// child.js
import React, {Component} from 'react';

class Child extends Component {
  render() {
    return (
      <div>child</div>
    );
  }

  componentWillUpdate() {
    console.log('child will update');
  }
}

export default Child;
`</pre>

在这里，Child组件没有任何属性输入和state状态，只是一个静态组件，我们点击Parent的change按钮，讲道理Child组件不应该进行任何diff，但是实际情况是"parent will update"和"child will update"都被打印出来了，这是不合理的。所以我们修改下child.js，让它继承PureComponent

<pre class="line-numbers prism-highlight" data-start="1">`//child.js
import React, {PureComponent} from 'react';

class Child extends PureComponent {
  render() {
    return (
      &lt;div&gt;child&lt;/div&gt;
    );
  }

  componentWillUpdate() {
    console.log('child will update');
  }
}

export default Child;

然后我们再次点击按钮，会发现只输出了”parent will update”，这是我们想要的。

应该注意的问题

PureComponent只能说是一种泛泛的性能问题解决方法，并不具备很高的定制性，最好的方式还是自己去处理组件的shoudComponentUpdate。并且，PureComponent的浅对比shallowEqual在对比引用值的时候，也会存在问题。