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

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

或者当一个组件被频繁地重新呈现时，我可以通过useCallback包装其中的每个函数

---

任何想法？

< P> <强>您可以考虑使用USECARBACK< <强> > /P>以下用例 React的useCallback钩子可用于优化React函数组件的呈现行为

通常，useCallback在向子组件传递回调道具时非常有用

比方说，如果接受回调的子组件依赖于引用相等检查，以防止在其属性更改时进行不必要的重新渲染，那么在渲染之间任何回调属性都不更改是很重要的

为此，父组件可以在useCallback中包装回调属性，并确保它将相同的函数对象向下传递到优化的子组件中

假设您有一个组件，它呈现一个大的项目列表

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);

从“React”导入React；
从“/fetch items”导入useSearch；
函数列表项（{value，handleClick}）{
const items=useSearch（值）；
const itemToElement=item=>{item}；
返回{items.map（itemToElement）}；
}
导出默认反应备忘录（列表项）；

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

ListItemneeds的父组件在单击项目时提供处理程序函数

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}
    />
  );
}

import React，{useCallback}来自“React”；
导出默认函数ParentComponent（{value}）{
const handleClick=useCallback（项=>{
日志（'单击列表项'，项）；
}，[价值]；
返回(
);
}

handleClick回调由useCallback（）记忆。只要term变量保持不变，useCallback（）就会返回相同的函数实例

即使由于某种原因，ParentComponent组件重新呈现，handleClick仍保持不变，不会破坏ListItem的记忆

---

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

我不确定为什么这个问题被否决了。这不是一个基于意见的问题，包括所有必需的信息。如果它是重复的，则将其标记为重复的，而不是仅向下投票。