为滚动元素添加滚动事件监听器致页面卡顿，求优化方案

1. 精简Context状态，只传递必要的布尔值 #

你当前的Context存储了完整的scrollTop数值，但实际只需要判断是否滚动过（scrollTop > 0）。把Context的状态改成布尔值isScrolled，只有当滚动状态切换时才更新Context，避免每次滚动都触发状态更新：

修改AppContext的状态定义

// 假设你的Context Provider是这样的
const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [isScrolled, setIsScrolled] = useState(false);
  return (
    <AppContext.Provider value={{ isScrolled, setIsScrolled }}>
      {children}
    </AppContext.Provider>
  );
};

MyComponent.jsx修改

const MyComponent = () => {
  const { setIsScrolled } = useContext(AppContext);

  const handleScroll = useCallback((div) => {
    const currentIsScrolled = div.scrollTop > 0;
    // 只有状态变化时才更新，避免不必要的Context更新
    setIsScrolled(prev => {
      if (prev !== currentIsScrolled) return currentIsScrolled;
      return prev;
    });
  }, []);

  useEffect(() => {
    const scrollableElement = document.getElementsByClassName('scrollItem')[0];
    scrollableElement.addEventListener('scroll', () => handleScroll(scrollableElement));
    
    // 清理监听器，避免内存泄漏
    return () => {
      scrollableElement.removeEventListener('scroll', () => handleScroll(scrollableElement));
    };
  }, [handleScroll]);

  return (/* 组件内容 */);
};

NavBar.jsx修改

const NavBar = () => {
  const { isScrolled } = useContext(AppContext);
  return (
    <div style={{ minHeight: isScrolled ? '5vh' : '20vh' }}>
      {/* 导航栏内容 */}
    </div>
  );
};

2. 给滚动事件加防抖 #

滚动事件触发频率极高，用防抖函数限制状态更新的频率，进一步减少不必要的Context更新：

// 定义防抖工具函数
const debounce = (func, delay = 100) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

const MyComponent = () => {
  const { setIsScrolled } = useContext(AppContext);

  const handleScroll = useCallback((div) => {
    const currentIsScrolled = div.scrollTop > 0;
    setIsScrolled(prev => prev !== currentIsScrolled ? currentIsScrolled : prev);
  }, []);

  // 用防抖包裹滚动处理函数
  const debouncedHandleScroll = useCallback(debounce(handleScroll), [handleScroll]);

  useEffect(() => {
    const scrollableElement = document.getElementsByClassName('scrollItem')[0];
    scrollableElement.addEventListener('scroll', () => debouncedHandleScroll(scrollableElement));
    
    return () => {
      scrollableElement.removeEventListener('scroll', () => debouncedHandleScroll(scrollableElement));
    };
  }, [debouncedHandleScroll]);

  return (/* 组件内容 */);
};

3. 用React.memo包裹NavBar组件 #

防止其他Context变化导致NavBar不必要的重渲染，只有当isScrolled状态变化时才触发重渲染：

const NavBar = React.memo(() => {
  const { isScrolled } = useContext(AppContext);
  return (
    <div style={{ minHeight: isScrolled ? '5vh' : '20vh' }}>
      {/* 导航栏内容 */}
    </div>
  );
});

4. 让NavBar直接监听滚动（跳过Context） #

如果只有NavBar需要这个滚动状态，可以让NavBar自己监听滚动元素，直接管理内部状态，完全避免Context的全局重渲染：

const NavBar = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const scrollableElement = document.getElementsByClassName('scrollItem')[0];
    const handleScroll = () => {
      setIsScrolled(scrollableElement.scrollTop > 0);
    };
    scrollableElement.addEventListener('scroll', handleScroll);
    
    // 初始化时判断一次滚动状态
    handleScroll();

    return () => {
      scrollableElement.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ minHeight: isScrolled ? '5vh' : '20vh' }}>
      {/* 导航栏内容 */}
    </div>
  );
};

这个方案是最轻量化的，状态仅在NavBar内部管理，不会触发任何全局重渲染。

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