未使用React.memo时useCallback的意义及相关搭配疑问

1. 未使用React.memo时，useCallback有什么意义？ #

其实useCallback的价值不止于优化子组件渲染——它最核心的作用是稳定函数的引用，这个特性在很多场景都能发挥作用：

• 当函数作为其他Hook的依赖项时：比如你有一个useEffect依赖这个函数，要是不用useCallback，父组件每次渲染都会生成一个新的函数实例，导致useEffect每次都重新执行，这完全是没必要的性能损耗。举个例子：

  useEffect(() => {
    // 每次父组件渲染，若fn是新引用，这个逻辑就会重复跑
    fetchData(fn);
  }, [fn])
  

  用useCallback包裹fn后，只要依赖数组不变，fn的引用就不会变，useEffect就能只在真正需要的时候执行。
• 与自定义Hook或状态管理库配合时：很多自定义Hook会依赖传入的函数引用保持稳定，或者像Redux这类库中，稳定的函数引用能避免一些意外的订阅更新或重复触发。

2. 不想子组件随父组件重渲染，必须用React.memo吗？ #

没错。React的默认行为是：父组件重渲染时，所有子组件都会无条件跟着重渲染，不管props有没有变化。React.memo的作用就是给子组件加一层浅比较逻辑——它会对比前后两次props的引用/值，如果没变化，就跳过子组件的重渲染。所以如果你的目标是让子组件不随父组件无意义重渲染，React.memo（类组件里的shouldComponentUpdate）是绕不开的。

3. useCallback必须始终和React.memo搭配吗？ #

当然不是。刚才说的第一个场景里，比如用useCallback稳定函数引用，避免useEffect、useMemo这类Hook重复执行，这时候完全不需要React.memo。只有当你想用useCallback来优化子组件渲染的时候，才需要配合React.memo——因为React.memo需要通过比较props的引用变化来决定是否重渲染，useCallback稳定了函数props的引用，才能让React.memo发挥作用。

回到你给出的代码例子：没加React.memo时，就算fn用了useCallback，父组件重渲染时Child还是会跟着重，因为React默认子组件会继承父组件的渲染触发；加了React.memo之后，它发现fn的引用没变化，就会跳过Child的重渲染，这才实现了预期的优化。

内容的提问来源于stack exchange，提问作者underfrankenwood