为何useState初始值始终被动作处理函数捕获？React闭包疑问

问题背景 #

我需要为视图添加滚动事件监听器，获取当前滚动偏移量并与先前值对比执行操作，编写代码如下：

const StickyBox = () => {
  const [offset, setOffset] = useState(500); // 初始偏移量
  const handleScroll = () => {
    const scrollY = window.scrollY || window.pageYOffset;
    console.log(offset);  // 始终输出500！
    setOffset(scrollY);    
    if (scrollY > offset) { ... }
  }
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => { window.removeEventListener('scroll', handleScroll); }
  }, []);

  return <div className="...">{offset}</div>
}

我知道正确做法是在setOffset参数中通过函数获取先前状态：

setOffset((prev) => {
  if (scrollY > prev) {...}
})

但仍不理解JavaScript闭包与React useState的工作机制，目前观察到：

• useEffect依赖项为[]，仅执行一次。滚动视图时会调用handleScroll与setOffset。
• 调用setOffset后组件重渲染，即StickyBox函数重新执行，handleScroll函数对象被重新创建。

核心问题 #

1. handleScroll函数会捕获offset变量，而useState应记住先前渲染的值，为何console.log始终输出初始值500？
2. 每次渲染都会创建handleScroll，但useEffect仅执行一次，事件监听器是否在生命周期内始终调用初始的handleScroll函数？这种函数重复创建是否为最佳实践？或是因函数为堆内存引用类型，每次重新创建的仅是指向同一堆内存的新栈变量？

问题解答 #

问题1解答 #

这是闭包的捕获特性直接导致的：

• 组件首次渲染时，useEffect因依赖[]仅执行一次，此时绑定的handleScroll是首次渲染生成的函数实例。
• 这个初始的handleScroll会捕获当前渲染周期里的offset变量——也就是初始状态值500。
• 组件后续重渲染时，虽然会生成新的handleScroll函数、新的offset变量（对应更新后的状态快照），但事件监听器绑定的始终是第一次的handleScroll，它捕获的还是最初的offset变量，所以每次打印都是500。
• 注意：useState的状态是存储在React组件实例中的，和每次渲染时的offset变量不是同一个东西——每次重渲染的offset都是当前状态的独立快照，旧的handleScroll无法访问到新的快照。

问题2解答 #

事件监听器调用的函数

是的，事件监听器全程调用的都是首次渲染时创建的handleScroll函数。

• 因为useEffect只执行一次，绑定的是第一次渲染产生的handleScroll引用。后续重渲染创建的handleScroll都是全新的函数对象（堆内存中的新实例），但这些新函数从未被绑定到事件监听上，所以永远不会被触发。

函数重复创建的最佳实践

• 这种每次渲染都创建新函数的做法不是最佳实践，会产生不必要的内存开销（每次生成新的函数实例），如果该函数作为props传递给子组件，还可能触发子组件的不必要重渲染。
• 优化方案：使用useCallback钩子缓存handleScroll函数，将其依赖项（如果有的话）加入依赖数组，同时更新useEffect的依赖项为[handleScroll]，这样当依赖变化时，useEffect会重新绑定最新的函数，确保能获取到最新的状态：

const handleScroll = useCallback(() => {
  const scrollY = window.scrollY || window.pageYOffset;
  setOffset(prev => {
    if (scrollY > prev) { 
      // 执行你的操作
    }
    return scrollY;
  });
}, []); // 若无需其他依赖，此处保持空数组

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => { window.removeEventListener('scroll', handleScroll); }
}, [handleScroll]);

• 补充说明：每次创建的handleScroll都是完全独立的函数对象，并非指向同一堆内存的新栈变量——函数属于引用类型，每次声明都会在堆内存中生成新的实例，栈中的变量只是指向这个新实例的指针。

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