useCallback 与简单函数

Question

什么时候应该使用useCallback，什么时候应该使用简单的数组函数？或者我不应该使用第二种方法？

const MyCompenent = (props) => {
  const handleClick = useCallback(()=>{
    //do stuff
  })
  return(
    <SomeCompnent onClick={handleClick} />
  )
}
// or
const MyCompenent = (props) => {
  return(
    <SomeCompnent onClick={()=> {/*do stuff*/}} />
  )
}

Answer 1

根据文档，

传递内联回调和依赖项数组。useCallback 将返回回调的记忆版本，该版本仅在依赖项之一发生更改时才会更改。这在将回调传递给依赖引用相等的优化子组件时很有用，以防止不必要的渲染（例如 shouldComponentUpdate）。

这意味着，给定一个纯函数和依赖项，对于给定的参数/依赖项集，输出将保持不变。所以它所做的是保存给定集合的输出，如果进行了这样的调用，而不是调用实际的函数，而是直接返回先前计算的值。

在您的示例中，您没有传递任何依赖项。所以它非常类似于一个简单的函数，但有一个额外的包装层。

您可以为处理程序使用命名函数或内联函数。使用哪个属于个人意见，但是我更喜欢使用命名函数，因为它保持 JSX 干净并提供可重用性的可能性。

参考：

• React 的 useCallback 和 useMemo Hooks By Example

Answer 2

添加到 Rajesh 的精彩答案中，它实际上归结为子组件需要多少优化。

根据我们在 React 中部署大型应用程序（数百万用户）的经验，对性能更重要的检查是 Profiler（它被添加到具有漂亮火焰图的新 React Dev Tools 中），而不是 React 的重新渲染，以及网络提取（即：不必要的提取、错误的 API 或可以并发而不是顺序运行的提取）。

React 重新渲染 != DOM 重新渲染

在某些时候，许多开发人员沉迷于 React 的渲染（部分我相信是因为突出显示渲染的选项）。

事实上，由于我相信所说的混淆，Facebook 对恢复亮点并不那么感兴趣。

在我们公司，也有一些开发人员认为某些组件的渲染是瓶颈（在我看来，他们看错了地方）。

但这也源于缺乏对 React 的渲染可能非常非常便宜的理解，这与创建或销毁可能变得昂贵的 HTML 节点完全不同。

他们（正如许多人所做的那样）错误地认为渲染正在重新创建 HTML DOM 树，但事实并非如此。

想象一下，在某个时候有人说我们的大部分组件都应该是 PureComponents。我们有数百个组件，所以这有点牵强！

我们的团队几乎从不使用 PureComponents 或 ReactMemo，但我们的大多数容器即使在重负载下也能很好地工作。

所以，回到这一点，是的，在我们对渲染进行昂贵计算的组件中，但最重要的是与 UX 高度耦合的组件，我们决定进行优化。对于日常的 Joe 和 Alice 组件，我们信任 React。

注意：另外，请注意React 的 Development Mode 比 Production 慢得多。当我在工作中提出一些页面运行缓慢的问题时，我感到很惊讶，并且基准测试是在开发模式下完成的！（这个问题没有再进一步，因为生产运行得非常好）。