useCallback：依赖项与参数的区别及非空依赖列表的适用场景问询

嘿，这个问题问得太戳痛点了！我刚啃React Hooks的时候也对着这两种写法懵了好久，总觉得“不都是用个值吗，有啥不一样？”，直到踩了几次坑才搞明白，咱们慢慢唠～

首先说你好奇的功能差异场景，确实在你给出的同步调用例子里，两者看起来没区别，但一旦涉及到「函数不是你立刻调用，而是在未来某个时机触发」或者「函数需要传递给外部组件/模块」时，差异就非常明显了：

1. 异步/延迟执行的场景 #

比如用定时器、防抖节流，或者事件监听这类需要在未来执行的回调：

• 你的写法a（依赖项）：

const [count, setCount] = useState(0);
const logCount = useCallback(() => {
  console.log(count);
}, [count]);

useEffect(() => {
  // 每次count变化，logCount更新，定时器会拿到最新的count
  const timer = setTimeout(logCount, 3000);
  return () => clearTimeout(timer);
}, [logCount]);

<button onClick={() => setCount(prev => prev + 1)}>点我加1</button>

这里你每点一次按钮，count变化，logCount的引用也会更新，useEffect会重新执行，定时器里的logCount能捕获到最新的count值——3秒后打印的是你最后一次点击后的count。

• 你的写法b（参数）：

const [count, setCount] = useState(0);
const logCount = useCallback((num) => {
  console.log(num);
}, []);

useEffect(() => {
  // 这里依赖是空数组，只会在组件挂载时执行一次
  const timer = setTimeout(() => logCount(count), 3000);
  return () => clearTimeout(timer);
}, []);

<button onClick={() => setCount(prev => prev + 1)}>点我加1</button>

这个写法里，useEffect只会在组件第一次渲染时执行，定时器回调捕获的是挂载时的count值（也就是0），哪怕你在3秒内点N次按钮把count加到10，3秒后打印的还是0——因为定时器里的count是闭包捕获的旧值，而logCount本身不知道最新的count是啥，除非你能在执行时把最新值传进去，但异步场景下你没法保证能拿到这个值。

2. 传递给子组件的场景 #

假设你有个用React.memo包裹的子组件（用来避免不必要的重渲染），子组件需要一个点击回调，但它不知道父组件的s值：

• 写法a（依赖项）：

const [s, setS] = useState(0);
const f = useCallback(() => {
  console.log(s);
}, [s]);

// 直接把f传给子组件
<MemoizedChild onClick={f} />

这里每次s变化，f的引用会更新，子组件会因为props变化重新渲染，但好处是子组件调用onClick时，能直接拿到最新的s值，不用额外传props。

• 写法b（参数）：
  如果想用写法b，你要么得把s也传给子组件当props，让子组件调用onClick时把s传回来：

const [s, setS] = useState(0);
const f = useCallback((sVal) => {
  console.log(sVal);
}, []);

// 既要传回调，也要传s
<MemoizedChild onClick={f} s={s} />

要么就在父组件里用箭头函数包裹，把s绑进去：

<MemoizedChild onClick={() => f(s)} />

但第二种包裹的写法会每次父组件渲染都生成新的箭头函数引用，直接导致React.memo的优化失效，子组件还是会每次都重渲染——这时候写法a的非空依赖列表反而更靠谱，至少能保证回调里的值是对的，虽然会触发子组件重渲染，但总比拿到旧值好。

然后说你问的什么时候需要非空依赖列表的useCallback：
其实核心就是「当你的回调函数需要始终持有最新的状态/ props引用，并且你没法在调用时把这些值作为参数传递」的场景：

• 异步回调：比如定时器、网络请求的成功/失败回调，需要拿到最新的组件状态；
• 事件监听：比如给window、document绑定的scroll/resize事件，回调里需要用到组件的最新状态；
• 作为其他Hooks的依赖：比如你的useCallback包裹的函数，被用在useEffect或者useMemo的依赖列表里，你需要它只在依赖变化时更新，避免不必要的重复执行；
• 无法传递参数的回调：比如一些第三方组件的回调，只接受无参函数，这时候你只能把依赖项放进useCallback的依赖列表里，保证函数内部能拿到最新值。

最后补充一句你提到的“写法b更优”的点：没错，当你能轻松把依赖值作为参数传递，并且调用时机完全由你控制时，写法b的空依赖列表确实更优，因为函数引用稳定，能避免很多不必要的重渲染。但现实场景里，不是所有情况都能这么干，这时候非空依赖列表的useCallback就派上用场了。

备注：内容来源于stack exchange，提问作者takiakos76