楼主代码大概是 Effect 异步顺序导致旧渲染帧的 Effect 后执行了。
楼上那篇超长博文很有价值阅读。
监听器一般只设置一次。


https://codesandbox.io/s/fervent-taussig-x3mdkq?file=/src/App.jsx

```
import { useEffect, useState, useRef, useCallback } from "react";

import "./styles.css";

const useWheel = (divRef, count, setCount) => {
const countRef = useRef(0);
countRef.current = count; // 每次 count 变化存入所有渲染帧共享的空间

const callback = useCallback(
// cb 的闭包被冻结，但可以通过所有渲染帧共享的 ref 获取变化
(ev) => {
ev.preventDefault();
setCount(countRef.current + Math.floor(Math.abs(ev.deltaY / 5)));
},
[setCount]
);

useEffect(() => {
const el = divRef.current; // useEffect 是协调之后异步触发，此时 divRef 必然已被填充
if (!el) return; // 除非该节点渲染错误
el.addEventListener("wheel", callback, { passive: false }); // 仅设置一次监听器
return () => el.removeEventListener("wheel", callback); // 仅取消一次监听器
}, [divRef, callback]);
};

export const Main = (props) => {
let [count, setCount] = useState(0);
let divs = new Array(25000)
.fill(0)
.map((v, i) => <div key={i + count}>{i + count}</div>);

const refDiv = useRef(null);
useWheel(refDiv, count, setCount); // ref 作为参数传入语义上更好
return <div ref={refDiv}>{divs}</div>;
};

export default function App() {
return (
<div className="App">
<Main />
</div>
);
}
```