React のパフォーマンス最適化のための React.memo を理解する

React.memo は、不必要な再レンダリングを防止することで React コンポーネントのパフォーマンスの最適化に役立つ高次コンポーネント (HOC) です。これは機能コンポーネントをメモ化するために使用されます。つまり、プロパティが変更されていない場合、React はコンポーネントの再レンダリングをスキップします。これは、再レンダリングにコストがかかる可能性がある大規模な React アプリケーションでのパフォーマンスの最適化に特に役立ちます。

React.memo の仕組み

React.memo は、コンポーネントのプロパティの浅い比較を実行することによって機能します。プロパティが前のレンダリングと同じである場合、React はコンポーネントのレンダリングをスキップし、代わりに前のレンダリングの結果を使用します。これにより、特に大きなリストや高価なコンポーネントをレンダリングする場合、再レンダリングの回数が大幅に減り、パフォーマンスが向上します。

構文

const MemoizedComponent = React.memo(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 でラップされています。名前プロップが変更された場合にのみ再レンダリングされます。
• App には、名前と数という 2 つの状態があります。 「Increment Count」ボタンをクリックしてもプロパティ名は変更されないため、カウント状態が更新されても ChildComponent は再レンダリングされません。
• [名前の変更] をクリックすると、名前プロップが変更され、ChildComponent が再レンダリングされます。

出力：

• 「カウントを増やす」ボタンをクリックすると、ChildComponent は再レンダリングされませんが、名前プロップが変更されると「子コンポーネントが再レンダリングされました」というログが記録されます。

React.memo とのカスタム比較

デフォルトでは、React.memo はプロパティの浅い比較を実行しますが、プロパティの比較方法をさらに制御する必要がある場合は、カスタム比較関数を提供できます。

カスタム比較関数は、コンポーネントを再レンダリングしない場合は 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>
  );
}

この例では、カスタム比較関数のおかげで、たとえ age プロパティが変更されたとしても、ChildComponent は name プロパティが変更された場合にのみ再レンダリングされます。

React.memo を使用する場合

• パフォーマンスの最適化: props を受け取り、頻繁に変更されない機能コンポーネントがある場合、React.memo は不必要なレンダリングを回避するのに役立ちます。
• リストのレンダリング: 少数の要素のみが変更される大きなリストの場合、React.memo は非常に役立ちます。たとえば、項目のリストをレンダリングする場合、各リスト項目コンポーネントをメモ化すると、変更されていない項目が再レンダリングされなくなります。
• 高価なコンポーネント: コンポーネントに高価なレンダリング ロジック (複雑な計算や重いデータのレンダリングなど) がある場合、React.memo を使用すると、不必要な再計算が回避され、全体的なパフォーマンスが向上します。

React.memo を使用しない場合

• 小さなコンポーネント: プロパティがほとんどない小さなコンポーネントの場合、React.memo を使用すると、パフォーマンスが大幅に向上することなくオーバーヘッドが追加される可能性があります。
• プロップを頻繁に変更する: コンポーネントが頻繁に変更されるプロップを受け取る場合、コンポーネントはとにかく再レンダリングされるため、React.memo にはあまりメリットがない可能性があります。
• 複雑な比較ロジック: カスタム比較ロジックは、コンポーネントを通常どおりに再レンダリングできるようにするよりもコストが高くなる可能性があります。必要な場合にのみ使用してください。

結論

React.memo は、機能コンポーネントの不必要な再レンダリングを防ぐための React のシンプルかつ強力な最適化ツールです。コンポーネントをメモ化し、浅いプロップ比較 (またはカスタム比較関数) を使用することにより、React は、プロップが変更されていないときにコンポーネントのレンダリングをスキップでき、特に大規模または複雑なアプリケーションでのパフォーマンスの向上につながります。

以上がReact のパフォーマンス最適化のための React.memo を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。