React中useCallback空依赖用法与组件外定义函数的区别及可行性问询

这个方案是完全可行的，在符合适用条件的场景下，甚至比滥用useCallback的写法更简洁易维护。

核心原理 #

React官方已经保证了useState返回的setState函数的引用是永久稳定的，不会随着组件重渲染发生变化。你把函数定义在组件外部，本身就具备全局唯一的稳定引用，完全可以达到useCallback缓存函数引用、避免子组件不必要重渲染的效果。

方案优势 #

• 省去了useCallback的hooks调用和依赖项比对开销，也从根源上避免了useCallback依赖项漏写导致的闭包陷阱问题
• 抽离到外部的公共逻辑可以在多个组件之间复用，减少重复代码
• 代码逻辑分层更清晰，纯业务逻辑和组件渲染逻辑拆分更明确

适用边界和注意事项 #

• 仅适合逻辑可以完全抽离、仅依赖传入参数的场景：如果函数需要用到组件内部的多个状态、props或ref，逐个传参会让代码变得非常繁琐，这种场景还是更适合用useCallback
• 外部函数不能依赖任何组件内部的闭包变量，所有需要用到的值都必须通过参数显式传入
• 如果需要传入的参数除了setState之外还有其他经常变化的变量，这个方案的优势就会消失，反而可能带来额外的参数传递负担

可选优化写法 #

如果不想每次调用都手动传入setState，也可以在组件内用bind固定参数，得到的函数引用依然是稳定的：

// 组件内部
const fn = someOtherFn.bind(null, setState);

这个写法和useCallback(someOtherFn, [])的效果完全一致，还不需要维护依赖项。

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