Electron+React环境下窗口最小化时useState更新失效问题求助

Electron 基于 Chromium 内核，默认会对最小化/后台窗口的定时器执行节流策略，对于间隔小于1s的定时器会大幅降低触发频率甚至暂停执行，目的是降低后台资源消耗，这就是你最小化后计数器冻结的核心原因。
同时你当前代码的时间计算逻辑本身存在设计缺陷：通过固定步长累加的方式计算时间，只要定时器出现延迟、节流，时间和价格计算就会出现误差，和实际运行时间不一致。

方案1：禁用窗口后台节流（最快生效） #

在 Electron 主进程创建 BrowserWindow 的代码中，给 webPreferences 新增 backgroundThrottling: false 配置即可关闭当前窗口的后台定时器节流策略：

const mainWindow = new BrowserWindow({
  // 其他窗口配置
  webPreferences: {
    // 其他原有配置
    backgroundThrottling: false // 新增这行
  }
})

注意：该配置会让窗口后台运行时保持正常的资源占用，适合对计时精度要求高的场景

方案2：基于时间戳计算时间（更稳定，无配置依赖） #

放弃固定步长累加的逻辑，改为记录启动时的时间戳，每次定时器触发时用当前时间戳减去启动时间戳计算真实经过时间，即使定时器被节流，恢复后计算出的时间依然是准确的，价格也能同步修正：

import React, { useState, useRef } from "react";
import BtnComponent from './BtnComponent';
import DisplayComponent from './DisplayComponent';
import "../index.css";

function Timer(props) { 
  const [price, setPrice] = useState(0);
  const [time, setTime] = useState({ ms: 0, s: 0, m: 0, h: 0 });
  const [interv, setInterv] = useState();
  const [status, setStatus] = useState(0);
  // 新增ref存储启动时间戳、暂停时已经过的毫秒数
  const startTimeRef = useRef(0);
  const elapsedTimeRef = useRef(0);

  const start = () => {
    startTimeRef.current = Date.now() - elapsedTimeRef.current;
    setStatus(1);
    setInterv(setInterval(run, 10));
  };

  const run = () => {
    // 计算当前真实经过的总毫秒数
    const totalMs = Date.now() - startTimeRef.current;
    elapsedTimeRef.current = totalMs;
    // 换算时分秒毫秒
    const h = Math.floor(totalMs / 3600000);
    const m = Math.floor((totalMs % 3600000) / 60000);
    const s = Math.floor((totalMs % 60000) / 1000);
    const ms = Math.floor((totalMs % 1000) / 10);
    // 计算价格：每秒增加220/3600
    const price = totalMs / 1000 * (220 / 3600);
    setTime({ ms, s, m, h });
    setPrice(parseInt(price));
  };

  const stop = () => {
    clearInterval(interv);
    setStatus(2);
  };

  const reset = () => {
    clearInterval(interv);
    setStatus(0);
    elapsedTimeRef.current = 0;
    setTime({ ms: 0, s: 0, m: 0, h: 0 });
    setPrice(0);
  };

  const resume = () => start();

  return (
    <div className="clock-holder">
      <div className="stopwatch">
        <DisplayComponent
          time={time}
          price={price}
          posteid={props.post}
          img={props.img}
          color={props.color}
        />
        <BtnComponent
          status={status}
          resume={resume}
          reset={reset}
          stop={stop}
          start={start}
        />
      </div>
    </div>
  );
}

export default Timer

该方案不需要修改Electron配置，即使定时器被节流，恢复后也能自动修正时间和价格，不存在累计误差。

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