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

根据 docs ，

传递内联回调和一系列依赖项。 useCallback将返回回调的记忆版本，仅在其中一个依赖项已更改时才更改。在将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染（例如，shouldComponentUpdate）时，这很有用。

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

在您的示例中，您没有传递任何依赖关系。因此，它与简单功能非常相似，但具有额外的包装层。

您可以将命名函数或内联函数用于处理程序。使用哪种方法属于个人观点，但是我更喜欢使用命名函数，因为它可以使JSX保持整洁并具有可重用性。

参考文献：

React’s useCallback and useMemo Hooks By Example

Answer 2

要添加到Rajesh的出色答案中，实际上可以归结为需要对子组件进行多少优化。

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

React Re-render！= DOM Re-render

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

事实上，Facebook is not so interested in bringing highlights back正是由于我所说的困惑。

在我们公司中，也有一些开发人员认为某些组件的渲染是瓶颈（在我看来，这是他们在错误的位置查看）。

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

他们（就像很多人一样）错误地认为渲染器正在重新创建HTML DOM树，并非如此。

想象一下，有人说我们的大多数组件应该是PureComponents。我们有数百个组件，所以有点麻烦了！

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

因此，可以说，是的，在我们要对渲染执行昂贵计算的组件中，但最重要的是，这些组件与UX高度耦合，因此我们决定进行优化。对于日常的Joe和Alice组件，我们相信React。

注意：另外，请注意React's Development Mode is considerably slower than Production。当我在工作中被提出某个页面运行缓慢的问题时，我感到惊讶，而基准测试是在开发模式下完成的！（由于Production的运行正常，该问题并没有解决。）

useCallback与简单函数

2 个答案:

参考文献：

React Re-render！= DOM Re-render