[解決済み] Reactコンポーネントを1秒ごとに更新する

質問

私は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;

このコンポーネントを1秒ごとに更新して時間を再描画するようにするには、Reactの観点からはどうしたらよいでしょうか。

どのように解決するのですか？

を使用する必要があります。 setInterval を使用して変更をトリガーしますが、コンポーネントのアンマウント時にタイマーをクリアして、エラーやメモリリークを防止する必要があります。

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