React で Suspense を使用して非同期レンダリングを改善する方法

React のサスペンス

React Suspense は、コンポーネントまたはデータの読み込み中にフォールバック UI を表示することで、開発者が非同期レンダリングを適切に処理できるようにする強力な機能です。 React Query、Relay、カスタム実装などの React.lazy、Concurrent Rendering、Data Fetching ソリューションと連携して動作します。

---

サスペンスの仕組み

1. プレースホルダー フォールバック: 非同期操作を待機する必要があるコンポーネントをサスペンスが包み込みます。待機中、フォールバック UI (読み込みスピナーなど) が表示されます。
2. 自動レンダリング: 非同期操作が完了すると、実際のコンポーネントまたはデータがレンダリングされます。

---

基本的な構文

import React, { Suspense } from "react";

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

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

export default App;

• React.Suspense: 遅延ロードされたコンポーネントをラップします。
• フォールバック: コンポーネントのロードを待機している間に表示する UI を指定します。

---

サスペンスの使用例

1. コンポーネントの遅延読み込み: React.lazy を使用してコンポーネントを動的に読み込みます。
2. データの取得: Relay や​​ React Query などのライブラリと組み合わせた場合の非同期データの読み込みを管理します。
3. 同時レンダリング: 同時 React モードでのレンダリングを最適化します。

---

例 1: サスペンスを伴う遅延読み込み

サスペンスなし

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent は同期的にロードされるため、初期ロード時間が長くなります。

サスペンスあり

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

現在、HeavyComponent は必要な場合にのみロードされ、ロード プロセス中にフォールバックが表示されます。

---

例 2: 複数の遅延コンポーネントを含むサスペンス

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

フォールバック UI は、両方のコンポーネントの読み込みが完了するまで表示されます。

---

例 3: データ取得の一時停止 (実験的)

React Suspense は、Relay や​​ React Query などのライブラリと統合すると、非同期データのフェッチにも役立ちます。

React クエリを使用した例

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

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

export default App;

---

サスペンスによるエラー処理

コンポーネントまたはデータのロード中にエラーが発生した場合、React Suspense には組み込みのエラー処理が提供されません。この目的には、エラー境界を使用します。

import React, { Suspense } from "react";

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

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

export default App;

---

サスペンスを使用するためのベスト プラクティス

1. 単純なフォールバック: パフォーマンスのオーバーヘッドを避けるために軽量のプレースホルダーを使用します。
2. エラー境界と組み合わせる: コンポーネントまたはデータの読み込みエラーを適切に処理します。
3. インテリジェントにチャンク: パフォーマンスを向上させるために、アプリケーションを論理チャンクに分割します。

---

サスペンスの利点

1. ユーザー エクスペリエンスの向上: フォールバック UI を表示することで、アプリの応答性を維持します。
2. バンドル サイズの縮小: バンドル サイズを最適化するためのコード分割とうまく機能します。
3. 簡素化された非同期処理: より宣言的な方法で読み込み状態を管理します。

---

高度な使用: ネストされたサスペンス

複数のサスペンス コンポーネントをネストして、フォールバック状態を細かく制御できます。

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

サスペンスの限界

1. データ取得サポート: データを直接取得するための実験的な機能。
2. エラー処理なし: エラー境界などの追加のエラー処理メカニズムが必要です。
3. ブラウザの互換性: ES6 モジュールと Promise をサポートする最新のブラウザが必要です。

---

結論

React Suspense は、React アプリケーションでの非同期レンダリングを管理するための多用途ツールです。これにより、読み込み状態の処理が簡素化され、遅延読み込みによるパフォーマンスが向上し、コード分割やエラー処理技術と組み合わせることで、よりスムーズなユーザー エクスペリエンスが実現されます。

---

以上がReact で Suspense を使用して非同期レンダリングを改善する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。