React のパフォーマンス最適化テクニック: メモ化、遅延読み込みなど-jsチュートリアル-php.cn

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

最新の 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 アプリのパフォーマンスを向上させるテクニックがいくつかあります。

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

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

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

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

ログイン後にコピー

イベント処理の最適化: 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>
  );
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

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