thành phần cập nhật mỗi giây phản ứng

Question

Tôi đã được chơi đùa với Phản ứng và có phần thời gian sau đó chỉ làm cho Date.now() vào màn hình:

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; 

Điều gì sẽ là cách tốt nhất để có được thành phần này để cập nhật mỗi giây để vẽ lại thời gian từ góc độ phản ứng?

Answer 1

Đây là một ví dụ từ trang web 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

Trong phương thức vòng đời componentDidMount của thành phần, bạn có thể đặt khoảng thời gian để gọi một hàm cập nhật trạng thái.

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

Answer 3

Bạn cần phải sử dụng setTimeout để kích hoạt sự thay đổi, nhưng bạn cũng cần để xóa bộ đếm thời gian khi unmounts thành phần để ngăn chặn nó lại lỗi và bộ nhớ bị rò rỉ:

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