React中矩阵雨效果SetInterval无法停止问题求助

问题重现 #

开发矩阵主题博客时，通过Store的displayMatrix状态控制Canvas矩阵雨背景的显示/隐藏：displayMatrix=true时启动矩阵雨，false时停止。使用setInterval调用draw函数实现绘制逻辑，但遇到以下问题：

• 将displayMatrix从true切换为false后，setInterval仍持续运行，控制台未输出预期的id being cleared => #日志
• PlayCode沙箱中状态切换后日志会停止，但本地VS Code环境下run matrix rain drawing code日志会持续输出直至内存耗尽
• 采用React内置的useReducer/useContext替代Redux管理状态

核心原因分析 #

1. 定时器ID引用丢失：组件重新渲染时，定时器ID的变量被重新初始化，导致清除时拿到的是无效值
2. 闭包陷阱：React渲染周期中，状态更新后的清除逻辑可能捕获的是旧的定时器ID闭包
3. 状态响应不及时：useContext的状态更新后，组件未触发对应的清除逻辑执行

解决方案 #

方案1：用useRef稳定存储定时器ID #

useRef的值在组件生命周期内保持唯一引用，不会因重新渲染而丢失，适合存储定时器ID：

import { useRef, useEffect, useContext } from 'react';
import { StoreContext } from './你的Store路径';

function MatrixRainCanvas() {
  const { state } = useContext(StoreContext);
  const intervalRef = useRef(null); // 用useRef存定时器ID

  useEffect(() => {
    if (state.displayMatrix) {
      // 启动矩阵雨定时器
      intervalRef.current = setInterval(() => {
        console.log('run matrix rain drawing code');
        draw(); // 你的Canvas绘制函数
      }, 100);
    } else {
      // 清除定时器
      if (intervalRef.current) {
        console.log(`id being cleared => ${intervalRef.current}`);
        clearInterval(intervalRef.current);
        intervalRef.current = null; // 重置引用，避免重复清除
      }
    }

    // 组件卸载时强制清除定时器，防止内存泄漏
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [state.displayMatrix]); // 依赖项绑定displayMatrix，状态变化时触发effect

  return <canvas id="matrix-bg"></canvas>;
}

方案2：在useReducer中统一管理定时器生命周期 #

如果矩阵雨的启动/清除逻辑耦合在Store中，可以将定时器ID存入状态，在reducer中同步处理：

// Store的reducer函数
function appReducer(state, action) {
  switch (action.type) {
    case 'TOGGLE_MATRIX':
      const shouldEnable = action.payload;
      if (shouldEnable) {
        // 启动定时器并将ID存入状态
        const intervalId = setInterval(() => {
          console.log('run matrix rain drawing code');
          draw();
        }, 100);
        return { ...state, displayMatrix: true, matrixIntervalId: intervalId };
      } else {
        // 清除定时器并重置ID
        if (state.matrixIntervalId) {
          console.log(`id being cleared => ${state.matrixIntervalId}`);
          clearInterval(state.matrixIntervalId);
        }
        return { ...state, displayMatrix: false, matrixIntervalId: null };
      }
    default:
      return state;
  }
}

在组件中触发切换时，只需调用dispatch({ type: 'TOGGLE_MATRIX', payload: false })即可。

关键注意事项 #

• 避免在定时器内部直接依赖组件状态，如需依赖请用useRef或useCallback包裹，防止闭包导致的旧值引用
• 必须在组件卸载时清除定时器，避免内存泄漏
• 本地环境因热重载、渲染次数更多，闭包问题会更明显，务必保证定时器ID的引用稳定

内容的提问来源于stack exchange，提问作者Q-man