React のサスペンス

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

---

サスペンスの仕組み

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

---

基本的な構(gòu)文

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: 遅延ロードされたコンポーネントをラップします。
• フォールバック: コンポーネントのロードを待機(jī)している間に表示する UI を指定します。

---

サスペンスの使用例

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

---

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

サスペンスなし

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

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

export default App;

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

サスペンスあり

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;

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

---

例 2: 複數(shù)の遅延コンポーネントを含むサスペンス

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: データ取得の一時(shí)停止 (実験的)

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

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;

---

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

コンポーネントまたはデータのロード中にエラーが発生した場(chǎng)合、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. インテリジェントにチャンク: パフォーマンスを向上させるために、アプリケーションを論理チャンクに分割します。

---

サスペンスの利點(diǎn)

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

---

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

複數(shù)のサスペンス コンポーネントをネストして、フォールバック狀態(tài)を細(xì)かく制御できます。

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

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

export default App;

---

サスペンスの限界

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

---

結(jié)論

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

---

以上がReact で Suspense を使用して非同期レンダリングを改善する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。