React中scrollProgress频繁变化时，useEffect内条件函数仅执行一次的最优方案

核心思路 #

用单个状态变量记录已触发的阈值区间，避免为每个函数单独维护hasCalled状态。通过判断当前scrollProgress所在区间，结合已触发记录，控制函数只执行一次。

具体实现步骤 #

• 定义区间配置：把每个阈值区间和对应的触发函数整理成配置数组，方便统一管理。
• 维护已触发区间的状态：用useState创建一个集合，存储已经触发过的区间标识。
• 在useEffect中判断执行：每次scrollProgress变化时，找到当前所在的区间，若该区间未被触发过，则执行对应函数，并将区间标记为已触发。

代码示例 #

import { useEffect, useState } from 'react';

const YourScrollyComponent = ({ scrollProgress }) => {
  // 用Set存储已触发的区间标识，避免重复触发
  const [triggeredIntervals, setTriggeredIntervals] = useState(new Set());

  // 统一管理所有区间配置：key为区间唯一标识，range是阈值范围，action是触发函数
  const intervalConfigs = [
    {
      key: 'draw-arrow',
      range: [0.5, 0.7],
      action: () => {
        // 这里写绘制箭头的逻辑，仅触发一次
        console.log('绘制箭头');
      }
    },
    {
      key: 'update-chart',
      range: [0.7, 0.9],
      action: () => {
        console.log('更新图表');
      }
    }
    // 可继续添加更多区间配置
  ];

  useEffect(() => {
    // 首次渲染直接跳过，避免初始状态误触发
    if (scrollProgress === 0) return;

    // 匹配当前scrollProgress对应的区间
    const matchedInterval = intervalConfigs.find(config => {
      const [min, max] = config.range;
      return scrollProgress > min && scrollProgress < max;
    });

    if (matchedInterval && !triggeredIntervals.has(matchedInterval.key)) {
      // 执行目标函数
      matchedInterval.action();
      // 将区间标记为已触发
      setTriggeredIntervals(prev => new Set([...prev, matchedInterval.key]));
    }
  }, [scrollProgress, triggeredIntervals, intervalConfigs]);

  return (
    <div className="scrolly-container">
      {/* 你的SVG或滚动叙事内容 */}
    </div>
  );
};

export default YourScrollyComponent;

额外优化点 #

• 若需要支持回滚后重新触发：可以监听scrollProgress离开区间的动作，将对应区间标识从triggeredIntervals中移除，比如当scrollProgress小于区间最小值或大于最大值时，删除该区间的key。
• 防抖scrollProgress：如果scrollProgress更新过于频繁，可在父组件对其做防抖处理，减少不必要的判断逻辑执行。

内容的提问来源于stack exchange，提问作者MarcelausZell