機能アップデートの形で React useState を使用する必要があるのはなぜですか?

Question

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

「 」と「-」ボタンはアップデートにより機能形式を使用しています 値は前の値に基づいています

しかし、機能の更新を要求する目的は何なのか、また古い状態を直接使用して新しい状態を計算することとの違いは何なのかわかりません。

React useState Hook のアップデーター関数に機能更新フォームが必要なのはなぜですか? 違いが明確にわかる例はありますか (したがって、直接更新を使用するとエラーが発生します)。

たとえば、この例をドキュメントから変更したとします

リーリー

直接更新count:

リーリー

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

Answer 1

私は最近このニーズに気づきました。たとえば、配列に特定の数の要素を入力し、ユーザーのアクションに基づいてその配列に追加できるコンポーネントがあるとします (私の場合、ユーザーが常にフィードを保持しているため、一度に 10 項目のフィードをロードします)画面を下にスクロールすると、コードは次のようになります:

リーリー

useEffect フック内で setFeedItems を呼び出しているため、依存関係リストに feedItems を単に追加することはできず、ループにはまってしまいます。

問題を解決するための機能アップデート:

リーリー

Answer 2

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

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