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 });
更新された値のみ置き換えられる。