React 效能優化基本招

2019-10-02

會慢基本都是慢在 render function，如果巢狀 components 從父節點開始重新渲染，導致下面的子節點跟著重新 render 就會不必要的效能浪費。

所以基本招大致上是兩招，

PureComponent 主要是用了 shallowEqual 去做數據對比，如果沒變化就不更新。

有點像是幫你在 shouldComponentUpdate 裡面幫你先檢查好數據前後差異。

如果你的 Component 的數據經常變化，那換成 PureComponent 並不會更快，因為每次要渲染的時候都還會經過一次計算。

pure render 是指當 props 和 state 都相同時，render function 會回傳一樣的 virtual DOM。

const PostComponent = () =>
  <div>
    <PostForm>
      <h1>Create Post</h1>
    </PostForm>
  </div>

上面的寫法其實還是會一直更新 component

因為上面的程式碼等價於

const PostComponent = () =>
  <div>
    <PostForm
      children={React.createElement('h1', {}, 'Create Post')}
    />
  </div>

當 PostComponent 再次 render 時，都會呼叫 React.createElement 取得新的 element 傳給 PostForm

所以這邊的 props.children 和 nextProps.children 永遠不同，等於沒有 pure render。

這邊可以參考套件 recompose/pure 來做 pure render 優化

類似

const PostComponent = pure(props =>
  <div>
    <PostForm>
      <h1>{props.title}</h1>
    </PostForm>
  </div>
)

這邊會用 pure 做而不全然用 shouldComponentUpdate 來做是因為，如果再一堆 component 裡面針對特定 props 更新來做渲染，其實會搞的更難以維護，因為其他開發者還需要知道「重新渲染的例外狀況」

小結