アップデートコンポーネント毎秒反応

Question

私が反応し、ちょうど画面に 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> 
     ); 
     } 
    }