当前位置：首页 > React

react如何获取当前时间

2026-03-31 12:15:49React

获取当前时间的几种方法

在React中获取当前时间可以通过JavaScript的Date对象实现，以下是几种常见方式：

使用new Date()获取当前时间

直接实例化Date对象即可获取当前时间戳，可转换为字符串或进一步格式化：

const currentTime = new Date();
console.log(currentTime.toString()); // 输出完整时间字符串

通过useState和useEffect动态更新时间

在函数组件中结合状态管理和副作用钩子实现实时时间显示：

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

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

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

格式化时间输出

使用toLocaleString方法或第三方库（如date-fns）进行格式化：

const options = { 
  hour: '2-digit', 
  minute: '2-digit',
  second: '2-digit',
  hour12: true 
};
const formattedTime = new Date().toLocaleTimeString('en-US', options);

类组件中的实现方式

在class组件中通过componentDidMount和componentWillUnmount管理定时器：

react如何获取当前时间

class Clock extends React.Component {
  state = { time: new Date() };

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: new Date() });
    }, 1000);
  }

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

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