多くの製品を表示するカタログ ページがあります。ユーザーが下から選択できる製品の 1 つ (たとえば製品番号 1000) をクリックすると、別のページに移動して内容などを確認します。ブラウザの戻るボタンを使用してカタログ ページに戻ると、すべてが再度表示されます。これは当然のことですが、スクロール バーを前に選択した製品に配置するのに時間がかかります。
ユーザーがページの上部で特定の製品 (例: 製品番号 4) を選択すると、すべてが正常に動作しますが、ページの下部に移動すると、シナリオが開始されます。
REACT でこのディレクトリ ページをキャッシュする方法はありますか?レンダリングにかかる時間を避けるには?
目次ページの下部にあるページネーションでこの問題は解決しますが、「さらに読み込む」ボタンがあります。 React.memo を使用してみましたが、現在のページでアクションを実行した場合にのみ機能し、戻るボタンを使用してページに到達した場合には機能しません。
React Router v5 を使用しています。ここのコードにコードペンを追加することもできますが、まず、方向性を示すためにこれが可能かどうかを知りたいと思います。 「戻る」ボタンで戻った後もすべてをレンダリングする必要があり、静的なページのように見え、スクロールが最後に選択された製品にすら移動しないページを見たことがあります。暗闇の中に光はあるのか？
これは私の例です。
App.jsxx
リーリーHome.jsx
リーリーページ 1.jsx
リーリーPage2.jsxx
ああああ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃質問＃＃＃
つまり、アプリケーション内であなたに不利に働くものが存在します。
データはフェッチされ、ナビゲート先のコンポーネントのローカル状態に保存されます。アプリが別のルートに移動すると、データは失われ、戻ったときに再取得されます。- レンダリングする必要がある大量の
データがあります。 -
考えられる提案される解決策
状態の永続性の問題を解決するために、ここでの解決策は、状態を共通の祖先にプロモートして、レンダリングされているルーティングされたコンポーネントよりも長く状態が持続するようにすることです。親のApp
コンポーネントまたはカスタム React Context プロバイダー コンポーネントで十分です。＃＃＃例：＃＃＃ リーリー リーリー
react-window はこの問題に対処するものです。これは、データのレンダリングする必要があるデータ量の問題を解決するには、仮想化またはウィンドウ化を利用できます。配列全体 (潜在的には数千の要素) を DOM にレンダリングするのではなく、前後に「オーバースキャン」を行って画面に収まるものだけをレンダリングします。 ＃＃＃例：＃＃＃ リーリー
Page1最後に修正する必要があるのは、特定の要素までスクロールして戻ることです。react-window 特定のインデックスまでスクロールする機能。 CardDataContext を更新してスクロール状態を維持し、コンポーネントを更新して位置を設定および復元します。
リーリー リーリー ＃＃＃デモ＃＃＃