Обновление реактивной составляющей каждую секунду

Я играю с 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?

Ответы

Ответ 1

Вам нужно использовать setInterval для запуска изменения, но вам также необходимо очистить таймер, когда компонент размонтируется, чтобы предотвратить его удаление ошибок и утечку памяти:

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

Ответ 2

Это пример сайта React.js:

  class Timer extends React.Component {
          constructor(props) {
            super(props);
            this.state = { seconds: 0 };
          }

          tick() {
            this.setState(prevState => ({
              seconds: prevState.seconds + 1
            }));
          }

          componentDidMount() {
            this.interval = setInterval(() => this.tick(), 1000);
          }

          componentWillUnmount() {
            clearInterval(this.interval);
          }

          render() {
            return (
              <div>
                Seconds: {this.state.seconds}
              </div>
            );
          }
        }

 ReactDOM.render(<Timer />, mountNode);

Ответ 3

В жизненном цикле компонента componentDidMount вы можете установить интервал для вызова функции, которая обновляет состояние.

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

Ответ 4

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>
        );
      }
    }

Ответ 5

Таким образом, вы были на правильном пути. Внутри вашего componentDidMount() вы могли закончить задание, setInterval() чтобы инициировать изменение, но помните, как обновить состояние компонентов через setState(), поэтому внутри вашего componentDidMount() вы могли бы сделать это:

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

Кроме того, вы используете Date.now() который работает с реализованной выше реализацией реализации componentDidMount(), но вы получите длинный набор мерцающих чисел, которые не читаются человеком, но технически это время обновляется каждую секунду в миллисекундах с 1 января 1970 года, но мы хотим сделать это время понятным для того, как мы, люди, читаем время, поэтому в дополнение к обучению и внедрению setInterval вы хотите узнать о new Date() и toLocaleTimeString() и реализовать его так:

class TimeComponent extends Component {
  state = { time: new Date().toLocaleTimeString() };
}

componentDidMount() {
  setInterval(() => {
   this.setState({ time: new Date().toLocaleTimeString() })    
  }, 1000)
}

Заметьте, что я также удалил функцию constructor(), вам это необязательно, мой рефактор на 100% эквивалентен инициализации сайта с помощью функции constructor().