React.memo 是 React 中使用的高階元件,透過防止功能元件不必要的重新渲染來最佳化效能。它的工作原理是記住元件的結果,並且僅在其 props 發生變化時重新渲染它。這對於在給定相同 props 的情況下呈現相同輸出的功能組件的效能最佳化非常有用。
import React from 'react'; const MyComponent = ({ count }) => { console.log('Component re-rendered'); return <div>Count: {count}</div>; }; 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 結構時,這可以進一步優化效能。
以上是理解 React.memo:優化功能元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!