Optimieren Sie die Datenabfrage für React und React Query so, dass sie nur erfolgt, wenn sich die Komponente im Ansichtsfenster befindet-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich habe eine Seite, die React verwendet, um eine Liste von Beitragskomponenten zu rendern, und für jede Beitragskomponente erhalte ich die Kommentare zu diesem Beitrag und zeige sie mithilfe der React Query-Bibliothek darin an. Das Problem besteht darin, dass React Query alle Kommentare für alle Beiträge auf einmal lädt, wenn der Benutzer die Beitragsseite lädt, was dazu führt, dass mein Backend langsamer wird.

Ich möchte einen Mechanismus implementieren, der Kommentare nur dann lädt, wenn der Benutzer zu einem bestimmten Beitrag scrollt, anstatt alles auf einmal zu laden, wenn die Seite gerendert wird. Wie erreicht man dies mit React und React Query?

Dies ist mein aktueller Beispielcode zum Abrufen und Anzeigen von Kommentaren:

Meine Beitragskomponente

import React from 'react'; import { useQuery } aus 'react-query'; const PostComponent = ({ post }) => const { data, isLoading, error } = useQuery( ['Kommentare', post.id], () => fetchComments(post.id) ); zurückkehren (  {/* Rendern Sie Ihre Beitragskomponente */} {isLoading && Kommentare werden geladen...
} {error && Fehler beim Abrufen von Kommentaren
} {Daten && ( {post.title}
 )} 
 ); };

Komponente „Meine Beitragsseite“.

import React from 'react'; import { useQuery } aus 'react-query'; const PostsPage = () => const { data, isLoading, error } = useQuery('posts', fetchPosts); zurückkehren (  {isLoading && Beiträge werden geladen...
} {error && Fehler beim Abrufen von Beiträgen
} {Daten && data.map((post) => (  ))} 
 ); };

import React from 'react'; import { useQuery } from "react-query"; import { useInView } from "react-intersection-observer"; const PostComponent = ({ post }) => { const { ref, inView } = useInView(); const { data, isLoading, error } = useQuery( ["comments", post.id], () => fetchComments(post.id), // the useQuery hook will fetch only when inView is enabled { enabled: inView } ); return (

{isLoading &&

Loading comments...

} {error &&

Error fetching comments

} {data && (

{post.title}

{" "}

)}

); };

Antworte allen (1)

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

为了实现这个目标，您需要两个组件。

Intersection Observer API- 用于确定组件是否在视口中
React Query Dependent Queries（enabled标志）- 在组件在视口中时启用查询的使用

为了简化在React应用中与 Intersection Observer API的交互，您应该使用来自 react-intersection-observer库的 useInView钩子。

import React from 'react'; import { useQuery } from "react-query"; import { useInView } from "react-intersection-observer"; const PostComponent = ({ post }) => { const { ref, inView } = useInView(); const { data, isLoading, error } = useQuery( ["comments", post.id], () => fetchComments(post.id), // the useQuery hook will fetch only when inView is enabled { enabled: inView } ); return (  {isLoading && Loading comments...
} {error && Error fetching comments
} {data && (  {post.title}
{" "} 
 )} 
 ); };