我一直在玩 React 并且有以下时间组件只呈现Date.now()到屏幕上：
import React, { Component } from 'react';
class TimeComponent extends Component {
constructor(props){
super(props);
this.state = { time: Date.now() };
}
render(){
return(
<div> { this.state.time } </div>
);
}
componentDidMount() {
console.log("TimeComponent Mounted...")
}
}
export default TimeComponent;
让这个组件每秒更新一次以从 React 的角度重新绘制时间的最佳方法是什么？
您需要使用setInterval来触发更改，但您还需要在组件卸载时清除计时器以防止其留下错误和内存泄漏：
componentDidMount() {
this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
以下代码是来自 React.js 网站的修改示例。
原始代码可在此处获得：https : //reactjs.org/#a-simple-component
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
seconds: parseInt(props.startTimeInSeconds, 10) || 0
};
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
formatTime(secs) {
let hours = Math.floor(secs / 3600);
let minutes = Math.floor(secs / 60) % 60;
let seconds = secs % 60;
return [hours, minutes, seconds]
.map(v => ('' + v).padStart(2, '0'))
.filter((v,i) => v !== '00' || i > 0)
.join(':');
}
render() {
return (
<div>
Timer: {this.formatTime(this.state.seconds)}
</div>
);
}
}
ReactDOM.render(
<Timer startTimeInSeconds="300" />,
document.getElementById('timer-example')
);
@Waisky 建议：
您需要使用
setInterval来触发更改，但您还需要在组件卸载时清除计时器以防止其留下错误和内存泄漏：
如果你想做同样的事情，使用 Hooks：
const [time, setTime] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 1000);
return () => {
clearInterval(interval);
};
}, []);
关于评论：
你不需要在里面传递任何东西[]。如果传入time括号，则表示每次time更改值时都运行效果，即setInterval每次time更改时都会调用一个新的，这不是我们要找的。我们只想setInterval在组件挂载时调用一次，然后每 1000 秒setInterval调用setTime(Date.now())一次。最后，我们clearInterval在组件卸载时调用。
请注意time，每次time更改值时，组件都会根据您在其中使用的方式进行更新。这已无关把time在[]的useEffect。
在组件的componentDidMount生命周期方法中，您可以设置一个间隔来调用更新状态的函数。
componentDidMount() {
setInterval(() => this.setState({ time: Date.now()}), 1000)
}
class ShowDateTime extends React.Component {
constructor() {
super();
this.state = {
curTime : null
}
}
componentDidMount() {
setInterval( () => {
this.setState({
curTime : new Date().toLocaleString()
})
},1000)
}
render() {
return(
<div>
<h2>{this.state.curTime}</h2>
</div>
);
}
}