React の再レンダリング: 最適なパフォーマンスのためのベスト プラクティス

React の効率的なレンダリング メカニズムは、その人気の主な理由の 1 つです。ただし、アプリケーションが複雑になるにつれて、コンポーネントの再レンダリングの管理がパフォーマンスを最適化するために重要になります。 React のレンダリング動作を最適化し、不必要な再レンダリングを回避するためのベスト プラクティスを見てみましょう。

1. 機能コンポーネントに React.memo() を使用する

React.memo() は、機能コンポーネントのレンダリングをメモ化する高次コンポーネントです。現在のプロップと以前のプロップの浅い比較を実行することで、不必要な再レンダリングを防ぎます。プロパティが変更されていない場合、React はコンポーネントのレンダリングをスキップし、最後にレンダリングされた結果を再利用します。

import React from 'react';

const MemoizedComponent = React.memo(function MyComponent(props) {
  // Component logic
});

2. クラスコンポーネントの PureComponent の実装

クラスコンポーネントを使用している場合は、Component の代わりに PureComponent を拡張することを検討してください。 PureComponent は、プロパティと状態の浅い比較を実行して、コンポーネントを更新する必要があるかどうかを判断します。これにより、プロパティと状態が変更されていない場合の不要な再レンダリングを回避できます。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Component logic
}

3. インライン関数定義を避ける

render メソッド内で関数を定義すると、不必要な再レンダリングが発生する可能性があります。代わりに、render メソッドの外側で関数を定義するか、簡潔なイベント ハンドラーのアロー関数を使用してください。

class MyComponent extends React.Component {
  handleClick = () => {
    // Handle click
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

4. useCallback フック を使用して関数をメモ化する

useCallback フックは関数をメモ化するために使用されます。これにより、レンダリングごとに関数が不必要に再作成されなくなり、これらの関数に依存する子コンポーネントが不必要に再レンダリングされる可能性があります。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // Handle click
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

5. 高コストの計算には useMemo フック を活用します

useMemo フックは、高価な計算をメモ化するために使用されます。これにより、レンダリングごとに値の不必要な再計算が防止され、特に複雑な計算のパフォーマンスが向上します。

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const filteredItems = useMemo(() => items.filter(item => item.visible), [items]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

6. リスト内でキーを正しく使用する

コンポーネントのリストをレンダリングするときは、常に一意のキー プロパティを指定してください。 React はキーを使用して、調整中に要素を効率的に識別します。キーが間違っているか欠落していると、パフォーマンスの問題や予期しない動作が発生する可能性があります。

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

7. 動的インポートを使用したコード分割の実装

コード分割を使用すると、アプリケーションのコードをより小さなチャンクに分割できます。動的インポート (import()) を使用すると、アプリケーションの一部をオンデマンドでロードできるため、初期バンドル サイズが削減され、ロード時間が短縮されます。

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

8. 大きなリストに対するウィンドウ処理の実装

仮想化とも呼ばれるウィンドウ化には、現在画面上に表示されている項目のみのレンダリングが含まれます。この手法は、最初のレンダリング時間を短縮し、スクロールのパフォーマンスを向上させるため、大きなリストを扱う場合に特に役立ちます。

react-virtualized や React-window などのライブラリは、React アプリケーションのウィンドウ処理の効率的な実装を提供します。

9. 画像の 遅延読み込みの実装

画像の遅延読み込みにより、アプリケーションの初期読み込み時間を大幅に短縮できます。画像が必要になるまで (つまり、ビューポートに表示される直前まで) 画像の読み込みを遅らせることで、初期バンドル サイズを削減し、知覚されるパフォーマンスを向上させることができます。

react-lazyload や react-lazy-load-image-component などのライブラリは、React アプリケーション用の使いやすい遅延読み込みソリューションを提供します。

10. 不変のデータ構造を使用する

不変のデータ構造は、詳細な等価性チェックの必要性を減らし、React のレンダリング パフォーマンスの最適化に役立ちます。不変データを使用する場合、React は詳細な比較を実行するのではなく、データの参照を比較することで、コンポーネントを再レンダリングする必要があるかどうかを迅速に判断できます。

Immutable.js や Immer などのライブラリは、React アプリケーションで不変データを操作するための不変データ構造とヘルパー関数を提供します。

結論

React のレンダリング パフォーマンスを最適化することは、スムーズで応答性の高いユーザー エクスペリエンスを提供するために重要です。これらのベスト プラクティスに従い、React の組み込み機能とフックを活用することで、ユーザーを満足させる高性能の React アプリケーションを作成できます。

アプリケーションのパフォーマンスを継続的にプロファイリングおよび測定して、ボトルネックや改善の余地がある領域を特定することを忘れないでください。 React DevTools やパフォーマンス監視ソリューションなど、React のツールとライブラリの豊富なエコシステムがこのプロセスに役立ちます。

React 開発 に関する専門家の支援が必要な場合は、ViitorCloud Technologies に問い合わせて、熟練した ReactJS 開発者を雇用してください。

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