React 中使用 useEffect 正确实现定时动态背景色切换-js教程-PHP中文网

React 中使用 useEffect 正确实现定时动态背景色切换

本文详解如何在 react 函数组件中借助 useeffect 和 settimeout 安全、精准地实现多个元素的循环背景色动态切换，避免因重复渲染导致的定时器失控问题。

本文详解如何在 react 函数组件中借助 useeffect 和 settimeout 安全、精准地实现多个元素的循环背景色动态切换，避免因重复渲染导致的定时器失控问题。

在 React 中直接在组件顶层调用 setTimeout 是常见误区：每次状态更新触发重渲染时，App 函数都会重新执行，导致 setTimeout 被反复注册，产生多个并发定时器，最终造成状态混乱、颜色切换失序甚至内存泄漏。

正确做法是将定时逻辑封装在 useEffect 中，并配合空依赖数组 [] 确保其仅在组件挂载时执行一次。同时，必须通过 clearTimeout 在组件卸载时清理定时器，防止对已销毁组件调用 setState（可能引发警告或异常）。

以下是优化后的完整实现：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

import { useState, useEffect } from 'react';

function App() {
  const [redBgColor, setRedBgColor] = useState('');
  const [yellowBgColor, setYellowBgColor] = useState('');
  const [greenBgColor, setGreenBgColor] = useState('');

  useEffect(() => {
    let timerId = null;

    // 启动初始状态（红灯）
    const start = () => {
      setRedBgColor('#FF0000');
      setYellowBgColor('');
      setGreenBgColor('');
      timerId = setTimeout(wait, 4000);
    };

    const wait = () => {
      setRedBgColor('');
      setYellowBgColor('#FBFF00');
      setGreenBgColor('');
      timerId = setTimeout(go, 2000);
    };

    const go = () => {
      setRedBgColor('');
      setYellowBgColor('');
      setGreenBgColor('#00FF00');
      timerId = setTimeout(start, 5000);
    };

    // 延迟 100ms 后启动流程（模拟初始化延迟）
    timerId = setTimeout(start, 100);

    // 清理函数：组件卸载时清除所有定时器
    return () => {
      if (timerId) clearTimeout(timerId);
    };
  }, []); // ✅ 空依赖数组 → 仅挂载时运行

  return (
    <div classname="container">
      <div classname="flexbox-container">
        <div classname="flexbox-item flexbox-item-1" style="{{" backgroundcolor: redbgcolor></div>
        <div classname="flexbox-item flexbox-item-2" style="{{" backgroundcolor: yellowbgcolor></div>
        <div classname="flexbox-item flexbox-item-3" style="{{" backgroundcolor: greenbgcolor></div>
      </div>
    </div>
  );
}

export default App;

关键要点总结：