React のパフォーマンス最適化テクニック: メモ化、遅延読み込みなど

最新の Web アプリケーションを構築する場合、パフォーマンスが鍵となります。ユーザーは高速で応答性の高いアプリを期待しているため、わずかな遅延でもフラストレーションを引き起こす可能性があります。 React は強力ですが、特にアプリケーションのサイズと複雑さが増大するにつれて、パフォーマンスのボトルネックに悩まされることがあります。幸いなことに、メモ化、遅延読み込みなど、パフォーマンスを最適化する手法がいくつかあります。

このガイドでは、React アプリケーションのパフォーマンスを最適化する最も効果的な方法のいくつかを詳しく説明します。メモ化、遅延読み込み、ボトルネックの特定と修正に役立つ React Profiler などのツールの基本について説明します。始めましょう!

はじめに: 最新の React アプリでパフォーマンスが重要な理由

Web アプリを車に例えてください。外観がどれほど洗練されていても、パフォーマンスが良くなければ、ユーザー エクスペリエンスは損なわれます。 React アプリでは、この「パフォーマンス」とは、コンポーネントがレンダリングする速度と、データや状態が変化したときにコンポーネントが更新される効率を指します。

React アプリがスケールするにつれて、コンポーネントを不必要に再レンダリングしたり、重いバンドルを一度にロードしたりすると、パフォーマンスが低下する可能性があります。そのため、スムーズでパフォーマンスの高いアプリケーションを構築するには、React パフォーマンスの最適化 テクニックを学ぶことが重要です。

React でのメモ化

React.memo と useMemo を効果的に使用する方法

メモ化とは、単に関数呼び出しの結果をキャッシュして、毎回再計算する必要がないことを意味する派手な言葉です。 React では、メモ化により、以前のレンダリングの結果を記憶し、何も変更されていない場合はそのキャッシュされた結果を使用することで、不必要な再レンダリングを防ぐことができます。

React.memo

React.memo から始めましょう。この高次コンポーネントは、プロパティが変更されていない場合にコンポーネントが再レンダリングされるのを防ぎます。

例：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

この例では、名前 prop が変更された場合にのみ、MyComponent が再レンダリングされます。同じ名前の値を渡すと、React はレンダリングをスキップし、パフォーマンスが向上します。

使用メモ

次は useMemo です。このフックは、機能コンポーネント内の高価な計算や値をメモ化するために使用されます。

例：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

ここでは、アイテムの配列が変更された場合にのみ計算が再実行され、レンダリングのたびに同じ結果が再計算されるのを避けることで時間を節約します。

コンポーネントの遅延読み込み

React.lazy による読み込み時間の改善

遅延読み込みは、すべてを事前に読み込むのではなく、必要なときだけコンポーネントを読み込む手法です。これにより、アプリケーションの初期ロード時間が短縮され、より速く感じられるようになります。

React には、オンデマンドでコンポーネントをロードできる React.lazy() という組み込み関数が用意されています。

例：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

この例では、MyComponent は実際に必要な場合にのみロードされます。 Suspense コンポーネントは、コンポーネントのフェッチ中にフォールバック UI (読み込みスピナーなど) を提供し、ユーザー エクスペリエンスをよりスムーズにします。

パフォーマンス監視のための React Profiler

ボトルネックを特定する方法

測定できないものを最適化するのは困難です。そこで React Profiler の出番です。React Profiler を使用すると、コンポーネントのパフォーマンスを追跡し、遅いレンダリングを特定し、再レンダリングの「コスト」を測定できます。

React Profiler を使用するには、 でコンポーネント ツリーをラップするだけです。パフォーマンス データを収集するコールバック関数を提供します。

例：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

プロファイラーを使用すると、各コンポーネントのレンダリングにかかる​​時間を追跡し、不必要な再レンダリングなど、パフォーマンスを改善できる領域を見つけることができます。

その他の最適化戦略

コード分​​割、イベント処理の最適化など

メモ化と遅延読み込み以外にも、React アプリのパフォーマンスを向上させるテクニックがいくつかあります。

1. コード分割: Webpack のコード分割機能を使用して、アプリを小さなチャンクに分割し、オンデマンドでロードできるようにします。これにより、初期バンドル サイズが小さくなります。

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

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

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

1. イベント処理の最適化: useCallback フックを使用してイベント ハンドラーをメモ化し、レンダリングのたびにイベント ハンドラーが再作成されるのを防ぎます。

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

1. デバウンスとスロットル: デバウンスまたはスロットルすることで、スクロールやサイズ変更などのイベント リスナーを最適化し、更新の頻度を制限します。

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

結論: これらの技術を使用して高性能の React アプリケーションを構築する

高速かつ効率的な React アプリケーションを構築するには、さまざまなテクニックを組み合わせる必要があります。 React.memo と useMemo で memoization を使用すると、不必要な再レンダリングを防ぐことができます。 React.lazy を使用した 遅延読み込み コンポーネントを使用すると、必要なときにのみコンポーネントをフェッチすることで読み込み時間を短縮できます。 React Profiler は、パフォーマンスのボトルネックを特定し、最適化するのに役立ちます。

コード分割やイベントの最適化などの戦略と組み合わせることで、React アプリのサイズと複雑さが増大しても、スムーズで応答性の高いユーザー エクスペリエンスを確実に提供できます。

---

React アプリのパフォーマンスを次のレベルに引き上げる準備はできていますか? プロジェクトでこれらの最適化テクニックを試して、アプリの速度が向上するのを確認してください!

---

この記事が気に入っていただけた場合は、私の仕事をサポートすることを検討してください:

• コーヒーを買ってきてください
• メンターシップやキャリアに関するアドバイスの電話を予約する
• Twitter でフォローしてください
• LinkedIn でつながる

以上がReact のパフォーマンス最適化テクニック: メモ化、遅延読み込みなどの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。