又是前言

既然都講到 React.memo 以及 Shallow Compare （淺比較）了好像不講個 PureComponent 說不過去？

React.PureComponent 是 React 15.3中發布的 api，我這個初接觸react 就只寫過16.8之後的版本一聽到面試官問我完全誤煞煞，今天就來淺淺研究一下吧

PureComponent 跟 React.memo 都是為了避免不必要的渲染，增加我們的網頁效能的作用。在 functional component 我們使用了 React.memo，而 class components 中就是 PureComponent 發揮作用的時候啦。

React.PureComponent 採用 shallow compare 的方式對前後兩個 state 或 props 進行比較，不相等的話，才會進行 render

這是一個一般的 React.component

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

這是一個 React.PureComponent

class PureComp extends PureComponent {
  render() {
    return (
      <div className="pure">
        <h3>挖洗 title 啦 {this.props.title}</h3>
        <p>這裡是 pure component</p>
      </div>
    );
  }
}

React.PureComponent 使用情況

1. 當傳入的 props 或 state 是常常變動的資料時，就沒有使用必要反而更耗效能，這時使用 React.Component 就可以了
2. 不常用的 Component 就很適合利用 PureComponent 來包裝

shouldComponentUpdate

還有一個能讓 React.component 跟 React.PureComponent 一樣能減少 render 的方法
就是 shouldComponentUpdate

它可以用來決定 component 是否要被 re-render，他一樣會在父層更新時被呼叫，不過當他回傳 false 時，接下來的 render() 就不會繼續執行了。

這是一個使用了 shouldComponentUpdate 的 React.component

class JustComp extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.title !== this.props.title) return true;
    return false;
  }
  render() {
    return (
      <div className="component">
        <h3>title 底加啦 {this.props.title}</h3>
      </div>
    );
  }
}

大家可以來看看我 codesandbox 的範例

感謝閱讀～