React实现Card组件内滚动隐藏元素及解决过多重渲染问题

原代码的问题在于，每次滚动事件触发都会调用setScrolling(true)，哪怕scrolling已经是true状态，这会触发不必要的组件重渲染，最终导致“Too many re-renders”错误。以下是两种针对性的解决方案：

方案一：滚动后永久隐藏元素 #

如果需求是用户只要滚动过一次，就永久隐藏目标元素，只需在更新状态前判断当前值，避免重复触发：

const [scrolling, setScrolling] = useState(false);

const handleScroll = () => {
  // 仅当状态为false时才更新，避免无效重渲染
  if (!scrolling) {
    setScrolling(true);
  }
};

return (
  <Card onScroll={handleScroll}>
    {!scrolling && <p> hide me on scroll </p>}
  </Card>
);

方案二：滚动时隐藏，停止滚动后自动显示 #

如果需要滚动过程中隐藏元素，停止滚动一段时间后重新显示（更符合常见交互场景），可以结合定时器和useRef实现：

import { useState, useRef, useEffect } from 'react';

const [isHidden, setIsHidden] = useState(false);
const scrollTimeoutRef = useRef(null);

const handleScroll = () => {
  // 滚动开始时立即隐藏元素
  setIsHidden(true);
  
  // 清除之前的定时器，避免重复触发
  if (scrollTimeoutRef.current) {
    clearTimeout(scrollTimeoutRef.current);
  }
  
  // 设置定时器，停止滚动1秒后恢复显示（可根据需求调整时间）
  scrollTimeoutRef.current = setTimeout(() => {
    setIsHidden(false);
  }, 1000);
};

// 组件卸载时清除定时器，防止内存泄漏
useEffect(() => {
  return () => {
    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }
  };
}, []);

return (
  <Card onScroll={handleScroll}>
    {!isHidden && <p> hide me on scroll </p>}
  </Card>
);

关键优化点 #

• 避免无意义的状态更新：只有当状态确实需要改变时才调用setState，减少不必要的重渲染。
• 定时器管理：使用useRef保存定时器引用，确保滚动停止时能正确清除旧定时器，避免内存泄漏和逻辑混乱。

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