最終更新:2022-11-18 (金) 04:46:37 (17d)  

React/ステート
Top / React / ステート

React/コンポーネントの状態

state を正しく使用する

state を直接変更しないこと

  • setStateを使う。
  • this.state に直接代入してよい唯一の場所はコンストラクタ

state の更新は非同期に行われる可能性がある

  • React はパフォーマンスのために、複数の setState() 呼び出しを 1 度の更新にまとめて処理することがあります。
  • this.props と this.state は非同期に更新されるため、次の state を求める際に、それらの値に依存するべきではありません。
  • this.setState((state, props) とすると第2引数のpropsで更新が適用される時点のpropsを受け取れる

state の更新はマージされる

メモ

  • React の仕様で state は次のレンダリングされるタイミングまで反映されない

React/関数コンポーネントの場合

React Hooks

React/クラスコンポーネントの場合

  • コンストラクタの中でthis.state?にオブジェクトとして代入

関連