React useEffect绑定mousewheel事件的正确实现方案咨询

解决方法：使用函数式setState避免闭包陷阱 #

你的问题核心在于闭包捕获了旧的state值，同时又想保持事件监听只订阅一次。最优雅的解决方案是利用React的函数式更新特性，这样既不需要在effect依赖中加入state.scrollTop，也能每次拿到最新的state值。

直接上可行的代码：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [state, setState] = useState({ scrollTop: 0 });

  useEffect(function subscribeToWheelEvent() {
    const updateScroll = function(e) {
      if (e.deltaY) { // 简化判断，非零值直接进入逻辑
        const delta = Math.sign(e.deltaY) * 10.0;
        // 使用函数式更新，接收最新的prevState作为参数
        setState(prevState => {
          const val = Math.max(0, prevState.scrollTop + delta);
          console.log(delta, val);
          return { scrollTop: val };
        });
      } else {
        console.log('zero deltaY', e.deltaY);
      }
    };

    window.addEventListener('mousewheel', updateScroll);
    console.log('subscribed to mousewheel event');

    // 清理函数：组件卸载时取消订阅
    return function cleanup() {
      window.removeEventListener('mousewheel', updateScroll);
      console.log('unsubscribed from mousewheel event');
    };
  }, []); // 依赖数组为空，仅在组件挂载/卸载时执行一次

  // 渲染逻辑示例
  return <div>当前滚动值：{state.scrollTop}</div>;
}

为什么这个方案有效？ #

1. 函数式更新规避闭包问题
   当你使用setState(prevState => ...)时，React会自动把当前最新的state值作为参数传入这个函数，完全避免了闭包捕获旧state的问题。不管事件监听订阅了多久，每次触发时都能拿到最新的scrollTop值。

2. 仅订阅一次事件
   effect的依赖数组是空的，意味着这个effect只会在组件挂载时执行一次（添加监听），组件卸载时执行清理函数（移除监听），完全符合你“仅订阅一次”的需求。

3. 符合Hooks依赖检查规则
   这里effect内部没有引用任何外部的可变值（setState是React提供的稳定函数，不需要加入依赖），所以ESLint的Hooks规则不会报错，不需要禁用任何默认规则。

为什么之前的方案有问题？ #

• 原始代码的闭包陷阱：因为effect只执行一次，updateScroll函数捕获的是初始的state（scrollTop:0），所以每次计算都是0 + delta，导致值在0和10之间反复横跳。
• 添加state.scrollTop到依赖：会导致每次scrollTop变化时，effect重新执行，也就是反复添加/移除事件监听，不符合“仅订阅一次”的要求。
• useCallback包裹updateScroll：同样会因为state.scrollTop变化导致updateScroll重新创建，进而触发effect重复执行，还是会频繁订阅/取消监听。

这个方案完美解决了所有问题，既满足功能需求，又符合React Hooks的最佳实践。

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