React弹窗组件定时重渲染异常：限制5次却重渲染10次

原代码的核心问题 #

1. 存储介质不符合需求：要求用sessionStorage，但代码中误用了localStorage，两者生命周期不同，无法满足会话级别的存储要求。
2. 计数器状态不同步：counter用let声明，每次组件重渲染都会重新从存储读取值，修改时直接操作变量导致组件内部状态与存储值不一致，逻辑混乱。
3. 重渲染次数翻倍：每次弹窗的「关闭（setVisible(false)）」和「重新打开（setVisible(true)）」各触发一次重渲染，5次循环就会产生10次重渲染。
4. 缺少滚动触发逻辑：初始visible设为true，没有监听页面滚动事件，不符合「首次向下滚动时弹出」的需求。
5. 定时器清理无效：closeModal里返回的清理函数不会被React执行，定时器可能无法正确清理，导致意外弹窗。

修复后的代码实现 #

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

function App() {
  const [visible, setVisible] = useState(false);
  const [counter, setCounter] = useState(() => {
    // 从sessionStorage初始化计数器，不存在则设为0
    const stored = sessionStorage.getItem('modalCounter');
    return stored ? parseInt(stored, 10) : 0;
  });
  const hasScrolled = useRef(false);
  const timerRef = useRef(null);

  // 监听页面滚动，首次滚动时触发弹窗（未达次数限制时）
  useEffect(() => {
    const handleScroll = () => {
      if (!hasScrolled.current && counter < 5) {
        hasScrolled.current = true;
        setVisible(true);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [counter]);

  // 同步计数器到sessionStorage
  useEffect(() => {
    sessionStorage.setItem('modalCounter', counter.toString());
  }, [counter]);

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => {
      timerRef.current && clearTimeout(timerRef.current);
    };
  }, []);

  const closeModal = () => {
    setVisible(false);
    if (counter < 5) {
      timerRef.current = setTimeout(() => {
        setCounter(prev => {
          const newCount = prev + 1;
          // 只有次数未达上限时才重新打开弹窗
          newCount < 5 && setVisible(true);
          return newCount;
        });
      }, 60000);
    }
  };

  console.count('组件重渲染');

  return (
    <>
      {visible && (
        <div className="con" onClick={closeModal}>
          弹窗内容 {counter + 1}/5
        </div>
      )}
    </>
  );
}

export default App;

修复说明 #

• 计数器状态管理：用useState管理counter，初始化时从sessionStorage读取，每次更新时通过useEffect同步到存储，确保组件状态与存储值一致。
• 滚动触发逻辑：用useRef标记是否已触发首次滚动，监听滚动事件，满足「首次向下滚动弹出」的需求。
• 重渲染优化：调整定时器逻辑，在更新计数器的同时判断是否需要打开弹窗，减少不必要的状态切换，将重渲染次数控制在5次以内。
• 定时器清理：用useRef存储定时器ID，组件卸载时清理，避免内存泄漏。
• 次数控制：当计数器达到5时，不再触发后续弹窗，符合「最多展示5次」的要求。

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