React アプリケーションのパフォーマンスの最適化

パフォーマンスは、特に UI が非常に動的である React アプリケーションにおいて、Web 開発の重要な側面です。このブログ投稿では、React アプリを最適化してスムーズに実行し、迅速に読み込み、より良いユーザー エクスペリエンスを提供するのに役立ついくつかの戦略とベスト プラクティスを共有します。

---

1. React.memo() によるメモ化

React は、プロパティが変更されていない場合でも、デフォルトでコンポーネントを再レンダリングします。これにより、不必要な再レンダリングが発生し、パフォーマンスに影響を与える可能性があります。これを防ぐには、React.memo() を使用して機能コンポーネントをメモ化します。これは、プロパティが変更されていない場合、コンポーネントのレンダリングをスキップするように React に指示します。

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. useCallback フックと useMemo フックを使用する

特定の依存関係が変更された場合にのみ再計算する必要がある関数と計算値の場合、useCallback フックと useMemo フックが優れたツールです。

• useMemo は高価な計算をメモ化するために使用されます

• useCallback はコールバック関数をメモ化するために使用されます
  

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependency]);

3. 遅延読み込み コンポーネント

大規模なアプリの場合、すべてを一度にロードするとパフォーマンスが低下する可能性があります。 React は、React.lazy() と Suspense を使用した遅延読み込みコンポーネントの組み込みサポートを提供します。このアプローチにより、必要な場合にのみコンポーネントをロードできるため、初期ロード時間を短縮できます。

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyApp() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

4. shouldComponentUpdate と PureComponent を使用して再レンダリングを最適化します。

クラスベースのコンポーネントでは、 shouldComponentUpdate を使用すると、コンポーネントをいつ更新するかを制御できるため、不必要な再レンダリングを防ぐことができます。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Return true if the component should update
    return nextProps.someValue !== this.props.someValue;
  }
}

あるいは、React.PureComponent を使用して、プロパティと状態の浅い比較を自動的に実行し、変更がない場合の再レンダリングを防ぐこともできます。

class MyPureComponent extends React.PureComponent {
  // This automatically prevents re-renders on shallow prop/state equality
}

5. ウィンドウ/レイジー レンダリング

アプリで大きなリストやテーブルをレンダリングする必要がある場合、それらをすべて一度にレンダリングするとパフォーマンスに影響を与える可能性があります。 react-window や react-virtualized などのライブラリは、リストの表示部分のみをレンダリングすることでパフォーマンスを大幅に向上させることができます。

import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);

6. コード分割

コード分割を使用すると、コードを小さなバンドルに分割し、オンデマンドで読み込むことができます。これにより、初期ロード時間を大幅に短縮できます。 webpack や React の動的インポートの組み込みサポートなどのツールを使用すると、コード分割を簡単に実装できます。

import('./MyComponent').then((module) => {
  const MyComponent = module.default;
  // Do something with MyComponent
});

7. 静的アセットに CDN を使用する

画像、フォント、スタイルシートなどの静的アセットをコンテンツ配信ネットワーク (CDN) から提供すると、サーバーの負荷が軽減され、これらのアセットのユーザーへの配信が高速化されます。

8. JSX では匿名関数を避ける

コンポーネントが再レンダリングされるたびに、匿名関数の新しいインスタンスが作成され、潜在的なパフォーマンスの問題が発生します。代わりに、JSX の外部で関数を定義するか、useCallback を使用して関数をメモ化します。

// Avoid this
<button onclick="{()"> handleClick()}>Click Me</button>

// Do this instead
const handleClick = useCallback(() => {
  // Handle click
}, []);
<button onclick="{handleClick}">Click Me</button>

9. データのオーバーフェッチを避ける

不要なデータを取得すると、特に遅いネットワークではアプリの速度が低下する可能性があります。ページネーション、無限スクロール、または条件付きデータの取得を使用して、サーバーから取得するデータの量を制限します。

10. 重要な小道具との調整を最小限に抑える

React でリストをレンダリングする場合、一意のキー props を提供すると、どの項目が変更、追加、削除されたかを React が識別するのに役立ち、調整作業が最小限に抑えられ、パフォーマンスが向上します。

{items.map(item => (
  <div key="{item.id}">{item.name}</div>
))}

---

結論

React アプリケーションのパフォーマンスを最適化するには、React がコンポーネントをレンダリングする方法を理解し、不必要な再レンダリングを管理する必要があります。 React.memo()、useCallback、useMemo、遅延読み込み、コード分割などのツールを活用することで、React アプリのパフォーマンスを大幅に向上させることができます。

目標は、時期尚早にすべてを最適化することではなく、アプリが複雑になるにつれてパフォーマンスを考慮することであることに注意してください。他にも React のパフォーマンス最適化に関するヒントがある場合は、コメント欄でお気軽に共有してください!

著者:
ラフィ・フェルドス - ポートフォリオ

以上がReact アプリケーションのパフォーマンスの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。