React での再レンダリングの最適化: ベスト プラクティス

React、特に大規模なアプリにおけるパフォーマンスのボトルネックの主な原因の 1 つは再レンダリングです。 React の仮想 DOM メカニズムは DOM を効果的に更新しますが、不必要な再レンダリングによって依然としてパフォーマンスの問題が発生する可能性があります。再レンダリングを必要とするコンポーネントのみが再レンダリングされるように最適化できるため、アプリケーションのパフォーマンスと応答性が向上します。

この投稿では、React アプリでの無意味な再レンダリングを削減するためのベスト プラクティスと、React コンポーネントの効率を最大化するのに役立ついくつかの役立つヒントや方法について説明します。

React での再レンダリングを理解する

React のレンダリング プロセスは、コンポーネント ツリーを中心に展開します。コンポーネントの状態やプロパティが変更されると、React はそのコンポーネントとその子コンポーネントを再レンダリングします。ただし、適切に管理しないと、不必要な再レンダリングが発生し、実際の変更がなかったコンポーネントも再レンダリングされ、リソースが無駄に消費される可能性があります。

不必要な再レンダリングの一般的な原因

コンポーネントの出力に影響を与えないプロパティまたは状態の変更。
親コンポーネントが再レンダリングされると、プロパティが変更されていない場合でも、子コンポーネントが再レンダリングされます。
レンダリングのたびに再作成される匿名関数またはオブジェクト参照。

React での再レンダリングを最適化するための重要なテクニック

1.機能コンポーネントには React.memo を使用します

React.memo は、結果をメモ化することで機能コンポーネントでの不必要な再レンダリングを防ぐのに役立つ高次コンポーネント (HOC) です。コンポーネントの props が変更されていない場合、React.memo は再レンダリングを防ぎます。

const MyComponent = React.memo(({ data }) => {
  console.log('Component rendered');
  return <div>{data}</div>;
});

この最適化により、MyComponent はデータプロパティが変更された場合にのみ再レンダリングされ、パフォーマンスが向上します。

2. useCallback と useMemo

を使用して再レンダリングを最適化する

?? useCallback: レンダリングのたびに関数が再作成されないように関数をメモ化するために使用されます。これは、特定の値に依存する子コンポーネントに関数を渡すときに便利です。

const handleClick = useCallback(() => {
  // handle button click
}, []);

?? useMemo: レンダリングのたびに再計算されるのを防ぐために、高価な計算や派生データをメモ化するために使用されます。

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

これらのフックにより、依存関係が変更された場合にのみ関数または値が再計算され、不必要なレンダリングが削減されます。

3. JSX でのインライン関数とオブジェクトの作成を避ける

JSX 内で作成されたインライン関数またはオブジェクトは、再レンダリングの一般的な原因です。コンポーネントがレンダリングされるたびに新しい関数またはオブジェクトの参照が作成されるため、子コンポーネントで不要な再レンダリングがトリガーされます。

// Avoid this pattern
<MyChildComponent onClick={() => doSomething()} />

// Instead, define the function outside the JSX
const handleClick = () => doSomething();
<MyChildComponent onClick={handleClick} />

JSX でのインライン関数またはオブジェクトの作成を回避することで、子コンポーネントが不必要に再レンダリングされるのを防ぐことができます。

4.大きなコンポーネントを小さなコンポーネントに分割

不必要な再レンダリングを回避するもう 1 つの手法は、大きなコンポーネントを、より焦点を絞った小さなコンポーネントに分割することです。これにより、React はより詳細な更新を実行できるようになり、コンポーネントの一部のみが変更された場合にコンポーネント全体が再レンダリングされるのを防ぎます。

たとえば、フォームとリストをレンダリングするコンポーネントがある場合、それらを 2 つの別々のコンポーネントに分割できます。こうすることで、フォームを更新してもリストの再レンダリングがトリガーされることはなく、その逆も同様です。

function ParentComponent() {
  return (
    <>
      <FormComponent />
      <ListComponent />
    </>
  );
}

5.キープロップを正しく使用してください

リストをレンダリングするとき、React はキー prop を使用して要素を識別します。キー プロパティの使用法が間違っていると、React がコンポーネントを誤って更新または再レンダリングする可能性があります。

リスト内の各要素には必ず一意で安定したキーを使用してください。

const items = ['apple', 'banana', 'orange'];
items.map((item) => <li key={item}>{item}</li>);

項目の並べ替えや変更が可能な場合は、インデックスをキーとして使用しないでください。予期しない再レンダリングや不正確なレンダリングが発生する可能性があります。

6.クラスコンポーネント

で shouldComponentUpdate と PureComponent を使用する

クラス コンポーネントの場合、 shouldComponentUpdate は、props または state の変更に基づいてコンポーネントを再レンダリングするかどうかを制御できるライフサイクル メソッドです。

代わりに、props と state の浅い比較を行う shouldComponentUpdate を自動的に実装する PureComponent を使用することもできます。

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

PureComponent は shouldComponentUpdate のより簡単な代替手段であり、以前と現在の props と state を比較することで不必要な再レンダリングを回避します。

7.コンテキスト API の使用を最適化する

React の Context API を使用する場合は、コンテキスト値が変更されたときにすべてのコンシューマーが再レンダリングすると、不必要な再レンダリングが発生する可能性があるため、使いすぎには注意してください。これを回避するには:

Break down context providers into smaller ones, so only the necessary part of the state triggers updates.
Memoize values passed to the context provider using useMemo to avoid unnecessary re-renders.

const value = useMemo(() => ({ state, updateState }), [state]);

return (
  <MyContext.Provider value={value}>
    {children}
  </MyContext.Provider>
);

8. Lazy Load Components

For performance improvements, especially in large applications, you can lazy load components that are not immediately needed. This can reduce the initial rendering time and the load on the main thread.

React’s React.lazy and Suspense can help in lazy-loading components:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

By lazy-loading components, you delay their rendering until they are actually needed, which reduces unnecessary renders and improves the user experience.

Conclusion

Maintaining performance in React apps requires optimizing re-rendering, especially as the application grows. Avoid needless re-renders by employing strategies like using React.memo, useCallback, useMemo, and breaking up big components into smaller ones. By putting these tactics to good use, you can make sure that your React application stays light-weight, responsive, and simple to update.

以上がReact での再レンダリングの最適化: ベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。