Reactガイドを読んでいくその308

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

サスペンスを使ったデータ取得（実験的機能）

アプローチ 3: Render-as-You-Fetch（サスペンスを使用）

これまではsetStateを呼び出す前にデータの取得が必要だった。
サスペンスをつかうと、データ取得の開始後、取得完了を待たずにレンダーを開始することができる。

codesandbox.io サンプルを見ると確かに、完了を待たずに描画を開始している。

以下のような順番で処理が行われているらしい。

1.レンダー時点で fetchProfileData() を使ってリクエストがスタートしています。この関数は Promise ではなく特殊な “リソース (resource)” を返します。現実的な例では、Relay のようなデータ取得ライブラリのサスペンス連携機能を使うことになります。
2.React は <ProfilePage> のレンダーを試みます。子要素として <ProfileDetails> と <ProfileTimeline> が返ります。
3.React は <ProfileDetails> のレンダーを試みます。内部で resource.user.read() が呼び出されます。データはまだ何も取得されていないので、このコンポーネントは “サスペンド (suspend)” します。React はこのコンポーネントを飛ばして、ツリーの他のコンポーネントのレンダーを試みます。
4.React は <ProfileTimeline> のレンダーを試みます。内部で resource.posts.read() が呼び出されます。今回も、まだデータがありませんので、このコンポーネントは “サスペンド” します。React はこのコンポーネントも飛ばして、ツリーの他のコンポーネントのレンダーを試みます。
5.レンダーを試みるべき他のコンポーネントは残っていません。<ProfileDetails> がサスペンドしたので、React はツリーの直上にある <Suspense> フォールバックを表示します：<h1>Loading profile...</h1>。ひとまずこれで終わりです。

resource オブジェクトがいずれロードされるであろうデータを表す。
readを呼び出すとデータかコンポーネントがサスペンドされる。

今日はここまで。