• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React

React/ステート

Top / React / ステート

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

state を正しく使用する

• https://ja.reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

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

• useStateというフックを使う

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

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

更新されない

• 関数内で古い props や state が見えているのはなぜですか？
• https://ja.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
  • イベントハンドラにせよ副作用関数にせよ、コンポーネント内に書かれた関数からは、その関数が作成された時の props や state が「見え」ます。

• 非同期的に実行されるコールバック内で、意図的に state の最新の値を読み出したいという場合は、その値を ref 内に保持して、それを書き換えたり読み出したりすることができます。

関連

• React/props
• React/state