fetchMore 导致页面意外重新渲染答案

【问题标题】：fetchMore causes page to re-render unexpectedlyfetchMore 导致页面意外重新渲染
【发布时间】：2021-02-03 00:10:19
【问题描述】：

我有一个无限滚动列表。我最近更新到最新的 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;
          }
        });
      }
    };

【问题讨论】：

对于反应状态的每一次变化，它都会重新渲染整个组件，但反应足够聪明，可以在需要的地方更新变化。您可以阅读this article 以避免多重重新渲染
您之前的 apollo 版本和升级到的新版本是什么？
你能提供一个关于codesandbox之类的例子吗？如果没有更多的上下文，很难给出有用的建议。

标签： reactjs apollo react-apollo apollo-client

【解决方案1】：

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

将需要在滚动时获取数据的页面部分提取到单独的组件中，因为它将是唯一需要重新呈现的组件
用React.memo() 包裹你提取的组件，这样当数据没有变化时它就不会重新渲染。
充分利用生命周期钩子方法，它们是管理在何处或如何重新渲染的工具

【讨论】：