ホームページ > ウェブフロントエンド > jsチュートリアル > 「setState」が React コンポーネントの状態をすぐに更新しないのはなぜですか?

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

Patricia Arquette
リリース: 2024-12-20 18:10:19
オリジナル
632 人が閲覧しました

Why Doesn't `setState` Immediately Update React Component State?

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

React では、setState メソッドはコンポーネントの状態を設定するために使用される非同期関数です。これは、setState を呼び出した直後には状態が更新されないことを意味します。これは、setState がコンポーネントの再レンダリングをトリガーし、コストのかかる操作になる可能性があるためです。ブラウザーが応答しなくなることを避けるために、setState 呼び出しはバッチ化され、後で実行されます。

setState の非同期の性質

React ドキュメントによると、「setState() はすぐに this.state を変更しませんが、保留中の状態遷移を作成します。」したがって、setState を呼び出した後に this.state にアクセスすると、依然として既存の値が返される可能性があります。

バッチ化された setState 呼び出し

パフォーマンスの最適化のため、複数の setState 呼び出しがまとめてバッチ化され、1 回の再レンダリングで実行されることがあります。 。これにより、不必要な再レンダリングが防止され、UI の応答性が向上します。

コールバックの使用

setState の後に更新された状態値にアクセスするには、コールバック関数を 2 番目の引数として使用できます。このコールバックは、状態が更新された後に実行されます:

setState({ key: value }, () => {
    console.log('updated state value', this.state.key)
});
ログイン後にコピー

次の例を考えてみましょう:

class NightlifeTypes extends React.Component {
   handleOnChange = (event) => {
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: value}, () => { 
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        
      }
   }
}
ログイン後にコピー

この例では、handleOnChange 関数は次のように設定します。 barClubLounge 状態プロパティを value 引数に追加します。 setState 呼び出しのコールバック関数により、コンソール ログに更新された状態値が表示されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート