React：带有或不带有useCallback的优化回调 TL; DR 完整问题

如何解决React：带有或不带有useCallback的优化回调 TL; DR 完整问题

TL; DR

有些博客说，每次将回调传递给子组件时，您都不需要使用useCallback钩子，有时最好每次创建一个新函数。因为useCallback的费用有时会高于实际性能问题。尽管React警告说这可能会导致性能问题，但我们需要尝试避免这种情况。
谁是正确的，在这两个对立的主张之间取得平衡的方式是什么？

完整问题

最近，我一直在阅读许多有关react挂钩的博客和教程，尤其是有关useCallback和useMemo的博客。

在我使用类组件时，在React 16（及其所有钩子）之前，我一直使用“构造器绑定”进行回调，因为箭头函数或“绑定到渲染”如下：

render() {
  return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}

render() {
  return <button onClick={() => this.handleClick()}>Click Me</button>;
}

被认为是“不良做法”。来自React Docs：

每次渲染组件时，在render中使用Function.prototype.bind都会创建一个新函数，这可能会对性能产生影响（请参见下文）。

每次渲染组件时，在render中使用箭头函数都会创建一个新函数，这可能会破坏基于严格身份比较的优化。

所以，我的经验法则是不要将新功能传递给道具。

在React 16中，useCallback钩子试图帮助我们准确地做到这一点。但是我看到很多that或that之类的博客都声称您不必每次都使用useCallback钩子，因为useCallback的费用有时会比实际问题，使用箭头函数在每个渲染器上创建新函数都很好。

两个相反的主张都使我认为最好的选择应该是这样的（如果依赖项数组为空）：

function handleCallback() { ... } // Or arrow function...

function Foo(props) {
   return <button onClick={handleCallback}>Click Me</button>
}

因为这种方式不会使用“昂贵的” useCallback，并且不会每次都生成新的函数。但是，实际上，当您有多个回调时，此代码看起来不太好。

那么，这两个相反的主张之间的正确平衡是什么？如果有时每次创建一个新函数都比使用useCallback更好，那么为什么React在其文档中有关于它的警告？

（关于“双花括号”经验法则和useMemo / useRef钩的相同问题）