Reactメモ ~State~

Reactのメモです。

State

Stateはコンポーネントによって完全プライベートに管理される。

クラス

クラスコンポーネントは常にpropsを引数に、親クラスのコンストラクタを呼び出す必要がある。

    cinstructor(props){
      super(props);
      this.state={data: new Date()};
    }

setState

stateは直接変更するのでなく、setState()を使用する。何故なら、setState()を使わないと再レンダリングされないから。

    //再レンダーされない。
    this.state.comment='Hello!';
    
    //再レンダーされる。
    this.setState({comment: 'Hello!'});

コンストラクタのみthis.stateに直接代入してよい。this.setStateはそれぞれが定義されているコンポーネント内でプライベートとみなすべきもの。

stateの更新

Reactは複数のsetStateを一度の更新にまとめることがある(効率化のため)。

this.propsとthis.stateは非同期に更新されるため、以下のようにする。

    //カウンターが正しく機能しない可能性あり。
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
    
    //正解
    this.setState((state,props)=>({
      counter: state.counter + props.increment
    }));

stateの個別更新

stateの中身が複数あるとき、setStateで個別に更新して良いのか

    ...
    this.state={
      posts: [],
      comments: []
    };
    ...
    this.setState({
      post: response.posts
    });

更新された値のみ置き換えられる。