非 React 使用者估计看了都要摇头啊。一个破回调函数的运用，居然能折腾出来这么多事。一大堆文章都在探讨如何使用它更合理。事实上确实如此，在 React 独特的单向数据流刷新机制下，对于 useCallback 认知的逐渐深入实际上也代表着对 React 本身这个机制的理解更进一步，因此在你彻底消化 React 刷新机制之前，这个过程中的每一个知识点可能都有巨大的探讨空间

前几天我的一位学生跟我探讨了一种 useCallback 的用法，他的想法是：当我们在封装开源工具库时，对自定义 hook 中暴露出来的钩子函数使用 useCallback 缓存。因为我们并不确定使用者是否需要一个引用稳定的钩子函数，他们有可能是需要的，因此用 useCallback 来包一层是有意义的。但是他并不确定这样的做法是否合适，是否具备较大的正向收益。

那么我就借着这个案例，来跟大家探讨一下，我们在 React 进阶的过程中，使用 useCallback 的四个阶段。

阶段一：敬畏

这个时候你还是一个初学者，对 React 的理解还不够深刻不够全面，但是常常看到文章，或者听别人说 useCallback 跟性能优化有关，可对于你而言，你并不是非常清楚它跟性能优化的具体关系在哪里，想知道，但不知道或者不够确定，因此对这个 hook api 有一种敬畏之心，各个论坛里对于 useCallback 的介绍很多很嘲杂，但你不敢随便用。

因此你很想去看看别人的代码里，useCallback 是怎么用的，是在什么场景下使用的，但是想要看到别人的代码也并不容易，因此你可能会在这个阶段徘徊。

阶段二：懂了

随着学习的深入，你逐渐开始深入理解了 React 的单向数据流机制，也对 React 的使用更加熟练，知道 React 经常会存在许多 re-render，你终于搞懂了 useCallback 的使用场景，它结合 React.memo 能够缓存组件，避免组件的冗余 re-render。

于是你在项目中大量的使用了他们，就像当初 PureComponent 一样，你恨不得每个函数都用 useCallback 套一层，以确保自己的项目能最大限度减少 re-render，从而达到一个极致的性能体验。

function App() {
  ...

  const clickHankler = useCallback(() => {
    ...
  }, [count])

  const onOpen = useCallback(() => {
    ...
  }, [])
  
  ...
}