react如何获取当前时间
获取当前时间的几种方法
在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管理定时器：
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>;
}
}性能优化建议
高频更新的场景下，应考虑防抖或节流策略，避免不必要的重渲染。对于复杂的时间格式化需求，推荐使用date-fns或moment.js等专业库处理。
