Skip to main content

[React] 效能優化

render優化

以我的理解,React 和 Vue有一個很大的差異在於,Vue是採取一種類似 Observer Pattern的設計模式,Vue的底層有一套監聽 state並響應到模板的機制,框架本身已經做好渲染的優化,比較節點差異的演算法計算後只會重新渲染有變更的節點。但是 React就不太一樣了,JSX模板是寫在 render function當中,每當 Component內任一的 propstate有改變的時候就會重新調用 render function,有較高的機會重新渲染不需重新渲染的節點;也就是說React需求花較大的功夫手動去做渲染的優化。

React需要特別注意減少 render次數和計算量

範例(每當state變更,render就一直被執行)

https://codepen.io/cdpqdnvr/pen/ZEeawKx?editors=1010

Class Component 和 Function Component實作上大致差異

  • Class Component 使用生命週期 shouldComponentUpdate判斷是否re-render、以及會做 state, props shallow compare(淺層比較)避免rerender的PureComponent

  • Function Component 使用 React.memoReact.memo是一個HOC)避免rerender,可以注入函式做 state, propsshallow compare(淺層比較)

延伸閱讀

React.memo @ React

*Vue轉React兩個月來總結的效能優化方法:作者從 Vue轉到 React開發的觀點來介紹

Vue和React的檢視更新機制對比:介紹兩個框架底層的 DOM更新機制

React , Vue render 效能優化篇:簡單介紹 React.memo的效能優化方式

vue 和 react发展史、设计思想及维度