ホームページ  >  に質問  >  本文

React および React Query のデータ クエリを最適化して、コンポーネントがビューポート内にある場合にのみ実行されるようにします。

<p>React を使用して投稿コンポーネントのリストをレンダリングするページがあり、投稿コンポーネントごとにその投稿に関連するコメントを取得し、React Query ライブラリを使用して内部に表示します。問題は、ユーザーが投稿ページを読み込むときに、React Query がすべての投稿のすべてのコメントを一度に読み込むため、バックエンドの速度が低下することです。 </p> <p>ページのレンダリング時にすべてを一度に読み込むのではなく、ユーザーが特定の投稿までスクロールしたときにのみコメントを読み込むメカニズムを実装したいと考えています。 React と React Query を使用してこれを実現するにはどうすればよいでしょうか? </p> <p>これは、コメントを取得して表示するための現在のサンプル コードです。</p> <p>私の投稿コンポーネント</p> <p> <pre class="brush:js;toolbar:false;">React を 'react' からインポートします。 import { useQuery } から 'react-query'; const PostComponent = ({ post }) => { const { データ、isLoading、エラー } = useQuery( ['コメント', post.id], () => fetchComments(post.id) ); 戻る ( <div> {/* 投稿コンポーネントをレンダリングします */} {isLoading && <div>コメントを読み込み中...</div>} {error && <div>コメント取得エラー</div>} {データ&&( <div><p>{post.title}</p> </div> )} </div> ); };</pre> </p> <p>マイ投稿ページコンポーネント <pre class="brush:js;toolbar:false;">React を 'react' からインポートします。 import { useQuery } から 'react-query'; const PostsPage = () => { const { データ、isLoading、エラー } = useQuery('posts', fetchPosts); 戻る ( <div> {isLoading && <div>投稿を読み込み中...</div>} {error && <div>投稿の取得エラー</div>} {データ&& data.map((post) => ( <PostComponent key={post.id} post={post} /> ))} </div> ); };</pre> </p>
P粉714890053P粉714890053441日前526

全員に返信(1)返信します

  • P粉323224129

    P粉3232241292023-08-29 15:51:44

    この目標を達成するには、2 つのコンポーネントが必要です。

    1. Intersection Observer API - コンポーネントがビューポート内にあるかどうかを判断するために使用されます
    2. React Query dependent Queries (有効フラグ) - コンポーネントがビューポート内にあるときにクエリの使用を有効にします
    React アプリで Intersection Observer API との対話を簡素化するには、react-intersection-observeruseInView フックを使用する必要があります。図書館 。
    リーリー

    返事
    0
  • キャンセル返事