時計の作り方～React HPより～

ReactのHPでは，チュートリアルなど様様な情報を提供しています．
その中で，メインコンセプトとして，「stateとライフサイクル」というページで時計を作っているのですが，見ても書いてもよくわからないので，登場するコードについてまとめてみます．

完成形

HPに書いてある以下のコードを書くと，こんな感じのリアルタイムで時間が表示される時計が作れます

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

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

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

わからないこと

上記のコードでよくわからなかった，以下を調べてみました

toLocaleTimeString

Dateオブジェクトメソッドの一つ
※日付や時間の取得や設定を行うオブジェクト

toLocaleTimeStringは地域情報に従って時刻部分を文字列で取得するメソッド
同様に，文字列変換のメソッドをいかにまとめる

書式	意味
toDateString	日付部分を文字列で取得
toTimeString	時間部分を文字列で取得
toLocaleDateString	地域情報に従って日付部分を文字列で取得
toLocaleTimeString	地域情報に従って時刻部分を文字列で取得
toString	日付を文字列で取得

componentDidMountとcomponentWillUnmount

ライフサイクルメソッドの一つそうです．

#####ライフサイクルメソッドってなんやねん

たくさん書いてあるコードにも，実行する順番があるらしいです．
ライフサイクルメソッドとは，処理過程の特定の時点でコードを実行するためのメソッドのことです．
この処理過程とメソッドの関係は↓の図のようになるそうです．

この関係を見ると，今までよくわからずに書いていたcontructorやrenderの意味が分かりますね

##conponentDidMount
ComponentがMountされた後に実行されるメソッドで，主な用途は以下です．
・Ajaxを使ったデータフェッチを行う(初回)
・DOMに対する処理を行う(初回)
・タイマーをセットする
・イベントリスナのセット

今回のコードは，タイマーをセットしているですね．

一度設定したら，componentWillUnmount()で解除することを忘れない

##componentWillUnmount
componentがUnmountされる時に実行される．主な用途は以下です．
・タイマーを解除する
・イベントリスナを解除する
・非同期処置を中止する

setInterval

一定時間が経過するごとに処理を実行するメソッドです．
書き方は，setInterval(関数,処理間隔)
ここにおける処理間隔の単位はミリ秒です．

今回のコードでは，1秒ごとに()=>this.tick()を実行していることが分かりますね．

つまり，
####同じ時間で止まらずに，更新し続けている
のはこのメソッドのおかげなんですね．

clearInterval

setInterval()でセットしたタイマーを解除するメソッドです．
書き方は，clearInterval(止めたいタイマーID)

#参考
React HP
JavaScript入門講座
React Componentライフサイクルひとめぐり
【JavaScript入門】setIntervalの使い方まとめ