[React] useState

≪ステータス｜Status｜emdw≫
反応器内の素子は動的値を状態と呼ぶ.[リアクション](Reactions)では、状態値を変更する条件の1つとして、再レンダリングに使用できる条件がたくさんあります.USStateというフックによって、反応器は素子の状態を管理することができる.

function App() {
  const [count, setCount] = useState(0)
  const clickAddHandler = () => {
    setCount(prev => prev+1);
  }

  const clickSubHandler = () => {
    setCount(prev => prev-1)
  }
  return (
    <div className="App">
      <button onClick={clickAddHandler}>+</button>
      <button onClick={clickSubHandler}>-</button>
      <p>{count}</p>
    </div>
  );
}

const [count, setCount] = useState(0)
useStateを使用する場合、ステータスのデフォルト値をパラメータとして呼び出します.この関数を呼び出すと配列が返され、最初の要素は現在のステータスを格納し、2番目の要素はSetter関数で、ステータス値が変更されます.

 const [count, setCount] = useState(0)
 // 위의 코드는 아래와 같습니다.
 const countState = useState(0);
 const count = countState[0];
 const setCount = countState[1];

構造分解配分により、各要素をより簡単に抽出できます.
再整理後、Stateには現在のステータスが含まれており、setStateでステータスを変更できます.
上記のサンプルコードでsetCount(prev=>prev+1)セクションの既存のステータス値を更新する場合は、次のステータスを値に渡すのではなく、関数を追加して既存の値を更新することもできます.これを関数更新と呼びます.

setCount(count+1)
setCount(prev => prev+1)

では、既存の状態の演算と関数式の更新にはどのような違いがあるのでしょうか.
違いはstateの動作を変えることです.
関数型構成部品でusStateフックを使用するか、クラス構成部品でsetStateを使用するかにかかわらず、stateを変更する動作は非同期です.

this.state.value = 3;
this.setState({value: this.state.value + 1 });
this.setState({value: this.state.value + 1 });
this.setState({value: this.state.value + 1 });

// expected 6
// but this.state.value = 4

上のコードは6かもしれませんが、4があります.これは、setStateが複数回発生すると、ステータスが一括更新されるためです.呼び出しのたびに更新されるのではなく、パラメータに渡されたオブジェクトを1つのオブジェクトにマージします.これを「オブジェクトの組合せ」と呼びます.
コードで解くと、次のようになります.

const singleObj = Object.assign(
  {},
  objectFromSetState1,
  objectFromSetState2,
  objectFromSetState3
  );

オブジェクトに同じキーがある場合、最後に渡されたオブジェクトのキー値が上書きされるため、6ではなく4が表示されます.
簡単な答えは次のとおりです.

const mine = {beer: "cas"};
const yours = {beer: "max"};

const one = Object.assign({}, mine, yours);
one.beer === "max"; //true
console.log(one); //{beer: "max"}

これはsetStateも非同期更新状態であるため,コードがうまく記述されているように見えても,更新したくない場合がある.
この問題を解決するには、setStateがオブジェクトではなく関数を呼び出している場合、マージするオブジェクトがないため、呼び出し順にキューに格納され、順番に呼び出されます.
参考資料
https://dodokim.medium.com