☰

Reactコンポーネントを1秒ごとに更新する 質問する

tag-icon • tag-icon javascript reactjs
Reactコンポーネントを1秒ごとに更新する 質問する

Date.now()私は React をいろいろ試していて、画面にレンダリングする次の時間コンポーネントを作成しました。

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 の観点から時間を再描画する最適な方法は何でしょうか?

ベストアンサー1

変更をトリガーするには を使用する必要がありますsetIntervalが、コンポーネントがアンマウントされるときにタイマーをクリアして、エラーが残ってメモリがリークされるのを防ぐ必要もあります。

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

おすすめ記事