компонент обновления каждый второй реакции

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

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

var Timer = React.createClass({ 
    getInitialState: function() { 
    return {secondsElapsed: 0}; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return (
     <div>Seconds Elapsed: {this.state.secondsElapsed}</div> 
    ); 
    } 
}); 

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

Answer 2

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

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

Answer 3

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

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

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