Day 19 - 效能优化，避免过度 render state

如果有错误，欢迎留言指教~ 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 来优化效能吧