每秒更新React组件

Question

我一直在玩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的角度来看，使该组件每秒更新以重新绘制时间的最佳方法是什么？

Answer 1

您需要使用setInterval来触发更改，但是还需要在组件卸载时清除计时器，以防止它留下错误和内存泄漏：

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
  clearInterval(this.interval);
}