何时使用 React useCallback 钩子答案

【问题标题】：When to use React useCallback hook何时使用 React useCallback 钩子
【发布时间】：2022-08-19 22:58:27
【问题描述】：

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

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

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;

当您有一个子组件在不需要的情况下一次又一次地重新渲染时，使用 useCallback 挂钩。传递一个内联回调和一组依赖项。 useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。
在这里使用useCallback 毫无意义，因为无论如何您在每次渲染时都将一个新函数传递给Carousel。 useCallback 如果您将函数传递给子组件并且只想在函数使用的任何数据发生更改时传递新的函数对象，则很有用。这允许子组件进行优化。
@Felix Kling 和内部 Carousel 有另一个 <Child /> onEnd 通过。这有什么区别吗？回答抱歉，您能否给出一个明确的用例何时使用它？

标签： reactjs usecallback

【解决方案1】：

恕我直言：

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

【讨论】：