`setState()` が React コンポーネントの状態をすぐに更新しないのはなぜですか?

setState() メソッドを呼び出してもすぐに状態が変更されないのはなぜですか?

React アプリケーションで、setState が変更されるという問題が発生しました。 () メソッドが予想とは異なる動作をしているようです。具体的には、チェックボックスの状態を更新するときに、状態をイベント ターゲットと同じ値に設定しているにもかかわらず、更新された状態の値がコンソールにすぐに反映されないことに気づきました。

の理由この動作は、setState() の非同期の性質にあります。すぐに実行される同期メソッドとは異なり、setState() は状態の更新をスケジュールしますが、即座に変更するわけではありません。これは、パフォーマンスを最適化し、UI スレッドのブロックを回避するために行われます。

非同期状態更新について

非同期状態更新とは、更新された直後には更新された状態値に直接アクセスできないことを意味します。 setState() を呼び出します。代わりに、setState() の 2 番目の引数としてコールバック関数を使用する必要があります。このコールバック関数は、状態の更新が完了した後に呼び出され、更新された値にアクセスできるようになります。

たとえば、あなたの場合、次の構文を使用して、setState() の後に更新された状態を確認できます。 call:

setState({ barClubLounge: event.target.checked }, () => {
  console.log(this.state.barClubLounge); // Updated value
});

なぜ setState なのかAsynchronous?

setState が非同期であるのは、状態の更新によるパフォーマンスへの影響によるものです。状態を変更すると、コンポーネントの再レンダリングがトリガーされる可能性があり、これはコストのかかる操作になる可能性があります。 React は、状態更新を非同期でバッチ処理およびスケジュールすることにより、ブラウザーに負荷をかけることなくスムーズでパフォーマンスの高い UI 更新を保証します。

以上が`setState()` が React コンポーネントの状態をすぐに更新しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。