Skip to main content

[React] 效能優化

render優化​

以我的理解，React 和 Vue有一個很大的差異在於，Vue是採取一種類似 Observer Pattern的設計模式，Vue的底層有一套監聽 state並響應到模板的機制，框架本身已經做好渲染的優化，比較節點差異的演算法計算後只會重新渲染有變更的節點。但是 React就不太一樣了，JSX模板是寫在 render function當中，每當 Component內任一的 prop或 state有改變的時候就會重新調用 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.memo（React.memo是一個HOC）避免rerender，可以注入函式做 state, props的 shallow compare（淺層比較）

延伸閱讀​

React.memo @ React

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

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

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

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