如果有錯誤，歡迎留言指教~ Q_Q

如果你要成功更新畫面，你必須經過兩個步驟：

1. render function
2. virtual DOM diff

因此，要優化效能的話你有兩個方向，那就是：

不要觸發 render function

1. 如果明確知道不該有變化，連 render 都不該呼叫~ 沒有 render 的話，virtual DOM 都不需要執行比較
2. 利用生命週期的 shouldComponentUpdate:回傳 false，就不會重新呼叫 render function

class Content extends React.Component {
  shouldComponentUpdate(){
    return false;
  }

  render () {
    return <div>{this.props.text}</div>
  }
}

但通常判斷方式還是會以：如果每一個 props 跟 state 都沒有變，那就回傳 false

class Content extends React.Component {
  shouldComponentUpdate(nextProps, nextState){
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  }
  // 用 shallow equal 檢查 
  // (只要比較一層) props 和 state 有無改變
  // 有改變才 update component
  // 這就是 *pure render 優化*
  render () {
    return <div>{this.props.text}</div>
  }
}

保持 virtual DOM 的一致

用 Memorized Hook 來優化效能吧