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