React 增進效能,避免重複渲染 Rerender


Posted by 半夏 on 2021-08-27

渲染機制 Reconciliation

首先先簡單了解 React 的渲染機制 Reconciliation

認識 Rerender

component state 改變,再呼叫一次 function 的方式就叫 Rerender
component state 改變,V-DOM 找出 DOM diff 這也叫 Render

增進效能,避免重複渲染 Rerender

  • Memo 與 useCallback 常搭配使用
    Memo 是 component 用的,會檢查 props 有沒有改變,避免重複渲染
    因為 React 的機制會從父元件全部重新渲染,但是子元件沒有改變的情況下,會造成效能上不必要的浪費,這時候 Memo 就派上用場了。

  • useCallback 可以把一個 function 記起來,依據 dependency function 內的東西做變動,如果 denpendency function 內的東西沒有改變的話,就算重複 render 一次二次都不會改變。

  • useMemo 是給資料用的,在計算量大的時候使用


#React #rerender #virtual dom







Related Posts

JavaScript 中的同步與非同步 & event loop

JavaScript 中的同步與非同步 & event loop

[筆記] JavaScript: Understanding the Weird Parts - Build your own lib/framework

[筆記] JavaScript: Understanding the Weird Parts - Build your own lib/framework

電腦科學概論:演算法概要

電腦科學概論:演算法概要


Comments