何時使用 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用於您的“項目”數據變量，以避免重新處理邏輯。 是的，因為從邏輯上講，每次更新“數據”或父級的其他屬性時，它都是新的，但是當有人擴展組件的邏輯並將重新渲染時，數據處理可能不會改變，並且該邏輯將是多余的 - 你的組件邏輯處理的安全時間