구성 요소가 뷰포트에 있을 때만 발생하도록 React 및 React 쿼리에 대한 데이터 쿼리를 최적화합니다.

Question

React를 사용하여 게시물 구성 요소 목록을 렌더링하는 페이지가 있고, 각 게시물 구성 요소에 대해 해당 게시물과 관련된 댓글을 가져와 React Query 라이브러리를 사용하여 내부에 표시합니다. 문제는 사용자가 게시물 페이지를 로드할 때 React Query가 모든 게시물에 대한 모든 댓글을 한 번에 로드하므로 백엔드 속도가 느려진다는 것입니다.

페이지가 렌더링될 때 모든 내용을 한 번에 로드하는 대신 사용자가 특정 게시물로 스크롤할 때만 댓글을 로드하는 메커니즘을 구현하고 싶습니다. React와 React Query를 사용하여 이를 달성하는 방법은 무엇입니까?

다음은 댓글을 가져오고 표시하는 현재 샘플 코드입니다.

내 게시물 구성요소

'react'에서 React 가져오기;
'반응 쿼리'에서 { useQuery }를 가져옵니다.

const PostComponent = ({ 게시 }) =>
  const { 데이터, isLoading, 오류 } = useQuery(
    ['댓글', 게시물.id],
    () => fetchComments(post.id)
  );

  반품 (
    <div>
      {/* 게시물 구성요소 렌더링 */}
      {isLoading && <div>댓글 로드 중...</div>}
      {오류 && <div>댓글 가져오기 오류</div>}
      {데이터 &&
       <div><p>{post.title}</p>
      )}
    </div>
  );
};

내 게시물 페이지 구성요소

'react'에서 React 가져오기;
'반응 쿼리'에서 { useQuery }를 가져옵니다.

const 게시물페이지 = () =>
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  반품 (
    <div>
      {isLoading && <div>게시물 로드 중...</div>}
      {오류 && <div>게시물 가져오기 오류</div>}
      {데이터 &&
        data.map((포스트) => (
          <PostComponent key={post.id} 게시물={post} />
        ))}
    </div>
  );
};

Answer 1

이 목표를 달성하려면 두 가지 구성 요소가 필요합니다.

1. Intersection Observer API - 구성요소가 뷰포트에 있는지 확인하는 데 사용됩니다
2. React 쿼리 종속 쿼리(활성화된 플래그) - 구성 요소가 뷰포트에 있을 때 쿼리 사용을 활성화합니다

React 앱에서 Intersection Observer API와의 상호작용을 단순화하려면 react-intersection-observerIntersection Observer API的交互，您应该使用来自react-intersection-observer库的useInView 라이브러리의 useInView 후크.

으아악