Component 和 PureComponent 的区别；复制demo，肉眼可以的区别

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