本文详解如何通过正确管理事件监听器和状态更新，避免 react 组件因滚动事件频繁重渲染，尤其解决 `scrollposition` 变化导致动画重置的问题。核心在于仅在组件挂载时绑定一次滚动监听器，并确保 `useeffect` 不因无关依赖（如 `scrollposition`）重复执行。
你的代码存在两个关键问题：
- useEffect 依赖了 scrollPosition → 每次 setScrollPosition 触发后都会重新运行 animator()，导致重复添加监听器；
- animator 函数内部逻辑混乱：它试图用 animating 控制监听器，但该状态未被正确同步或用于防重绑定，且清理函数未被可靠执行。
✅ 正确做法是：将滚动监听器的绑定/解绑逻辑完全交由 useEffect 管理，且只在组件挂载/卸载时执行一次 —— 无需依赖 scrollPosition，更不需要 useMemo（原答案推荐的 useMemo 并不适用于此场景，它不能替代副作用管理）。
以下是优化后的完整实现：
import { useState, useEffect } from 'react';
function App() {
const [scrollPosition, setScrollPosition] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollPosition(window.scrollY);
};
// ✅ 仅在挂载时添加监听器，被动模式提升性能
window.addEventListener('scroll', handleScroll, { passive: true });
// ✅ 仅在卸载时移除监听器（cleanup 函数）
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []); // ? 空依赖数组：只执行一次
// ✅ scrollPosition 现在仅反映真实滚动位置，不会意外触发重渲染链
// 后续动画组件可基于该值做一次性初始化（例如配合 useRef + useEffect 判断首次变化）
return (
当前滚动位置: {scrollPosition}px
{/* 示例：动画组件可在此处使用 scrollPosition 做条件触发 */}
);
}
// 示例动画组件：仅在滚动超过阈值时触发一次入场动画
function AnimatedSection({ scrollY }: { scrollY: number }) {
const [isAnimated, setIsAnimated] = useState(false);
const hasAnimatedRef = React.useRef(false);
React.useEffect(() => {
if (!hasAnimatedRef.current && scrollY > 100) {
setIsAnimated(true);
hasAnimatedRef.current = true;
}
}, [scrollY]);
return (
✨ 这个区块仅在首次滚动过 100px 后动画进入
);
}
);
}? 关键要点总结：
- 永远不要把 scroll 监听器放在依赖 scrollPosition 的 useEffect 中 —— 它会导致无限循环或监听器堆积；
- 使用 [] 作为 useEffect 依赖数组，确保监听器生命周期与组件严格对齐；
- 对于“仅执行一次”的动画逻辑，用 useRef 标记状态（如 hasAnimatedRef），而非依赖 useState 触发重渲染；
- 始终启用 { passive: true }（现代浏览器默认支持），避免滚动卡顿；
- 若需节流/防抖滚动更新（如高频读取 scrollY），可结合 requestAnimationFrame 或 lodash.throttle，但本例中 setScrollPosition 本身已足够轻量。
这样修改后，scrollPosition 仍会实时更新，但组件不会因滚动反复重渲染，动画组件也能稳定保持状态，彻底解决“每次滚动都重置动画”的问题。
