React.memo 是 React 中使用的高階元件,透過防止功能元件不必要的重新渲染來優化效能。它的工作原理是記住元件的結果,並且僅在其 props 發生變化時重新渲染它。這對於在給定相同 props 的情況下呈現相同輸出的功能組件的效能最佳化很有用。
import React from 'react'; const MyComponent = ({ count }) => { console.log('Component re-rendered'); returnCount: {count}; }; export default React.memo(MyComponent);
在此範例中,MyComponent 僅在 count 屬性變更時才會重新渲染。如果父元件重新渲染但 count 屬性保持不變,MyComponent 將不會重新渲染,從而減少不必要的運算。
預設情況下,React.memo 執行 props 的淺層比較,但如果需要,您也可以提供自訂比較函數以進行更深入的檢查:
const MyComponent = React.memo((props) => { /* component code */ }, (prevProps, nextProps) => { // return true if props are equal, false otherwise return prevProps.someValue === nextProps.someValue; });
當您擁有更複雜的 prop 結構時,這可以進一步優化效能。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3