我什么时候在 React 中使用 useCallback？

Question

我真的很难决定是否使用 useCallback。 如果没有昂贵的 function，我应该省略它吗？ （但我不知道 function 是否昂贵......）

或者当一个组件频繁重新渲染时，我可以通过 useCallback 将每个 function 包装在其中吗？

任何想法？

Answer 1

您可以考虑以下有关使用 useCallback 的用例

React 的 useCallback Hook 可用于优化 React function 组件的渲染行为。

通常useCallback在将回调道具传递给子组件时非常有用。

假设如果一个接受回调的子组件依赖于引用相等性检查来防止在其 props 更改时发生不必要的重新渲染，那么重要的是任何回调 props 在渲染之间都不会发生变化。

为此，父组件可以将回调属性包装在 useCallback 中，并保证它将相同的 function object 向下传递到优化的子组件中。

假设您有一个呈现大量项目的组件。

import React from 'react';
import useSearch from './fetch-items';

function ListItem({ value, handleClick }) {
  const items = useSearch(value);

  const itemToElement = item => <div onClick={handleClick}>{item}</div>;

  return <div>{items.map(itemToElement)}</div>;
}

export default React.memo(ListItem);

在这里， ListItem呈现项目列表。 让我们想象一下这个列表可能很大，可能有几千个项目。 要保留列表重新渲染，请将其包装到React.memo中。

ListItem的父组件需要在单击项目时提供一个处理程序 function。

import React, { useCallback } from 'react';

export default function ParentComponent({ value }) {
  const handleClick = useCallback(item => {
    console.log('List item is clicked', item);
  }, [value]);

  return (
    <ListItem
      value={value}
      handleClick={handleClick}
    />
  );
}

handleClick回调由useCallback() 记忆。 只要 term 变量保持不变， useCallback() 就会返回相同的 function 实例。

即使由于某种原因ParentComponent组件重新渲染， handleClick保持不变并且不会破坏 ListItem 的记忆。

注意：请不要将 React 的 useCallback Hook 与 React 的备忘录 API 混用。 useCallback 用于 memoize 函数，而 React memo 用于包装 React 组件以防止重新渲染。 它们提供两种不同的功能。