2017-04-06

React.js開發入門教學(7)-計時器

突發奇想想說如果用到現在學會的幾個方式來作個時鐘的話，應該怎麼做，爬了一下文，發現其實

Compoment有個生命週期，也就是會有初始化>掛載>卸載等等的動作。所以就可以利用這點來作

一個DOM剛啟動的時候應該作什麼事情，而不用等著我們去啟動他！所以我覺得可以這樣寫！也真

真的可以動XD～，程式碼是這樣

var input_style = {
      color: '#FF00FF'
  }
  var input_attr = {
      type: 'text',
      readOnly: true
}
class LeoTimer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {now: 0};
    }
    timer_plus() {
        var time_obj = new Date();
        var year = time_obj.getFullYear();
        var month = (time_obj.getMonth()+1 < 10 ? '0' : '') + (time_obj.getMonth()+1);
        var day = (time_obj.getDay() < 10 ? '0' : '') + time_obj.getDay();
        var hour = (time_obj.getHours() < 10 ? '0' : '') + time_obj.getHours();
        var min = (time_obj.getMinutes() < 10 ? '0' : '') + time_obj.getMinutes();
        var sec = (time_obj.getSeconds() < 10 ? '0' : '') + time_obj.getSeconds();
        var nowtime = year + '/' + month + '/' + day + ' ' + hour + ':' + min + ':' + sec
        this.setState({now: nowtime});
    }
    timer_stop() {
        clearInterval(this.interval);
    }
    componentDidMount() {
           this.interval = setInterval(this.timer_plus.bind(this), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    render() {
        return (
            <div>
                <input style={input_style} {...input_attr} value={this.state.now}/>
                <button onClick={this.timer_stop.bind(this)}>STOP</button>
                <button onClick={this.componentDidMount.bind(this)}>RESTART</button>
            </div>
        )
    }
}

ReactDOM.render(
      <LeoTimer />,
      document.getElementById('test')
);

這邊比較重要的地方就是componentDidMount()與componentWillUnmount()這兩個方法。

在React中DOM在啟動的時候在被掛載的時候，掛載分成三個部分，分別是

1.getInitialState()：當物件被調用的時候被執行，也就是我們現在ES6用的constructor()
2.componentWillMount()：當整個物件已經完成處理後被執行
3.componentDidMount()：當物件被塞到DOM中的時候被執行，也就是被塞到的時候執行！

所以我們才利用了這一點讓他整個元件構築好之後被塞到DOM的那時自動啟動計時器，然後每一秒更新一次來達到

我們即時更新畫面時間的需求！突然覺得好方便啊！雖然jQuery的.attr()也可以做到一樣的事情，但是jQuery

是去修改已經存在業面上的東西，概念上好像有點不太一樣:P，我也不是很懂。

React