Reactjs useCallback()是否应该用于作为prop传递给子组件的函数，即使该组件包装在memo()中

发布于12月05日

在Reaction中，当组件重新呈现时，将重新创建该组件内的所有函数，从而导致函数引用的更改.

这样，即使子组件被包装在Memo()中，也可以防止父组件导致不安全的重新渲染.如果从父组件将函数作为props 传递给它，它仍然会重新呈现吗？

下面是一个例子:

const Parent = () => { 
  const [state, setState] = useState("1"); 
 
  const handleIncrement = useCallback(() => { 
    const increment = setState(state + 1);  
  }, [state]);
 
  return (  
    <Child handle={() => handleIncrement()} /> 
  );
}

const Child = memo(({handle}) => {
  return();
});

这就是在传递给子组件的函数上使用useCallback()的主要目的吗？这样，函数的引用在不影响父组件中该函数的usecallback依赖数组的重新呈现之间保持不变.它通过子组件完成的引用相等性判断？

在将函数作为props 传递给子组件时，是否会导致保持相同的函数引用？防止重现者使Memo()的使用无效？

我的问题是:一般来说，这是usecallback()最重要的用法吗？

Reactjs useCallback()是否应该用于作为prop传递给子组件的函数，即使该组件包装在memo()中

推荐答案

Reactjs相关问答推荐

我的组件在jsx文件中继续重新渲染

如何使用json将购物车数组传递到后台API

条件索引路由

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

ReactJs；Reaction-Hook-Form：仅当 Select 了特定 Select 列表选项时才显示文本输入

for each 子级加载父路由加载器

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

关于forwardRef，我可以'；我不理解第二个用例

在 React 中，为什么不将组件和钩子结合起来呢？

如何使用 React 获取表单中的所有值？

更新对象状态的父数组时记住子组件

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗？

如何读取 null 的属性？

图像路径很奇怪，部署 Next.js 应用程序后我看不到任何图像

为什么刷新页面时我的localStorage PET值变成空字符串？

在 React JS 中编辑表格数据

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色？

当用户输入相同信息时如何禁用更新

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x？

在表格中显示具有自定义声明的用户状态