Nic Lin's Blog

喜歡在地上打滾的 Rails Developer

React 效能優化基本招

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

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

  1. 區分何時用 Component 和 PureComponent 的時機
  2. shouldComponentUpdate 阻擋不必要渲染

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 更新來做渲染,其實會搞的更難以維護,因為其他開發者還需要知道「重新渲染的例外狀況」

小結

  1. 常更新 props / state 請用普通 Component 就好
  2. 不太常更新 props / state 可以用 PureComponent
  3. 嘗試用套件幫你做到 pure render
  4. 沒有 life cycle 的就可以用 Stateless Function Component

參考資源

comments powered by Disqus