fetchMore 导致页面意外重新渲染

Posted 2023-03-10

【中文标题】fetchMore 导致页面意外重新渲染

【英文标题】：fetchMore causes page to re-render unexpectedly

【发布时间】：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之类的例子吗？如果没有更多的上下文，很难给出有用的建议。

【参考方案1】：

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

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