了解 React.memo 以實現 React 效能優化-js教程-PHP中文網

了解 React.memo 以實現 React 效能優化

Linda Hamilton

發布： 2024-12-24 20:21:14

原創

185 人瀏覽過

Understanding React.memo for Performance Optimization in React

React.memo 是一個高階元件 (HOC)，它透過防止不必要的重新渲染來幫助最佳化 React 元件的效能。它用於記憶功能元件，這意味著如果元件的 props 沒有改變，React 將跳過重新渲染元件。這對於大型 React 應用程式的效能優化特別有用，因為重新渲染的成本可能很高。

React.memo 的工作原理

React.memo 的工作原理是對元件的 props 進行淺層比較。如果 props 與先前的渲染相同，React 將跳過渲染元件並使用先前渲染的結果。這可以顯著減少重新渲染的次數並提高效能，特別是在渲染大型清單或昂貴的元件時。

句法

const MemoizedComponent = React.memo(Component);

登入後複製

地點：

Component 是你想要記住的功能元件。
MemoizedComponent 是組件的新記憶版本。

範例：React.memo 的基本用法

讓我們來看一個如何使用 React.memo 的簡單範例：

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

登入後複製

解釋：

ChildComponent 包裝在 React.memo 中。它僅在 name 屬性變更時重新渲染。
App 有兩個狀態：名稱和計數。按一下「遞增計數」按鈕不會變更 name 屬性，因此當計數狀態更新時，ChildComponent 不會重新渲染。
如果按一下“更改名稱”，name 屬性會更改，導致 ChildComponent 重新渲染。

輸出：

當您按一下「遞增計數」按鈕時，ChildComponent 將不會重新渲染，但當 name 屬性變更時，它會記錄「子元件重新渲染」。

與 React.memo 的自訂比較

預設情況下，React.memo 對 props 執行淺層比較，但如果您需要更多控制 props 的比較方式，您可以提供自訂比較函數。

如果元件應該不重新渲染，則自訂比較函數應該傳回 true，如果應該重新渲染，則應該傳回 false。

範例：自訂比較函數

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

登入後複製

在此範例中，由於自訂比較功能，ChildComponent 僅在 name 屬性變更時才會重新渲染，即使 Age 屬性變更也是如此。