React の setstate はいつ同期されますか?

React の setstate は、ネイティブ イベントと setTimeout では「同期」ですが、合成イベントとフック関数では「非同期」です。React では、それが React によってトリガーされたイベントである場合、setState を呼び出しても「this.state」は更新されません。 " は同期的に実行され、他の setState 呼び出しは "this.state" を同期的に実行します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react の setstate はいつ同期されますか?非同期になるのはいつですか?

最初に答えてください:

非同期のように見える場合もあれば、同期のように見える場合もあります。

setState は合成イベントとフック関数でのみ「非同期」であり、ネイティブ イベントと setTimeout では同期です。

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

1.setState は、合成イベントとフック関数でのみ「非同期」であり、ネイティブ イベントと setTimeout では同期です。

2. setState の「非同期」は、非同期コードによって内部的に実装されることを意味するものではありません。実際、実行プロセスとコードはすべて同期ですが、合成イベントとフック関数の呼び出しシーケンスは前に行われます。

その結果、合成イベントおよびフック関数では更新された値をすぐに取得できず、いわゆる「非同期」が形成されます。もちろん、更新された値は、 2 番目のパラメータ setState(partialState, callback) の結果。

3. setState のバッチ更新の最適化も「非同期」 (合成イベント、フック関数) に基づいています。ネイティブ イベントと setTimeout ではバッチ更新は行われません。

「非同期」では" "setState が同じ値に対して複数回実行される場合、setState のバッチ更新戦略はそれを上書きし、最後の実行を取得します。複数の異なる値が同時に setState である場合、それらはマージされ、途中でバッチで更新されます更新。

React では、React によってトリガーされるイベント処理 (onClick によってトリガーされるイベント処理など) の場合、setState を呼び出しても this.state は同期的に更新されません。他の setState 呼び出しによってこの状態が同期的に実行されます。いわゆる「追加」とは、React をバイパスして addEventListener を通じて直接追加されたイベント処理関数、および setTimeout/setInterval を通じて生成された非同期呼び出しを指します。

理由:

React の setState 関数の実装では、変数 isBatchingUpdates を使用して、this.state を直接更新するか、キューに入れるかを決定します。それについては後で話して、isBatchingUpdates デフォルトは false で、setState が this.state を同期的に更新することを意味します。ただし、batchedUpdates 関数があります。この関数は isBatchingUpdates を true に変更します。React がイベント処理関数を呼び出す前にこのバッチ更新を呼び出すと、つまり、React によって制御されるイベント処理プロセス setState は this.state を同期的に更新しません。

https://github.com/LuNaHaiJiao/blog/issues/26

推奨学習:「react ビデオ チュートリアル 」を参照してください。

以上がReact の setstate はいつ同期されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。