React使用setInterval生成随机数据运行一段时间后速率异常如何解决

问题根因 #

• 你在组件渲染逻辑里直接声明setInterval，每次组件状态更新触发重渲染时，都会创建新的定时器实例，旧的定时器没有被清理，就会出现定时器越积越多、执行频率指数级上涨的问题
• 你的setPktD连续两次更新都直接引用了当前渲染周期的旧pktD变量，第二次更新会覆盖第一次的修改，最终只会生效peakVal的更新
• 自定义Hook里你没有内置定时器逻辑，外部调用时机不受控也会导致执行间隔紊乱

修复后的App组件实现 #

import { useState, useEffect } from 'react';

function App() {
  const [pktD, setPktD] = useState({
    chid: 0,
    peakVal: 0,
  });

  useEffect(() => {
    // 定时器写在useEffect里，只会在组件挂载时初始化一次
    const timer = setInterval(() => {
      // 用函数式更新拿到最新的state，避免闭包问题，同时一次更新两个属性
      setPktD(prev => ({
        ...prev,
        chid: Math.random() * 253,
        peakVal: Math.random() * 10000
      }));
    }, 1000); // 按需求设置为1秒间隔

    // 组件卸载时清理定时器，避免内存泄漏和重复执行
    return () => clearInterval(timer);
  }, []); // 空依赖数组保证逻辑只执行一次

  console.log(pktD);
  return <></>;
}

修复后的自定义Hook实现 #

import { useState, useEffect } from "react";

// 按React Hook规范命名以use开头
function useDataGenerator(interval = 1000) {
  const [pktD, setPktD] = useState({
    chid: 0,
    peakVal: 0
  });

  useEffect(() => {
    const timer = setInterval(() => {
      setPktD(prev => ({
        ...prev,
        chid: Math.random() * 253,
        peakVal: Math.random() * 10000
      }));
    }, interval);

    return () => clearInterval(timer);
  }, [interval]);

  // 直接返回最新生成的数据，外部不需要手动调用生成方法
  return pktD;
}
export default useDataGenerator;

自定义Hook使用示例 #

function App() {
  // 传入1000表示1秒生成一次数据，直接拿到最新生成的数据
  const pktD = useDataGenerator(1000);
  console.log(pktD);
  return <></>;
}

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