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>