React18 の SuspenseList の簡単な分析とその用途

この記事では、React18 の SuspenseList を理解し、SuspenseList の役割を紹介します。

サスペンスの過去と現在

この機能が React の歴史的バージョンに初めて登場したのはバージョン 16.6 でした。コード分​​割をサポートする Suspense コンポーネントをリリースしました。データ抽出はバージョン 16.9 でサポートされるようになりました。興味のある学生は、React の changelog に移動してください。 [関連する推奨事項: Redis ビデオ チュートリアル ]

Suspense の簡単な使用法

は前の記事で紹介されています。ここでは例のみを使用します。概念を確認してください。また、

// 这个组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

を使用する場合、OtherComponent コンポーネントにまだレンダリング条件がない場合、fallback で渡されたコンポーネントがプレハブ レンダリングに使用されます。ここでのレンダリング条件がないことの具体的な症状としては、データ取得時間が長い、コンポーネント構造が複雑であるなどが挙げられますが、これらがアプリケーションの最初の画面レンダリングや初期化に影響を与えることは望ましくありません。 #Suspense の記事で紹介されていますが、もう使用しません。繰り返します。

SuspenseList とは

リテラルの意味は簡単に理解できます。つまり、コード内に複数の

Suspense がある場合、どうすればよいですか。表示順序や表示方法を制御しますか?したがって、React は SuspenseList コンポーネントを正式に提供します。

<SuspenseList revealOrder="forwards">
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

まず、2 つだけを紹介しましょう。

SuspenseListProps

revealOrder は、サブ サスペンスのロード順序を表します。 、オプションの値は forwards、backwards、together

• forwards は同じレベルを表し、前から後ろに表示されます。リクエスト速度に関係なく、前が最初に表示されます。

• backwards は forwards の逆です

• together は、すべてのサスペンスが 1 つずつ表示されるのではなく、準備ができたら同時に表示されることを意味します。 SuspenseList の表示方法を指定します

のアンロードされた項目の動作 デフォルトでは、SuspenseList はリスト内のすべてのフォールバックを表示します

• #collapsed リスト内の次のフォールバックのみを表示

• hidden

  アンロードされた項目については情報が表示されませんps:

  SuspenseList
は、直下のサブレベルの

Suspense

または SuspenseList でのみ機能し、孫ノードでは機能しません。

SuspenseListSuspenseList の役割により、

Suspense

の動作グループに対して複合オーケストレーションを実行できるようになります。デモ のデモは比較的単純ですが、大規模なプロジェクトの場合は、レイアウトに Layout を使用することがよくあります。一般的なミドルエンドおよびバックエンド管理プラットフォームと C サイドのメイン ページを例に挙げます。

#ミドルエンド システムやバックエンド システムでは、トップ バーとサイド バーのメイン ページをレイアウトに使用することがよくあります。このレベル、現在業界では、独自のマイクロ フロントエンド実装システムも検討している著者のチームを含め、qiankun.js

などのほとんどのマイクロ フロントエンド プラクティスが実装されています。 C サイド ページを使用している場合、マイクロ フロントエンド メソッドを使用するのは適切ではない可能性があります。ページ内でマルチブロック レンダリングの要件がある場合は、

SuspenseList と

Suspense を使用してください。

SSR をレンダリングするための React バックエンド機能と組み合わせると、より体系的な方法で独立したブロックの読み込み順序と動作の効果を実現できます。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上がReact18 の SuspenseList の簡単な分析とその用途の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。