會慢基本都是慢在 render function，如果巢狀 components 從父節點開始重新渲染，導致下面的子節點跟著重新 render 就會不必要的效能浪費。
所以基本招大致上是兩招，
- 區分何時用 Component 和 PureComponent 的時機
- 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 更新來做渲染，其實會搞的更難以維護，因為其他開發者還需要知道「重新渲染的例外狀況」
小結
- 常更新 props / state 請用普通 Component 就好
- 不太常更新 props / state 可以用 PureComponent
- 嘗試用套件幫你做到 pure render
- 沒有 life cycle 的就可以用 Stateless Function Component
參考資源
好文轉自作者Nic Lin’s Blog–喜歡在地上打滾的 Rails Developer
如果你喜歡他的文章，歡迎回到他的部落格觀看更多:)
12/4 晚上由他擔任分享者的小聚活動，開放早鳥報名中，活動資訊請看下方連結：
學程式主題小聚 x Devstars Lighthouse｜2個月擁有6000用戶，SideProject這樣做｜Nic
