何时使用 React useCallback 钩子

Question

在下面的 React 组件中，我使用Apollo Client fetchMore function获取更多项目。

在这里使用React useCallback 钩子的目的究竟是什么？ 在这种情况下使用它是个好主意吗？

const Carousel = ({ data: blockData, metadata }: Props) => {

  const { data, fetchMore, networkStatus } = useQuery<
   GqlRes,
  >(GET_NODES, {
    variables: {
      offset
      limit
    },
    errorPolicy: 'all',
    notifyOnNetworkStatusChange: true,
    ssr: false,
  });


  const fetchNextPage = useCallback(() => {
    return fetchMore({
      variables: {
        offset: data?.getNodes.nodes.length,
      },
    });
  }, [data, fetchMore]);

  const items =
    data?.getNodes.nodes
      .map((node) => {
        return {
          id: node.id,
          title: node.title,
        };
      }) || [];

  return (
    <Carousel
      items={items}
        onEnd={() => {
         if (data?.getNodes.pager?.hasNextPage) {
           fetchNextPage();
         }
      }}
    />
  )
};

export default Carousel;

Answer 1

恕我直言：

1. 如果您的内部“轮播”组件被缓存（由React.memo或扩展PureComponent ），则可以不在每个父级（外部“轮播”）上提供新属性重新渲染（仅提一下 - 每次重新渲染你没有记忆的对象和 function 将作为新实例再次创建，并将作为新属性进一步传递并导致新的子级重新渲染）使用useCallback
2. 更重要的是，我想将useMemo用于您的“项目”数据变量，以避免重新处理逻辑。 是的，因为从逻辑上讲，每次更新“数据”或父级的其他属性时，它都是新的，但是当有人扩展组件的逻辑并将重新渲染时，数据处理可能不会改变，并且该逻辑将是多余的 - 你的组件逻辑处理的安全时间