Reactjs 如何避免由于将函数通过道具传递给功能组件而导致不必要的重新渲染

我一直在尝试调试一个组件，该组件的渲染次数似乎比我预期的要多，因此我安装了

为什么要渲染
。错误
使用相同名称的不同函数。（一些网站上有更多信息）
让我看到了这篇解释这个问题的文章。不幸的是，我不确定该如何解决这个问题。组件看起来像这样

const Comp = ({cb}) => <div onClick={cb}>click me</div>

const Comp=（{cb}）=>单击我

它的用法如下：

const Parent = () => {
  const cb = () => console.log('clicked!!!')
  return <div><Comp cb={cb} /></div>
}

const Parent=（）=>{
const cb=（）=>console.log（'clicked！！！'））
返回
}

编辑：
更准确地说，我有一个问题，我有一个高阶组件，我生成一个通过道具传递的函数，我想知道如何避免这个问题：

// the HoC
const HoC = Component => {
  const cb = makeFn();
  return <div><Component cb={cb} />
}

//HoC
const HoC=组件=>{
常数cb=makeFn（）；
返回
}

//将HoC与上述组件一起使用的组件

const Top = () => {
  return <HoC Component={Comp} />
}

const Top=（）=>{
返回
}

当我尝试使用
useCallback
时，我收到一条错误消息
React Hook在函数Top中调用了“useCallback”，该函数既不是React函数，也不是自定义React Hook函数
您需要记忆回拨。
阅读react文档中的详细信息


const Child=React.memo（函数（{cb}）{
点击我
});
常量父项=（）=>{
const memoizedCallback=React.useCallback(
（）=>console.log（'clicked！！！'），
[/*依赖项在此处*/]，
);
返回
}

通过使用React memo，您可以让组件检查旧道具和新道具，看看是否有任何变化。由于我们正在记忆我们发送的回调，它将具有来自上一次渲染的相同指针，因此不会进行额外的重新渲染。
将
cb
声明移出
常量父体
函数体，因此，它始终只是一个
cb
实例。如果该方法需要访问道具或状态，则该实例不起作用。如果该方法需要访问道具或状态，则应重新渲染。因此，我不会使用React.memo或useCallback，但需要同时使用这两个实例？是的，因此我们需要useCallback来保留我们正在传递的回调引用，因为回调是在每次父级重新渲染时重新创建的。默认情况下，react组件不会检查是否应该在父级更新时重新渲染，它们只是继续并重新渲染。要停止重新渲染，我们需要将其设置为pureComponent（对于基于类的）或react.memo（对于comps as函数）。这将使以前的道具与当前道具不同，如果它们不同，组件将重新渲染。但由于我们在父级上记住了回调，当子级得到回调时，它将注意到以前的回调与我们刚刚传入的回调相同，因此它将知道不更新。useCallback有一些注意事项，但是您可以从文档中了解如何使用它。确保您的依赖关系数组是准确的，并且回调中使用的所有道具/状态都列在依赖关系数组中。通过react-redux的connect函数将分派映射到道具会触发多次重新呈现吗？因为这实际上是通过道具传递函数的过程？
const Child = React.memo(function({cb}) {
  <div onClick={cb}>click me</div>
});


const Parent = () => {
  const memoizedCallback = React.useCallback(
      () => console.log('clicked!!!'),
      [/*dependencies here*/],
    );
  return <div><Comp cb={memoizedCallback} /></div>
}