react学習ノートのstate及びset Stateの使用

reactでは、stateおよびset State（）によってコンポーネントの状態を制御します。
state
stateは、reactでコンポーネントのデータ状態を記憶するためのもので、vueのdataに類比することができる。
1.stateの役割
stateはReactのコンポーネントの一つのオブジェクトです。Reactはユーザーインターフェースを状態マシンとして扱い、異なる状態を想像してレンダリングします。ユーザーインターフェースとデータを簡単に一致させることができます。
Reactでは、コンポーネントのstateを更新することで、ユーザーインターフェースを再レンダリングすることができます。簡単に言えば、ユーザインターフェースはstateによって変化します。
2.state作業原理
よく使われているReactデータの変化を通知する方法は、set Stateを呼び出すことです。この方法は、dataからthis.stateまで統合し、コンポーネントを再レンダリングします。レンダリングが完了したら、オプションの呼び出しを行います。
calbackフィードバック.ほとんどの場合はcalbackを提供する必要はありません。Reactが担当しますので、画面を最新の状態に更新します。
set State()
vueとは違ってstateが直接修正されないので、set Stateの方法で修正する必要があります。
1、セットステーション（）の状態を更新したらすぐに効果が発生しません。reactは性能を向上させるためにロットごとにstateを更新してレンダー、すなわち非同期で操作します。だからset Sate（）はその後すぐにstateの値を取りに行って更新後の状態ではありません。
2、setState()最初のパラメータは2種類のパラメータ、ObjectおよびFunctionを受け付けます。
Object

this.setState({
 msg: '  state msg'
})

パラメータがObjectの場合、対応stateのkeyとなり、valueは新しい値となります。
Function
パラメータが関数の場合、set State()は前のset State()の結果をパラメータとしてこの関数に伝えます。

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) //   `this.state.counter`       0,，          
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter`          ，  1
}
...

set State()の2番目のパラメータは、フィードバック関数であり、stateの更新が完了したことを表しています。

this.setState({
 msg: '  state msg'
}, () => {
 console.log('state     ')
})

これによりPromiseやasync/awaitを使って、同期操作にパッケージ化できます。

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
//   
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state     ')
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。