React.jsでタイマーを作ってみる

React.jsを使って、タイマーを作ってみます。
A JavaScript library for building user interfaces | React

参考:
Top-Level API | React
ReactのAPIを眺めてみた - Umi Uyuraのブログ
reactjs - React.jsのState - Qiita
JavaScript - React.jsのチュートリアルを触る - Qiita
reactjs - React component ライフサイクル図 - Qiita
reactjs - React.jsのComponent Lifecycle - Qiita


下準備

まず、timerappディレクトリの中にtimerapp.htmlを作っておきます。
さらにnodeでのwebサーバも過去記事を参考に設定しておきます。uraway.hatenablog.com


htmlファイルの設定

多分必要であろうものを読み込むようにしておきましょう。
$ node server.jsを実行した時に、Hello, worldと表示されるようにします。

//timerapp.html
<!DOCTYPE html>
<html>
<head>
  <title>ReactTimer</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('container')
);
</script>
</body>
</html>

このReact.render();のあるscript内にコードを書いていきます。
まず、React.createClass();で新しくコンポーネントのクラスを作成します。その際、renderメソッドを持ったオブジェクトを含める必要があります。

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>secondsElapsed: {this.state.secondsElapsed}</div>
    );  }
});

ReactDOM.render(<Timer />, document.getElementById('container'));

  • getInitialStateコンポーネントがマウント(装着?設置?とにかく、何かを実行可能な状態にすることらしい)される前に一度だけ実行され、this.stateの初期値が返される。つまりコンポーネントstateを初期化する。この場合、secondsElapsedを初期化して、その初期値である0を返す。
  • setStateコンポーネントstateを更新する。この場合、tickが実行されれば、現在のseceondsElaspedに1が足される。

 参考:JavaScript でタイマーを使う(setInterval(),setTimeout()) | Try Lifelog

  • componentWillUnmountは、DOMからコンポーネントがアンマウントされる直前に実行される。この場合、アンマウント時に、intervalの繰り返しを終了する。なくても動くが、Timerの処理やDOMのイベントは解除しておくべきらしい。

これでタイマー、というかカウンター?の完成
1000ミリ秒ごとにtickが実行され、初期値0のsecondsElaspedはその度に1追加されていくという仕組み。