ReactでのsetStateの使用と同期と非同期の使用

React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリングされません。コンポーネントのプロパティを変更するには、this.setState を使用する必要があります。

1. this.setStateを定義する2つの方法

初期状態の定義

状態 = { カウント: 0 },

この時点でボタンがある場合は、ボタンをクリックしてカウントを1増やします。2つの方法で記述できます。

（１）譲渡対象

this.setState({ count: this.state.count + 1})

（２）伝達関数

this.setState((state, props) => ({ count: count + 1}))

2. setState の 2 つのメソッドの違いは何ですか?

変更された状態の値が以前の状態の値に依存する必要がある場合は、次のような関数が必要です。

カウントを追加します（）{
  this.setState({ count: this.state.count + 1})
  this.setState({ count: this.state.count + 1})
  this.setState({count: this.state.count + 1}) を返します。
}

このとき、React 内部で複数の setState 操作がマージされ、新しい状態が Object.assgin({}, {count: 0}, {count: 1}) によってマージされるため、+1 操作は 1 回のみ実行されます。上記の割り当ては 3 回実行されますが、count の値が更新されないため、最終的な実行結果は +1 のみになります。setState の割り当てが関数の場合、状況は異なります。

カウントを追加します（）{
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
}

この操作は、React が判断するため、+3 の効果が得られます。関数が渡された場合、この関数が実行され、そのときに count の値が変更されます。

3. setState は同期ですか、それとも非同期ですか?

☆☆☆☆☆は非同期です

（１）つまり、this.setStateで状態を変更した後、次の行で状態の値を出力しても新しい値は得られない。

（２）なぜ非同期なのか？

理由は 2 つあります。1 つは効率を上げるためです。状態値が変更されるたびに、レンダラーは再レンダリングされます。状態値を複数回マージして更新すると、パフォーマンスが向上します。もう 1 つは、レンダラーが後で更新されるためです。レンダラーにサブコンポーネントがある場合、サブコンポーネントのプロパティは親コンポーネントの状態に依存し、プロパティと状態を一致させることができません。

（３）非同期操作中に状態値を取得するにはどうすればいいですか？
①setStateのコールバック関数内

this.setState({ 
  カウント: this.state.count + 1}}, 
  ()=>{ console.log(this.state.count)})

②componentDidUpdateで取得する

コンポーネントの更新(){
  console.log(この状態の数)
}

☆☆☆☆☆は同期されています

（１）つまり、this.setStateで状態を変更した後、次の行で新しい状態の値を出力する。

（２）どのようなシナリオで同期が可能か？
①ネイティブjsがdom要素を取得し、イベントをバインドする

<button id="addBtn">クリックして +1</button>
コンポーネントマウント(){
   定数 addBtn = document.getElementById('addBtn')
   changeBtn.addEventListener('クリック',()=>{
       this.setState({ count: this.state.count + 1})
       console.log(この状態メッセージ)
   })
}

② タイマーsetTimeout

<button onClick={ e => this.addOne() }>クリックして +1 してください</button>
追加1(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
 console.log(this.state.count) },0) を実行します。
}

React での setState の使用と同期と非同期の使用に関するこの記事はこれで終わりです。React setState の同期と非同期に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。