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