React の useState フォームと機能更新フォームが必要なのはなぜですか?

Question

React Hook 関数の更新に関するドキュメントを読んでいて、次の文を見つけました:

<ブロック引用>

更新された値は前の値に基づいているため、「 」および「-」ボタンは関数形式を使用します

しかし、関数更新の目的がわかりません。また、新しい状態を計算するときに古い状態を直接使用することとの違いもわかりません。

React useState Hook の更新関数に関数更新フォームが必要なのはなぜですか? 違いがはっきりとわかる（したがって、直接更新を使用するとエラーが発生する）例は何ですか?

たとえば、ドキュメントの例を次のように変更すると、

function Counter({initialCount}) {
  const [カウント, setCount] = useState(initialCount);
  戻る （
    <>
      カウント: {カウント}
      <button onClick={() => setCount(initialCount)}>リセット</button>
      <button onClick={() => setCount(prevCount => prevCount 1)}> </button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

count を直接更新します:

function Counter({initialCount}) {
  const [カウント, setCount] = useState(initialCount);
  戻る （
    <>
      カウント: {カウント}
      <button onClick={() => setCount(initialCount)}>リセット</button>
      <button onClick={() => setCount(count 1)}> </button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </>
  );
}

動作に違いは見られず、カウントが更新されない（または最新ではない）状況は想像できません。カウントが変更されるたびに、最新のカウントを取得するために新しいクロージャーが呼び出されるからです。

Answer 1

私は最近このニーズに遭遇しました。たとえば、配列にデータを設定し、ユーザーによる何らかのアクション (私の場合はユーザーが画面を下にスクロールし続けたときなど) に基づいて毎回 10 項目の動的ソースをロードできるコンポーネントがあるとします。コードは次のようになります。次のようになります:

リーリー

明らかに、useEffect フックの依存関係リストに feedItems を単純に追加することはできません。その中で setFeedItems を呼び出すため、ループにはまってしまいます。

機能アップデートによる救済:

リーリー

Answer 2

React では、ステータスの更新は非同期です。したがって、次回の更新では、count に古い値が含まれる可能性があります。たとえば、次の 2 つのコード例の結果を比較してください:

リーリー ＃＃＃そして＃＃＃ リーリー