react实现红绿灯

React 实现红绿灯

使用 React 实现一个红绿灯组件，可以通过状态管理和定时器控制灯的切换。以下是实现方法：

使用 useState 和 useEffect 管理状态

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

const TrafficLight = () => {
  const [activeLight, setActiveLight] = useState('red');

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveLight(prevLight => {
        if (prevLight === 'red') return 'green';
        if (prevLight === 'green') return 'yellow';
        return 'red';
      });
    }, 2000);

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

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'red' ? 'red' : 'gray',
          margin: 10
        }}
      />
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'yellow' ? 'yellow' : 'gray',
          margin: 10
        }}
      />
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'green' ? 'green' : 'gray',
          margin: 10
        }}
      />
    </div>
  );
};

export default TrafficLight;

使用 CSS 动画优化视觉效果

可以通过 CSS 动画让灯的变化更平滑：

import React, { useState, useEffect } from 'react';
import './TrafficLight.css';

const TrafficLight = () => {
  const [activeLight, setActiveLight] = useState('red');

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveLight(prevLight => {
        if (prevLight === 'red') return 'green';
        if (prevLight === 'green') return 'yellow';
        return 'red';
      });
    }, 2000);

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

  return (
    <div className="traffic-light">
      <div className={`light red ${activeLight === 'red' ? 'active' : ''}`} />
      <div className={`light yellow ${activeLight === 'yellow' ? 'active' : ''}`} />
      <div className={`light green ${activeLight === 'green' ? 'active' : ''}`} />
    </div>
  );
};

export default TrafficLight;

对应的 CSS 文件：

.traffic-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  padding: 20px;
  border-radius: 10px;
}

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
  opacity: 0.3;
  transition: opacity 0.5s ease-in-out;
}

.light.active {
  opacity: 1;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

使用自定义 Hook 封装逻辑

将红绿灯的逻辑封装成自定义 Hook，提高代码复用性：

import React from 'react';
import useTrafficLight from './useTrafficLight';

const TrafficLight = () => {
  const activeLight = useTrafficLight();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'red' ? 'red' : 'gray',
          margin: 10
        }}
      />
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'yellow' ? 'yellow' : 'gray',
          margin: 10
        }}
      />
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: '50%',
          backgroundColor: activeLight === 'green' ? 'green' : 'gray',
          margin: 10
        }}
      />
    </div>
  );
};

export default TrafficLight;

自定义 Hook 文件：

import { useState, useEffect } from 'react';

const useTrafficLight = () => {
  const [activeLight, setActiveLight] = useState('red');

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveLight(prevLight => {
        if (prevLight === 'red') return 'green';
        if (prevLight === 'green') return 'yellow';
        return 'red';
      });
    }, 2000);

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

  return activeLight;
};

export default useTrafficLight;

这些方法可以根据实际需求选择使用，第一种方法适合简单场景，第二种方法通过 CSS 增强了视觉效果，第三种方法通过自定义 Hook 提高了代码的可维护性。