実際にサスペンスを反応します

この記事では、作業メカニズム、React Suspenseの機能性、および実際のWebアプリケーションに統合する方法について説明します。ルーティングとデータの読み込みをReactのサスペンスと統合する方法を学びます。ルーティングには、ネイティブJavaScriptを使用して、データ処理に独自のMicro-GraphQL-Reactlact GraphQLライブラリを使用します。

Reactルーターの使用を検討している場合、それは見栄えが良いですが、私はそれを使用する機会がありませんでした。私自身の個人的なプロジェクトには、私が常に手動で行ってきた十分なルーティングソリューションがあります。さらに、ネイティブJavaScriptを使用すると、サスペンスがどのように機能するかをよりよく理解できます。

短い背景

サスペンス自体について話しましょう。 Kingsley Silasは包括的な概要を説明しますが、最初に注意すべきことは、それがまだ実験的なAPIであるということです。これは、Reactのドキュメントがそう言っていることを意味します。これは、生産環境での仕事に使用しないでください。完全に完了するまでいつでも変更される可能性があるため、これを念頭に置いてください。

つまり、Suspenseのコアは、非同期依存関係（Lazy Loading Reactコンポーネント、GraphQLデータなど）の場合、一貫したUIを維持することにあります。サスペンスは、アプリケーションがこのコンテンツを管理するときにUIを簡単に維持できる低レベルのAPIを提供します。

しかし、この場合、「一貫した」とはどういう意味ですか？これは、部分的に完成したUIがレンダリングされないことを意味します。つまり、ページに3つのデータソースがあり、そのうちの1つが完了している場合、更新された状態フラグメントをレンダリングしたくないことと、その隣の他の2つの時代遅れの状態フラグメントの負荷インジケーターをレンダリングしたくないことを意味します。

私たちがやりたいのは、データがロードされていることをユーザーに示し、古いUIを表示し続けたり、データを待っていることを示す代替UIを表示したりすることです。サスペンスは両方をサポートしています。これについては後で詳しく説明します。

サスペンスの正確な関数

これは、見た目よりもはるかに簡単です。従来、Reactでは、ステータスを設定するとUIが更新されます。人生は簡単です。しかし、それはまた、上記のタイプの矛盾につながります。サスペンスは、コンポーネントが非同期データを待っているときにReactを通知できるようにする機能を追加します。これはハングと呼ばれます。これは、コンポーネントツリーのどこでも発生する可能性があり、必要に応じてツリーの準備ができるまで複数回発生する可能性があります。コンポーネントがハングすると、Reactは、すべての保留中の依存関係が満たされるまで、中断された状態の更新をレンダリングすることを拒否します。

では、コンポーネントが吊り下げられているとどうなりますか？反応は木を見上げて最初のものを見つけます<suspense></suspense>コンポーネントとそのフォールバックコンテンツをレンダリングします。多くの例を提供しますが、今のところ、以下を提供できることを知ってください。

<suspense fallback="{<Loading"></suspense> }>

……もし<suspense></suspense>ハングの子コンポーネントはすべてレンダリングされます<loading></loading>コンポーネント。

しかし、既に有効で一貫したUIを持っており、ユーザーが新しいデータをロードしてコンポーネントをハングさせるとどうなりますか？これにより、既存のUI全体が解き放たれ、フォールバックコンテンツが表示されます。これは依然として一貫していますが、ユーザーエクスペリエンスではありません。新しいデータがロードされたときに、古いUIが画面上に留まりたいと思います。

これをサポートするために、Reactは2番目のAPIであるuseTransitionを提供します。言い換えれば、既存のUIを画面上に保持しながら状態をメモリに設定できます。 Reactは文字通りメモリ内のコンポーネントツリーの2番目のコピーを保持し、そのツリーに状態を設定します。コンポーネントはハングする可能性がありますが、メモリにハングするだけなので、既存のUIは画面に表示され続けます。状態の変更が完了し、すべての保留が解決すると、記憶の状態の変化が画面にレンダリングされます。明らかに、プロセスでユーザーにフィードバックを提供したいので、 useTransition 、保留中のメモリを解決しながら、何らかのインライン「ロード」通知を表示するために使用できるpendingのブール値を提供します。

あなたがそれを考慮するとき、あなたは負荷が吊り下げられたときに既存のUIを無期限に表示したくないかもしれません。ユーザーが何かを実行しようとし、終了する前に長い時間が経過した場合、おそらく既存のUIが時代遅れで無効であると考える必要があります。この時点で、あなたは確かにあなたのコンポーネントツリーを吊るして表示したいかもしれません<suspense></suspense>コンテンツを巻き戻します。

これを達成するために、 useTransition timeoutMs値を取得します。これは、ぶら下がっている前にメモリ州の状態の変更を時間にわたって実行させることをいとわないことを意味します。

 const Component = props => {
  const [starttransition、ispending] = usetransition（{timeoutms：3000}）;
  // .....
};

ここで、 startTransitionは関数です。 「記憶の中で」状態の変更を実行したい場合は、 startTransitionを呼び出して、状態の変更を実行するLambdaの表現を渡すことができます。

 starttransition（（）=> {
  ディスパッチ（{type：load_data_or_something、value：42}）;
}）;

startTransitionどこでも電話をかけることができます。子どものコンポーネントなどに渡すことができます。呼び出すと、実行する状態の変更はメモリで発生します。保留中の保留が発生した場合、 isPendingが真実になり、これを使用して何らかのインライン負荷インジケーターを表示できます。

それでおしまい。これがSuspenseが行うことです。

この記事の残りの部分では、これらの機能を活用するためにいくつかの実際のコードを紹介します。

例：ナビゲーション

ナビゲーションをサスペンスに関連付けるために、Reactがこれを行うための原始的なものを提供することを喜んで知っています： React.lazy 。これは、Rembda式を受け入れる関数であり、それが約束を返し、反応成分に解決します。この関数呼び出しの結果は、怠zyなロードコンポーネントになります。複雑に聞こえますが、このように見えます：

 const settingsComponent = lazy（（）=> import（ "./ modules/settings/settings"））;

SettingsComponentは、レンダリングされた場合（以前ではない）、渡された関数を呼び出し、 import()を呼び出し、 ./modules/settings/settings /settingsにあるJavaScriptモジュールをロードするReactコンポーネントになります。

重要な部分は、 import()が進行中である間、 SettingsComponentをレンダリングするコンポーネントがハングすることです。すべてのコンポーネントが手元にあるように見えるので、それらをまとめて、サスペンスベースのナビゲーションを構築しましょう。

ナビゲーションアシスタントプログラム

しかし、最初に、コンテキストを提供するために、サスペンスコードがより理にかなっているように、このアプリケーションでナビゲーション状態がどのように管理されるかを簡単に紹介します。

ブックリストアプリケーションを使用します。これは自分の個人的なプロジェクトであり、主に最先端のWebテクノロジーを実験するために使用しています。それは私だけによって書かれていたので、それのいくつかが少し荒い（特にデザイン）になることを期待してください。

アプリは小さく、ユーザーはより深いナビゲーションなしで約8つの異なるモジュールを閲覧できます。モジュールが使用できる検索ステータスは、URLのクエリ文字列に保存されます。これを念頭に置いて、URLから現在のモジュール名と検索ステータスを抽出する方法があります。このコードは、NPMのquery-stringとhistoryパッケージを使用します。これは、このように見えます（認証など、簡単にするために詳細が削除されました）。

 「history/createbrowserhistory」からcreatehistoryをインポートします。
「クエリストリング」からクエリストリングをインポートします。
const history = createhistory（）;
export関数getCurrenturlState（）{
  場所= history.location;
  parsed = querystring.parse（location.search）;
  戻る {
    パス名：location.pathname、
    SearchState：解析
  };
}
エクスポート関数getCurrentModuleFromurl（）{
  場所= history.location;
  loter location.pathname.replace（/\ // g、 ""）.tolowercase（）;
}

アプリケーションの現在のモジュールとsearchState値を保持し、これらのメソッドを使用して必要に応じてURLと同期するappSettings Reducerがあります。

サスペンスベースのナビゲーションコンポーネント

いくつかのサスペンス作業から始めましょう。まず、モジュール用の怠zyなロードコンポーネントを作成しましょう。

 const activateComponent = lazy（（）=> import（ "./ modules/activate/activate"））;
const AuthenticateComponent = lazy（（）=> intorm（ "./ modules/authenticate/authenticate"））;
const booksComponent = lazy（（）=> interm（ "./ modules/books/books"））;
const homecomponent = lazy（（）=> import（ "./ modules/home/home"））;
const scancomponent = lazy（（）=> import（ "./ modules/scan/scan"））;
const subjectscomponent = lazy（（）=> import（ "./ modules/subjects/subjects"））;
const settingsComponent = lazy（（）=> import（ "./ modules/settings/settings"））;
const admincomponent = lazy（（）=> import（ "./ modules/admin/admin"））;

現在、現在のモジュールに基づいて正しいコンポーネントを選択する方法が必要です。 Reactルーターを使用すると、素敵なものがいくつかあります<route></route>コンポーネント。これを手動で行っているので、 switchステートメントは機能します。

 const getModuleComponent = moduleToload => {
  if（moduletoload == null）{
    nullを返します。
  }
  switch（moduletoload.tolowercase（））{
    ケース「アクティブ化」：
      ActivateComponentを返します。
    ケース「認証」：
      AuthenticAteComponentを返します。
    ケース「本」：
      BooksComponentを返します。
    ケース「ホーム」：
      帰還の帰国。
    ケース「スキャン」：
      scancomponentを返します。
    ケース「被験者」：
      subjectscomponentを返します。
    ケース「設定」：
      return settingsComponent;
    ケース「管理者」：
      返信者を返します。
  }

  帰還の帰国。
};

すべてをまとめてください

すべての退屈なセットアップが完了したら、アプリケーションルート全体がどのように見えるかを見てみましょう。ここには多くのコードがありますが、これらのラインの比較的少数がサスペンスに関連していることを約束し、それらすべてをカバーします。

 const app =（）=> {
  const [startTransitionNewModule、isNewModulePending] = usetransition（{
    TimeoutMS：3000
  }）;
  const [starttransitionModuleUpdate、moduleUpdatePending] = usetransition（{
    TimeoutMS：3000
  }）;
  ret appstatePacket = useappstate（）;
  [appstate、_、dispatch] = appstatePacket;
  component = getModuleComponent（appstate.module）;
  effect（（）=> {
    StartTransitionNewModule（（）=> {
      ディスパッチ（{type：url_sync}）;
    }）;
  }、[]）;
  effect（（）=> {
    history.listenを返す（location => {
      if（appstate.module！= getCurrentModuleFromurl（））{
        StartTransitionNewModule（（）=> {
          ディスパッチ（{type：url_sync}）;
        }）;
      } それ以外 {
        StartTransitionModuleUpdate（（）=> {
          ディスパッチ（{type：url_sync}）;
        }）;
      }
    }）;
  }、[appstate.module]）;
  戻る （
    <appcontext.provider value="{appStatePacket}">
      <moduleupdatecontext.provider value="{moduleUpdatePending}">
        <div>
          <mainnavigationbar></mainnavigationbar>
          {isnewmodulepending？<loading></loading> ：null}
          <suspense fallback="{<LongLoading"></suspense> }>
            <div style="{{" flex: overflowy:>
              {成分？<component updating="{moduleUpdatePending}"></component> ：null}
            </div>
          
        </div>
      </moduleupdatecontext.provider>
    </appcontext.provider>
  ）;
};

最初に、 useTransitionに2つの異なる呼び出しを行いました。 1つは新しいモジュールへのルーティングに使用し、もう1つは現在のモジュールの検索ステータスを更新するために使用します。なぜ違いがあるのですか？さて、モジュールの検索ステータスが更新されているときに、モジュールはインラインロードインジケーターを表示することをお勧めします。更新ステータスはmoduleUpdatePending変数によって保存されます。アクティブモジュールを必要に応じて使用できるように、コンテキストに配置することがわかります。

<div>
  <mainnavigationbar></mainnavigationbar>
  {isnewmodulepending？<loading></loading> ：null}
  <suspense fallback="{<LongLoading"></suspense> }>
    <div style="{{" flex: overflowy:>
      {成分？<component updating="{moduleUpdatePending}"></component> ：null}
    </div>
  
</div>

appStatePacket上記のアプリケーション状態還元剤の結果です。めったに変更されないさまざまなアプリケーション状態フラグメント（色のテーマ、オフライン状態、現在のモジュールなど）が含まれています。

 ret appstatePacket = useappstate（）;

後で、現在のモジュール名に基づいてアクティブコンポーネントを取得します。最初はこれはヌルになります。

 component = getModuleComponent（appstate.module）;

useEffect最初の呼び出しは、 appSettings ReducerがスタートアップのURLと同期していることを示します。

 effect（（）=> {
  StartTransitionNewModule（（）=> {
    ディスパッチ（{type：url_sync}）;
  }）;
}、[]）;

これは、Webアプリケーションがナビゲートする最初のモジュールであるため、新しいモジュールがロードされていることを示すためにstartTransitionNewModuleにラップします。還元剤の初期モジュール名を初期状態として設定することは魅力的かもしれませんが、これにより、 startTransitionNewModuleコールバックを呼び出すことができなくなります。つまり、サスペンス境界はタイムアウト後ではなく、すぐにフォールバックコンテンツをレンダリングします。

履歴サブスクリプションは、 useEffect次の呼び出しに設定されています。とにかく、URLが変更されたら、アプリケーション設定にURLと同期するように指示します。唯一の違いは、同じ呼び出しが包まれているstartTransitionです。

 effect（（）=> {
  history.listenを返す（location => {
    if（appstate.module！= getCurrentModuleFromurl（））{
      StartTransitionNewModule（（）=> {
        ディスパッチ（{type：url_sync}）;
      }）;
    } それ以外 {
      StartTransitionModuleUpdate（（）=> {
        ディスパッチ（{type：url_sync}）;
      }）;
    }
  }）;
}、[appstate.module]）;

新しいモジュールを閲覧している場合は、 startTransitionNewModuleを呼び出します。ロードされていないコンポーネントをロードしている場合、 React.lazyがハングし、アプリケーションのルートに見えるサスペンドインジケーターのみが設定されます。これにより、怠zyなロードされたコンポーネントがフェッチしてロードされたときにアプリケーションの上部にロードスピナーが表示されます。 useTransition仕組みにより、現在の画面は3秒間表示され続けます。その時間を超えてコンポーネントがまだ準備ができていない場合、UIはハングアップし、フォールバックコンテンツがレンダリングされ、表示されます。<longloading></longloading>コンポーネント：

 {isnewmodulepending？<loading></loading> ：null}
<suspense fallback="{<LongLoading"></suspense> }>
  <div style="{{" flex: overflowy:>
    {成分？<component updating="{moduleUpdatePending}"></component> ：null}
  </div>

モジュールを変更しない場合は、 startTransitionModuleUpdateを呼び出します。

 StartTransitionModuleUpdate（（）=> {
  ディスパッチ（{type：url_sync}）;
}）;

更新がハングを引き起こす場合、コンテキストに配置するハングインジケーターが起動されます。アクティブコンポーネントはこれを検出し、必要なインラインロードインジケーターを表示できます。前と同じように、ハング時間が3秒を超えると、同じサスペンス境界がトリガーされます...後で見るように、ツリーの下部にはサスペンス境界が存在しない限り。

注意すべき重要なことの1つは、これらの3秒のタイムアウトがコンポーネントの読み込みだけでなく、準備が整ったディスプレイにもあることです。コンポーネントが2秒でロードされ、メモリ内でレンダリングするときに吊り下げられている場合（ startTransition Callの内側にあるため）、 useTransition引き続き最大1秒間待ち続け、再びぶら下がっています。

この投稿を書いている間、Chromeのスローネットワークモードを使用して、強制荷重を強制的に速度停止させてサスペンスの境界をテストしました。設定は、Chrome開発ツールのネットワークタブにあります。

設定モジュールにアプリケーションを開いてみましょう。これは呼び出されます：

ディスパッチ（{type：url_sync}）;

appSettings ReducerはURLと同期し、モジュールを「設定」に設定します。これはstartTransitionNewModule内で発生し、怠zyなロードされたコンポーネントがレンダリングを試みたときに垂れ下がるようにします。私たちはstartTransitionNewModuleの中にいるので、 isNewModulePending Trueに切り替えてレンダリングします<loading></loading>コンポーネント。

それで、私たちが新しい場所を閲覧するとどうなりますか？この呼び出しを除いて、基本的に以前と同じです。

ディスパッチ（{type：url_sync}）;

... useEffectの2番目のインスタンスからのものになります。本モジュールを閲覧して、何が起こるか見てみましょう。まず、インラインスピナーは予想どおりに表示されます。

（スクリーンショットをここに挿入する必要があります）

検索と更新

本モジュールにとどまり、URLクエリ文字列を更新して新しい検索を開始しましょう。 2番目のuseEffect呼び出しで同じモジュールを検出し、これに専用のuseTransitionコールを使用したことを思い出してください。そこから、コンテキストにサスペンドインジケーターを配置して、取得して使用できるアクティブモジュールを使用します。

実際に使用するコードを見てみましょう。ここには、サスペンス関連コードはあまりありません。コンテキストから値を取得し、真実の場合は、既存の結果に加えてインラインスピナーをレンダリングします。これを思い出してください。これは、 useTransitionコールが開始され、アプリケーションがメモリに停止されたときに発生したことを思い出してください。この間、既存のUIを表示し続けますが、この負荷インジケーターを使用します。

 const bookresults =（{books、uiview}）=> {
  const isUpdating = useContext（moduleUpDateContext）;
  戻る （
    <div>
      {！books.length？ （
        <div classname="alert alert-warning" style="{{" margintop: marginright:>
          本は見つかりません
        </div>
      ）：null}
      {isUpdating？<loading></loading> ：null}
      {uiview.isgridview？ （
        <gridview books="{books}"></gridview>
      ）：uiview.isbasiclist？ （
        <basiclistview books="{books}"></basiclistview>
      ）：uiview.iscoverslist？ （
        <coversview books="{books}"></coversview>
      ）：null}
    </div>
  ）;
};

検索用語を設定して、何が起こるか見てみましょう。まず、インラインスピナーが表示されます。

次に、 useTransitionタイミングを出した場合、サスペンス境界のフォールバックコンテンツを取得します。本モジュールは、以下に示すように、より細かい荷重指標を提供する独自のサスペンス境界を定義しています。

（スクリーンショットをここに挿入する必要があります）

これが重要なポイントです。サスペンスの境界フォールバックを作成するときに、スピナーと「ロード」メッセージを表示しないようにしてください。これは、他に何もすることは何もないので、私たちの一番のナビゲーションにとって理にかなっています。ただし、アプリケーションの特定の部分にいる場合は、フォールバックコンテンツを同じコンポーネントの多くを再利用し、データがある場所に何らかのロードインジケーターを表示してください。

これが私の本モジュールの関連するコンポーネントが次のように見えるものです。

 const rendermodule =（）=> {
  const uiview = usebooksearchuiview（）;
  const [lastbookResults、setlastbookResults] = ueseState（{
    TotalPages：0、
    ResultsCount：0
  }）;
  戻る （
    <div classname="standard-module-container margin-bottom-lg">
      <suspense fallback="{<Fallback" uiview="{uiView}"></suspense> }>
        <maincontent setlastbookresults="{setLastBookResults}" uiview="{uiView}"></maincontent>
      
    </div>
  ）;
};
const fallback =（{uiview、totalpages、resultscount}）=> {
  戻る （
    <div>
      <booksmenubardisabled resultscount="{resultsCount}" totalpages="{totalPages}"></booksmenubardisabled>
      {uiview.isgridview？ （
        <gridviewshell></gridviewshell>
      ）：（
        <h1>
          本は読み込まれています<i classname="fas fa-cog fa-spin"></i>
        </h1>
      ）}
    </div>
  ）;
};

一貫性に関するクイックメモ

先に進む前に、前のスクリーンショットで1つのことを指摘したいと思います。検索が一時停止されたときに表示されるインラインスピナーをチェックしてから、検索が一時停止されたら画面をチェックしてから、完成した結果を確認してください。

（スクリーンショットをここに挿入する必要があります）

注検索ペインの右側に「C」タグがある場合、および検索クエリから削除するオプションはありますか？または、タグは最後の2つのスクリーンショットのみにあることに注意してください。 URLが更新された瞬間、タグを制御するアプリケーションステータスが実際に更新されます。ただし、ステータスは最初に表示されません。当初、ステータスの更新はメモリにハングアップし（ useTransitionを使用したため）、以前のUIは引き続き表示されます。

その後、コンテンツがバックアップされます。フォールバックコンテンツは、同じ検索バーの無効なバージョンをレンダリングし、現在の検索ステータスを表示します（選択に基づいて）。以前のUIを削除しました（今ではかなり古くて古くなっているため）、メニューバーに表示されている検索を無効にするのを待っています。

これは、一貫性の一貫性のタイプであり、無料で提供されます。

あなたは美しいアプリケーション状態を作るのに時間を費やすことができ、Reactはあなたが約束に対処することなく物事が準備ができているかどうかを推測する仕事をします。

ネストされたサスペンス境界

トップナビゲーションには、本コンポーネントを「まだ読み込んでいる」スピナーがサスペンス境界からレンダリングする程度にロードするのに時間がかかるとします。そこから、本コンポーネントがロードされ、本コンポーネント内の新しいサスペンス境界がレンダリングされます。しかし、その後、レンダリングが続くにつれて、私たちの本の検索クエリは火とぶら下がっています。何が起こるのですか？最上部のサスペンス境界は、すべてが準備が整うまで表示され続けますか、それとも本の下位レベルのサスペンス境界が引き継がれますか？

答えは後者です。新しいサスペンス境界がツリーの低い位置にレンダリングされると、それらのフォールバックコンテンツは、表示されていた以前のサスペンスバックコンテンツのフォールバックコンテンツに置き換えられます。現在、この機能をオーバーライドできる不安定なAPIがありますが、フォールバックのコンテンツをうまく作成している場合、これはあなたが望む動作かもしれません。 「まだ読み込んで、ごめんなさい」を表示したくない。代わりに、本コンポーネントの準備ができたら、よりターゲットを絞った待機メッセージのシェルを表示したいと思うでしょう。

さて、bookモジュールがロードしてstartTransitionを開始した場合はどうなりますか？言い換えれば、 startTransitionタイムアウトが3秒で、本コンポーネントがレンダリングされ、ネストされたサスペンス境界が1秒後にコンポーネントツリーにあり、検索クエリが停止されているとします。残りの2秒が通過しますか、それともその新しいネストされたサスペンス境界の直前にフォールバックが表示されますか？答えは驚くべきことかもしれませんが、デフォルトでは、新しいサスペンスフォールバックコンテンツがすぐに表示されます。これは、ユーザーが物事が起こっていて動いているのを見ることができるように、できるだけ早く新しい有効なUIを表示するのが最善であるためです。

データを統合する方法

ナビゲーションは良好ですが、データの読み込みはすべてにどのように適合しますか？

完全に透過的に溶け込みます。データの読み込みは、 React.lazyのナビゲーションと同じようにハングをトリガーし、同じuseTransitionとサスペンスの境界とフックします。そのため、サスペンスは非常に驚くべきものです。すべての非同期依存関係は、この同じシステムでシームレスに機能します。サスペンスの前に、一貫性を確保するためにこれらのさまざまな非同期リクエストを手動で管理することは悪夢であるため、まさに誰もしなかった理由です。 Webアプリケーションは、予測不可能な時期に停止するカスケードスピナーで有名であり、部分的にしか完成していない一貫性のないUIを生成します。

わかりましたが、データの負荷を実際にどのように関連付けますか？データをサスペンスにロードすることは、より複雑でシンプルです。

説明させてください。

データを待っている場合は、データを読み取る（または読み込もう）コンポーネントに約束を投げかけます。約束は、データリクエストに基づいて一貫している必要があります。したがって、同じ「C」検索クエリの4つの重複リクエストは、同じ約束をスローする必要があります。これは、これらすべてを管理するためのある種のキャッシュレイヤーを意味します。あなたはおそらくこれを自分で書くことはありません。代わりに、サスペンスをサポートするために自分自身を更新するために使用するデータベースを必要とし、待つだけです。

この作業は、私のマイクログラフリアクトライブラリで行われています。同じAPIを持つuseQueryフックの代わりに、 useSuspenseQueryフックを使用しますが、データを待つときに一貫した約束を投げかけます。

待って、プリロードはどうですか？ ！

サスペンス、滝、レンダリング、プリロードなどについての他のことを読んでください。あなたの脳はすでに混乱していますか？心配しないで。それがすべての意味です。

本コンポーネントの読み込みを遅らせると、いくつかのデータが要求され、その結果、新しいサスペンスが発生します。コンポーネントのネットワークリクエストとデータのネットワーク要求は、滝の方法で1つずつ発生します。

ただし、重要な部分は、コンポーネントの読み込みを開始すると、最初のクエリを実行するアプリケーション状態が既に利用可能です（この場合、URL）。それで、あなたがそれを必要としていることを知ったとき、すぐにクエリを「開始」してみませんか？ /本に閲覧したら、コンポーネントが読み込まれているときにすでに進行中のように、その時点で現在の検索クエリをすぐに開始してみませんか？

Micro-GraphQL-Reactモジュールにはプリロードメソッドがあります。使用することをお勧めします。データのプリロードは優れたパフォーマンスの最適化ですが、サスペンスとは何の関係もありません。 Classic Reactアプリケーションは、データが必要であることがわかっているときに、すぐにデータをプリロードすることができます（そしてすべきです）。 VUEアプリケーションは、データが必要であることがわかっている場合、すぐにデータをプリロードする必要があります。 Svelteアプリケーションは...あなたがそれを手に入れるべきです。

プリロードされたデータは、サスペンスの直交です。これは、あらゆるフレームワークでできることです。これは、他の人がそれをしていなくても、私たち全員がすべきだったことでもあります。

しかし、真剣に、どのようにプリロードしましたか？

それはあなた次第です。少なくとも、現在の検索を実行するロジックは、絶対に独自の独立したモジュールに完全に分離する必要があります。文字通り、このプリロード関数が別のファイルにあることを確認する必要があります。ツリーのようなジッターをWebpackに頼らないでください。次にパッケージをレビューするときに、完全な悲しみに直面するかもしれません。

独自のパッケージにpreload()メソッドがあるので、電話してください。モジュールにナビゲートしたいと思っているときに電話してください。 Reactルーターには、ナビゲーションが変更されたときにコードを実行できるAPIがいくつかあると仮定しています。上記のネイティブルーティングコードについては、前のルートスイッチングのメソッドを呼び出しました。簡潔にして省略しましたが、本のエントリは実際には次のようになります。

 switch（moduletoload.tolowercase（））{
  ケース「アクティブ化」：
    ActivateComponentを返します。
  ケース「認証」：
    AuthenticAteComponentを返します。
  ケース「本」：
    // PLEROAD！ ！ ！
    bookspreload（）;
    BooksComponentを返します。

それでおしまい。これがあなたが試すことができるライブデモンストレーションです：

（ここにリンクを挿入する必要があります）

サスペンスタイムアウト値（デフォルトは3000ミリ秒）を変更するには、設定に移動して他のタブを表示します。変更後、必ずページを更新してください。

要約します

サスペンスで行うように、私はWeb開発エコシステム内の何でもとても興奮しています。これは、Web開発で最も厳しい問題の1つである非同期性を管理するための非常に野心的なシステムです。

以上が実際にサスペンスを反応しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。