優(yōu)化重新渲染性能的常見(jiàn)方法是跳過(guò)不必要的工作。 例如,可以告訴 React 重用緩存的計(jì)算,或者如果數(shù)據(jù)自上次渲染以來(lái)沒(méi)有更改,則跳過(guò)重新渲染。
要跳過(guò)計(jì)算和不必要的重新渲染,請(qǐng)使用以下 Hooks 之一:
-
useMemo
緩存計(jì)算結(jié)果。 -
useCallback
緩存函數(shù)定義,再傳遞給優(yōu)化組件。
要優(yōu)先考慮渲染,請(qǐng)使用以下 Hooks 之一: -
useTransition
將狀態(tài)轉(zhuǎn)換標(biāo)記為非阻塞并允許其他更新中斷它。 -
useDeferredValue
可以推遲更新 UI 的非關(guān)鍵部分,并讓其他部分先更新。