Component 和 PureComponent 的区别

React.PureComponent它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。
简单来说，就是PureComponent简单实现了shouldComponentUpdate()的功能
当然，如果你的数据结构比较复杂就不行了

首先看看第一段代码

import React from 'react'

class Child extends React.Component {

  render() {
    console.log('child render')
    return <div>child</div>;
  }
}

class App extends React.Component {
  state = {
    a: 1,
  };

  render() {
    console.log('render');
    return (
      <>
        <button
          onClick={() => {
            this.setState({ a: 2 });
          }}
        >
          Click me
        </button>
        <Child color={'red'}/>
      </>
    );
  }
}

export default App

当我们点击按钮更新了父组件的状态，那么子组件也会重新render，那么这个时候输出的是：

parent render
child render

当我们想优化组件render的时候，我们会使用shouldComponentUpdate() 。那么我现在把上面的 Child 组件替换为如下：

class Child extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true
    }
  }

  render() {
    console.log('child render')
    return <div>child</div>;
  }
}

这个时候，我们点击按钮更新父组件状态的时候，子组件的是不会render的，输入的是：

parent render

 

最后，我们在把child组件替换为如下：

class Child extends React.PureComponent {
  render() {
    console.log('child render')
    return <div>child</div>;
  }
}

你会发现它和上图的Child组件是一样的效果，同样只输出了：

parent render