17370845950

本文详解如何正确绑定和清理滚动事件监听器，防止因 `useeffect` 依赖项不当导致的重复渲染与动画重置问题，核心是使用 `useeffect` 的清理机制而非 `usememo`，并提供可直接运行的修复代码。

你的代码存在两个关键性误解：

1. useEffect 的依赖数组 [scrollPosition] 是问题根源 —— 每次 scrollPosition 更新都会触发 useEffect 重新执行 animator()，导致重复添加监听器（即使有 animating 标志也无法阻止）；
2. 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 (
    
      
当前滚动位置：{scrollPosition}px
      {/* 其他带动画的子组件 */}
    
  );
}

export default App;

? 关键要点说明：

• useEffect 的依赖数组必须为 []，确保监听器只注册一次；
• 使用 useRef 同步更新 scrollY 值，避免 handleScroll 内部闭包捕获过期的 scrollPosition（尤其当后续逻辑需基于滚动值做条件判断时）；
• { passive: true } 是性能必需项，防止滚动卡顿（现代浏览器强制要求）；
• 绝对不要将 scrollPosition 放入 useEffect 依赖项——它本就是滚动的响应结果，不是初始化条件。

⚠️ 额外提醒：若需在滚动中执行复杂动画（如视差、渐显），建议结合 requestAnimationFrame 节流，或使用 IntersectionObserver 替代 scroll 事件，以进一步提升性能与体验。

这样修改后，scrollPosition 仍会响应滚动更新，但组件不会因监听器重复绑定/解绑而意外重渲染，动画状态也能稳定保持。