当前位置：首页 > React

react实现时钟

2026-01-26 22:05:18React

React 实现时钟的方法

使用 React 实现时钟可以通过多种方式完成，以下是几种常见的方法：

使用 useState 和 useEffect 钩子

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

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return <div>{time.toLocaleTimeString()}</div>;
}

export default Clock;

使用类组件实现

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return <div>{this.state.time.toLocaleTimeString()}</div>;
  }
}

export default Clock;

使用第三方库（如 moment.js）

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

function Clock() {
  const [time, setTime] = useState(moment());

  useEffect(() => {
    const timerID = setInterval(() => setTime(moment()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return <div>{time.format('HH:mm:ss')}</div>;
}

export default Clock;

自定义时钟样式

可以通过 CSS 为时钟添加样式：

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return (
    <div style={{ fontSize: '24px', color: 'blue', fontWeight: 'bold' }}>
      {time.toLocaleTimeString()}
    </div>
  );
}

实现带日期显示的时钟

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return (
    <div>
      <div>{time.toLocaleDateString()}</div>
      <div>{time.toLocaleTimeString()}</div>
    </div>
  );
}

以上方法均可以实现 React 中的时钟功能，选择哪种方式取决于项目需求和个人偏好。函数组件配合钩子是当前 React 开发中的主流做法。

react实现时钟