使用useRef钩子检测滚动导致子组件重复渲染的问题排查

是否为正常行为 #

是正常的：当你用useState控制回到顶部按钮的显示/隐藏时，状态变化会触发布局组件重渲染，而布局组件的子组件（即<route.component/>）默认会跟随父组件一起重渲染，这是React的默认渲染机制。

为什么useMemo没解决问题？ #

大概率是以下原因之一：

• 依赖项设置错误：包裹子组件时，useMemo的依赖项包含了每次重渲染都会变化的值（比如未缓存的函数、对象），导致useMemo每次都重新计算，子组件仍会重渲染。
• 子组件未做缓存：即使父组件用了useMemo，如果子组件是函数组件且未被React.memo包裹，父组件重渲染时子组件还是会重新执行（除非props完全无变化，但React.memo可以帮你做浅比较）。
• route.component引用不稳定：如果路由配置在每次父组件渲染时都会重新生成（比如在组件内部定义路由数组），route.component的引用会改变，useMemo无法有效缓存。

优化方案（让子组件仅渲染一次） #

方案1：用useRef代替useState控制按钮显示（最直接）

如果只是单纯控制按钮显示隐藏，不需要触发组件重渲染，直接用useRef存状态并手动操作DOM：

const Layout = () => {
  const pageContentRef = useRef(null);
  const topBtnRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = pageContentRef.current?.scrollTop || 0;
      // 直接操作DOM控制显示隐藏，无需useState
      if (topBtnRef.current) {
        topBtnRef.current.style.display = scrollTop > 500 ? 'block' : 'none';
      }
    };

    const contentEl = pageContentRef.current;
    contentEl?.addEventListener('scroll', handleScroll);
    return () => contentEl?.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      <div ref={pageContentRef} className="page-content">
        <route.component />
      </div>
      <button ref={topBtnRef} className="top-btn" style={{display: 'none'}}>回到顶部</button>
    </div>
  );
};

这种方式不会触发布局组件重渲染，子组件自然只会渲染一次。

方案2：子组件加缓存+正确使用useMemo

如果必须用useState（比如按钮显示隐藏需要和其他状态联动），可以这么做：

1. 用React.memo包裹子组件：

// 子组件文件
const ChildComponent = React.memo((props) => {
  // 子组件内容
});

2. 用useMemo缓存<route.component/>，确保依赖项稳定：

const Layout = () => {
  const [showTopBtn, setShowTopBtn] = useState(false);
  const pageContentRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = pageContentRef.current?.scrollTop || 0;
      setShowTopBtn(scrollTop > 500);
    };

    const contentEl = pageContentRef.current;
    contentEl?.addEventListener('scroll', handleScroll);
    return () => contentEl?.removeEventListener('scroll', handleScroll);
  }, []);

  // 缓存子组件，依赖项设为route.component（若路由配置全局稳定）
  const MemoizedChild = useMemo(() => route.component, [route.component]);

  return (
    <div>
      <div ref={pageContentRef} className="page-content">
        <MemoizedChild />
      </div>
      {showTopBtn && <button>回到顶部</button>}
    </div>
  );
};

3. 额外注意：如果子组件接收的props包含函数、对象，要先用useCallback、useMemo缓存这些props，避免因props引用变化导致子组件重渲染。

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