如何防止滚动时重复触发页面渲染？

本文详解如何通过正确管理事件监听器和状态更新，避免 react 组件因滚动事件频繁重渲染，尤其解决 `scrollposition` 变化导致动画重置的问题。核心在于仅在组件挂载时绑定一次滚动监听器，并确保 `useeffect` 不因无关依赖（如 `scrollposition`）重复执行。

你的代码存在两个关键问题：

1. useEffect 依赖了 scrollPosition → 每次 setScrollPosition 触发后都会重新运行 animator()，导致重复添加监听器；
2. animator 函数内部逻辑混乱：它试图用 animating 控制监听器，但该状态未被正确同步或用于防重绑定，且清理函数未被可靠执行。

✅ 正确做法是：将滚动监听器的绑定/解绑逻辑完全交由 useEffect 管理，且只在组件挂载/卸载时执行一次 —— 无需依赖 scrollPosition，更不需要 useMemo（原答案推荐的 useMemo 并不适用于此场景，它不能替代副作用管理）。

以下是优化后的完整实现：

FlowIn

AI 时代下的内容共创平台，借助 FlowIn AI 撰写与改写内容十分便利。

下载

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 仍会实时更新，但组件不会因滚动反复重渲染，动画组件也能稳定保持状态，彻底解决“每次滚动都重置动画”的问题。