本文详解如何正确绑定和清理滚动事件监听器，防止因 `useeffect` 依赖项不当导致的重复渲染与动画重置问题，核心是使用 `useeffect` 的清理机制而非 `usememo`，并提供可直接运行的修复代码。
你的代码存在两个关键性误解：
- useEffect 的依赖数组 [scrollPosition] 是问题根源 —— 每次 scrollPosition 更新都会触发 useEffect 重新执行 animator()，导致重复添加监听器（即使有 animating 标志也无法阻止）；
- useMemo 并非解决方案 —— 它用于缓存计算值，无法控制副作用生命周期，视频推荐在此场景下并不适用（且链接未提供实质逻辑）。
✅ 正确做法是：将滚动监听器作为一次性副作用初始化，并在组件卸载时清理。scrollPosition 不应出现在依赖项中，而应通过闭包或 ref 在回调中安全读取最新值。
以下是修复后的专业实现：
import { useState, useEffect, useRef } from 'react';
function App() {
const [scrollPosition, setScrollPosition] = useState(0);
const scrollRef = useRef(0); // 持久化最新 scrollY，避免闭包 stale
useEffect(() => {
const handleScroll = () => {
const position = window.scrollY;
scrollRef.current = position;
setScrollPosition(position);
};
// ✅ 仅在挂载时添加监听器，卸载时自动清理
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []); // ? 空依赖数组：只运行一次
// 示例：动画组件可根据 scrollPosition 稳定触发，不再重置
return (
<div style={{ height: '200vh', padding: '2rem' }}>
<h2>当前滚动位置：{scrollPosition}px</h2>
{/* 其他带动画的子组件 */}
</div>
);
}
export default App;? 关键要点说明：
- useEffect 的依赖数组必须为 []，确保监听器只注册一次；
- 使用 useRef 同步更新 scrollY 值，避免 handleScroll 内部闭包捕获过期的 scrollPosition（尤其当后续逻辑需基于滚动值做条件判断时）；
- { passive: true } 是性能必需项，防止滚动卡顿（现代浏览器强制要求）；
- 绝对不要将 scrollPosition 放入 useEffect 依赖项——它本就是滚动的响应结果，不是初始化条件。
⚠️ 额外提醒：若需在滚动中执行复杂动画（如视差、渐显），建议结合 requestAnimationFrame 节流，或使用 IntersectionObserver 替代 scroll 事件，以进一步提升性能与体验。
这样修改后，scrollPosition 仍会响应滚动更新，但组件不会因监听器重复绑定/解绑而意外重渲染，动画状态也能稳定保持。
