VUE3.0 をすぐに始める方法:
この機能は、コード分割をサポートするSuspenseコンポーネントをリリースしたバージョン 16.6 で最初に登場しました。データ抽出はバージョン 16.9 でサポートされるようになりました。興味のある学生は、 Reactのchangelogに移動できます。
以前に紹介しましたが、概念を確認して使用するための例のみを使用します。
// このコンポーネントは動的にロードされます const OtherComponent = React.lazy(() => import('./OtherComponent'));
関数 MyComponent() {
戻る （
<React.Suspense フォールバック={<スピナー />}>
<div>
<その他のコンポーネント />
</div>
</反応.サスペンス>
);
OtherComponentコンポーネントにまだレンダリング条件がない場合、 fallbackによって渡されたコンポーネントがプレハブ レンダリングに使用されます
。
ここでのレンダリング条件の欠如の具体的な兆候としては、データ取得時間が長い、コンポーネント構造が複雑であるなどがありますが、これらがアプリケーションの最初の画面レンダリングや初期化に影響を与えることは望ましくSuspenseません。で紹介されているので詳細は割愛します。
文字どおり簡単に理解できます。つまり、コード内に複数のSuspenseがある場合、その表示順序と表示方法をどのように制御するかということです。したがって、 React SuspenseListコンポーネントを正式に提供します。
<SuspenseList replaceOrder="forwards">
<サスペンスフォールバック={'読み込み中...'}>
<プロフィール写真 id={1} />
</サスペンス>
<サスペンスフォールバック={'読み込み中...'}>
<プロフィール写真 id={2} />
</サスペンス>
<サスペンスフォールバック={'読み込み中...'}>
<プロフィール写真 id={3} />
</サスペンス>
...
</SuspenseList>まず、 SuspenseListの 2 つのPropsを紹介します。revealOrder
revealOrder sub Suspenseの読み込み順序を表します。オプションの値は、 forwards backwards together
forwards同じレベルから表示されます。
の速度に関係なく、最初に後方に表示することは、準備ができたらすべてのサスペンスを最後に表示する方法を指定tail
の
backwards
together表示することを意味します。を
リストSuspenseList
collapsed表示し、次のフォールバックの非表示アンhiddenプロジェクトには情報が表示されません
SuspenseList
SuspenseListのサブレベルのSuspenseまたはSuspenseListでのみ機能します。 、孫ノードでは機能しません。
SuspenseList使用すると、 Suspense動作のグループの複合オーケストレーションを実行できます。デモのデモは比較的単純ですが、比較的大規模なプロジェクトでは、レイアウトにLayout使用することがよくあります。一般的なミドルエンドおよびバックエンド管理プラットフォームと C サイドのメイン ページを例に挙げます。
ミドルおよびバックエンド システムでは、トップ バー + サイドバー + メイン ページのレイアウト方法がよく使用されます。このレベルでは、現在の業界では主にqiankun.jsなどのマイクロ フロントエンド ルーチンが実践されています。著者のチームは独自のマイクロ フロントエンド実装システムのセットを調査しました。 C 側のページを使用している場合、ページ内でマルチブロック レンダリングの要件がある場合は、 SuspenseListおよびSuspense React バックエンドの機能と組み合わせて使用できます。 SSR をレンダリングして、より体系的な方法で独立したブロックのレンダリングを実現します。ロード順序と動作の影響。