PureComponent 代替 Component

React中内置函数，根据下面的方法进行是不是PureComponent的判断，帮我们做了本来应该我们在shouldComponentUpdate中做的事情

1.PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最佳情况是展示组件;
2.PureComponent 尽量结合 immutable.js 使用，偶尔会有坑;

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

而本来我们做的事情如下，这里判断了state有没有发生变化（prop同理），从而决定要不要重新渲染，这里的函数在一个继承了React.Component的组件中，而这里this.state.person是一个对象，你会发现，在这个对象的引用没有发生变化的时候是不会重新render的（即下面提到的第三点），所以我们可以用shouldComponentUpdate进行优化，这个方法如果返回false，表示不需要重新进行渲染，返回true则重新渲染，默认返回true

shouldComponentUpdate(nextProps, nextState) {
    return (nextState.person !== this.state.person);
}

常见使用场景

如下显示的是一个IndexPage组件，设置了一个state是isShow，通过一个按钮点击可以改变它的值，结果是：初始化的时候输出的是constructor()，render()，而第一次点击按钮，会输出一次render()，即重新渲染了一次，界面也会从显示false变成显示true，但是当这个组件是继承自React.PureComponent的时候，再点击的时，不会再输出render，即不会再重新渲染了，而当这个组件是继承自React.Component时，还是会输出render()，还是会重新渲染，这时候就是React.PureComponent内部做了优化的体现

同理也适用于string、number等基本数据类型，因为基本数据类型，值改变了就算改变了

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      isShow: false
    };
    console.log('constructor');
  }
  changeState = () => {
    this.setState({
      isShow: true
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>{this.state.isShow.toString()}</div>
      </div>
    );
  }
}