[Get started]から始めるReact開発：その4(State and Lifecycle①

引き続き[React](https://facebook.github.io/react/docs/state-and-lifecycle.html)

[[Get started]から始めるReact開発：その1](http://qiita.com/t-katsura/items/6c3a92583b8a738e2921)
[[Get started]から始めるReact開発：その2:Rendering Elements](http://qiita.com/t-katsura/items/43ac2e758fd53a8a9ffa)
[[Get started]から始めるReact開発：その3:Components and Props](http://qiita.com/t-katsura/items/d3c320a0b68cee7c9d77)
[[Get started]から始めるReact開発：その4(State and Lifecycle①](http://qiita.com/t-katsura/items/7b8e4889fe73e4d3245d)
[[Get started]から始めるReact開発：その4(State and Lifecycle②](http://qiita.com/t-katsura/items/24a14ff763ac7738a036)

今回から直訳風ではなくできるだけ意訳して書きます。
この前までの読んでてちょっと意味不明だなと思ったので。
つーか今回めっちゃ長い。

#State and Lifecycle

一つ前のセクションからの時計について考えてみます。
これまでのところ私たちはUIを更新する一つの方法を学んだだけです。
レンダリングされたアウトプットを変更するためには`ReactDOM.render()`を呼びます。

```code
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
```

このセクションの中では、本当に再利用が可能でカプセル化された時計コンポーネントの作り方について学びます。
この時計コンポーネントは自身で時間をセットして毎秒自分自身で更新します。

まず私たちは、時計の外観をカプセル化することができます。

```
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
```
しかし上記は重要な要件が抜けてしまっています。
時計に時間をセットし、毎秒UIを更新することは`Clock`の中で実装すべきです。

理想的としては、データを渡さずに一度で書きたい`(<clocke />)`ですし、自身で更新を行う`Clock'を持てたらいいなと考えます。

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

これを実現するには`Clock`コンポーネントに`State`を加える必要があります。
`State`は`props`に似ていますが、コンポーネント内部で完結しておりコンポーネントによって完全にコントロールされています。

以前述べたように、クラスとして定義されたコンポーネントはいくつかの追加機能があります。
`Local State`がまさにそのクラスだけが利用できる機能です。

##Converting a Function to a Class

`Clock`のようなfunctional componentを5つのステップでclassにすることができます。

1. `React.Component`の拡張(extends)として同じ名前のES6クラスを作成する
2. `render()`という空っぽのメソッドを追加する
3. `render()`メソッドの中に機能の中身を移す
4. `render()`の中で`pops`を`this.props`に変える
5. 残りの空の関数宣言を削除する

```
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
```

上記により`Clock`は関数というよりはクラスとして新しく定義されました。
これにより`local state`や`lifecycle hooks`と言った追加機能が利用できるようになります。

##Adding Local State to a Class(クラスのlocal stateを加える)

3ステップで`date`を`props`から`state`に動かしましょう。

1) `render()`メソッド内で`this.props.date`を`this.state.date`に変えます

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

2) 初期の`this.state`を割り当てる`class constructor`を加えます
ベースのコンストラクタに`props`を渡す方法に注意してください。

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

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

クラスコンポーネントは常に`props`でベースのコンストラクタを呼ばなければなりません。

3) `<Clock />`要素から`date prop`を外します

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

後でコンポーネント自体の動きの変更に戻ってタイマーコードを加えます。
結果としては下記のようになります。

```
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {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')
);
```

次は`Clock`の自身をタイマー設定と毎秒更新処理を作成します。

長かったので分割します。