react setStateの非同期動作


// 상태 업데이트(객체 전달) 
// 함수 실행될때 +1 씩 증가
handleIncrease = () => {
  this.setState({
    counter: this.state.counter + 1
  });
  this.setState({
    counter: this.state.counter + 1
  });
};

// 상태 업데이트(함수 전달) 
// 함수 실행될때 +2 씩 증가
handleIncrease = () => {
    this.setState(state => ({
      counter: state.counter + 1
    }));
    this.setState(state => ({
      counter: state.counter + 1
    }));
  };
setState関数を使用する場合は、上記のコードに示します.
パラメータを使用して、更新する値を入力できます.
関数を渡すこともできます.
2つの方法の違いを理解する.
反応式ドキュメントなら.
setState()は、構成部品のステータスに対する変更をキューに配置します.
構成部品とその子
ヒント:更新されたstateを使用して再レンダリングする必要があります.
setState()はすぐにステータスを変更しません.
要求変更状態と考えられる.
性能上、反応器は直ちに状態変更を起こさない.
非同期更新
これは、構成部品でステータスの変化を一括更新できることを意味します.
あるいは後で延期したり、
stateが直ちに変更されることは保証されません.
したがって、stateが変化し、何かを処理する必要がある場合は、
setState(updater,callback)の2番目のパラメータコールバック関数を使用するか、
ComponentDidUpdateを使用する必要があります.
再び戻ってきて、
setState()は非同期で実行されます.
1つの関数内で複数回呼び出された場合、バッチを実行できます.
これはObject.assignと同じ結果を示した.
Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)
  
// quantity 값은 계속 덮어쓰기 되어
// 가장 마지막 state.quantity + 1 이 적용됨  
// 이때는 state.quantity 값이 다 동일하기 때문에 
// 변경가 한번일어난 것으로 됨
したがって、ステータス値に基づいてステータス値を更新する必要がある場合はupdater関数を使用する必要があります.

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

//this.setState((state, props) => {
//  return { counter: state.counter + props.step };
//});
updater関数でステータスが更新された場合
構成部品が持つ状態の参照.
保証は最新の価格です.
また、updaterの結果はstate(merge)に浅くマージされます.
(なぜthis.setStateに変更するステータス値を入力するだけですか?)