React初心者覚書03 - state -

[reactのサイト](https://ja.reactjs.org/docs/state-and-lifecycle.html)
を見て覚書しています。
下記の時計の書き換え

```時計.js
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);
```
時計をカプセル化（カプセル化の意味は React仕様にすると言うこと？
propsをClockの引数にして、 returnで返すと言うことだと今の所理解したつもり）

```時計02.js
function Clock(props){
  return(
    <div>
      <h1>Hello!</h1>
      <h2>It is {props.date.toLocaleTimeString()}</h2>
    </div>
  );
}
function tick(){
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}
setInterVal(tick,1000);

```

わからないのは、

```
<Clock date={new Date()} />
```
の部分で、
<Clockで

```
    <div>
      <h1>Hello!</h1>
      <h2>It is {props.date.toLocaleTimeString()}</h2>
    </div>
```

を返すことはわかるけど、何故、
date={new Date()}
が入っているのか？<Clockの中身で更新される部分は
date={new Date()}
だけだから？それが帰ってきている？？　かと思ったら、それに続く記事で、

理想的には以下のコードを一度だけ記述して、Clock に自身を更新させたく、それを実現するには Clockコンポーネントにステートstate を追加する必要があるとのこと。

```理想.js
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
```
--------
#### Stateはpropsに似ているが、コンポーネントによって完全に管理されるプライベートなもの

```ClockClass.js
class Clock extends React.Component{
  render(){
    return(
      <div>
        <h1>Hello!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
```
renderメソッドは更新が発生する毎呼ばれる。
同一のDOMノード内で<Clock />をレンダーする限り、Clockクラスのインスタンスは１つだけ使われる。
ローカルstateやライフサイクルメソッドなどの追加機能も利用できる。

### クラスにローカルなstateを追加する

1. render()メソッド内の this.props.dateを
this.state.dateに書き換える（何故？　とりあえずそう言うものってこと？）
2. this.stateの初期状態を設定するクラスコンストラクタを追加する（初期設定が必要？）
3. <Clock />要素からdateプロパティを削除する

#### クラスにライフサイクルメソッドを追加

多くのコンポーネントをもつアプリでは、コンポーネントが破棄された時にリソースを解放することが重要

タイマー設定：
最初にClockがDOMとして描画される時＞mounting

タイマークリア：
Clock が生成した DOM が削除されるとき＞unmounting


```propをstateに.js

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

  componentDidMount(){//ClockがDOMに描画された後呼び出される
    this.timeID = setInterval(//tickを毎秒ごとに呼び出す
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount(){//Clock コンポーネントが DOM から削除されると呼び出される
    clearInterval(this.timerID);//タイマー終了
  }

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

  render(){//reactが画面に何を数rかを知る
    return(
      <div>
        <h1>Hello!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,//Clock コンポーネントのコンストラクタを呼び出す
  document.getElementById('root')
);


```


stateの正しい使用

setState()

1.stateを直接変更しない
必ずsetStateを使う
 this.setState({comment:'Hello'});

 2.this.propsとthis.stateは非同期に更新されるため、その値に依存してはいけない

``````書き方.js
 this.setState((state,props)=>({
  counter: state.counter + props.increment
 }));
 ```
```書き方02.js
 this.setState(function(state,props){
 return{
 counter: state.counter+ props.increment
 };
 });
 ```

3.stateの更新はマージされる
マージって？結合、統合という意味

 ```
 constructor(props) {
  super(props);
  this.state = {
    posts: [],
    comments: []
  };
}
```

```
componentDidMount(){
  fetchPosts().then(response =>{
    this.setState({
      posts: response.posts
    });
  });

  fetchComments().then(response =>{
    this.setState({
      comments: response.comments
    });
  });
}
```

#### データは下方向に伝わる