reactjs - fetchMore 导致页面意外重新渲染

Question

我有一个无限滚动列表。我最近更新到最新的 Apollo 客户端，发现无限滚动不再有效。
经过深入调查。我注意到当我使用递增的跳过调用 fetchmore 时，它​​会导致整个页面重新呈现。有任何想法吗？
询问:

   const {
      data,
      loading: queryLoading,
      fetchMore,
      error,
      networkStatus
    } = useQuery(SEARCH_PROFILES, {
      variables: { ...searchParams, skip: skip.current },
      fetchPolicy: "cache-first",
      notifyOnNetworkStatusChange: true
    });

获取更多

 const fetchData = () => {
      ErrorHandler.setBreadcrumb("Fetch more profiles");
      skip.current =
        skip.current + parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);
      const intLimit = parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);

      if (hasMore.current) {
        fetchMore({
          variables: {
            searchType,
            long,
            lat,
            distance,
            ageRange,
            interestedIn,
            skip: skip.current,
            limit: intLimit,
            isMobile: sessionStorage.getItem("isMobile")
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            if (!fetchMoreResult) {
              hasMore.current = false;
              return previousResult;
            } else if (
              fetchMoreResult.searchProfiles.profiles.length < intLimit
            ) {
              hasMore.current = false;
            }
            const newData = produce(previousResult, (draftState) => {
              if (draftState.searchProfiles.profiles) {
                draftState.searchProfiles.profiles.push(
                  ...fetchMoreResult.searchProfiles.profiles
                );
              } else {
                draftState.searchProfiles.profiles =
                  fetchMoreResult.searchProfiles.profiles;
              }
            });

            return newData;
          }
        });
      }
    };

Answer 1

好吧，根据您的解释，重新渲染是必要的，因为您在滚动时正在加载新内容，
但是对于整个页面不被重新渲染是我们在这里关心的......下面的提示可能会有所帮助。

将需要在滚动时获取数据的页面部分提取到单独的组件中，因为它将是唯一需要重新渲染的组件

用 React.memo() 包裹你提取的组件所以当数据没有变化时它不会重新渲染。

充分利用生命周期钩子(Hook)方法，它们是管理在何处或如何重新渲染

的工具