React における setState の同期または非同期の問題の理解

1. setState は同期的ですか?非同期ですか?

React のクラスコンポーネントでは、setState メソッドを使用して状態を更新できます。しかし、setState を使用した後、最新のデータを取得できない場合があります。

実際、React における setState の実行プロセス自体はコードと同期されており、これは React フレームワーク自体のパフォーマンス最適化メカニズムによってのみ発生します。 React では、更新前に合成イベントとライフサイクル関数が呼び出されるため、合成イベントとライフサイクル関数で更新された値をすぐに取得できず、非同期形式になります。

合成イベントで setState メソッドが n 回呼び出された場合、React が最適化されていないと、現在のコンポーネントが n 回レンダリングされ、パフォーマンスが大幅に無駄になります。したがって、パフォーマンス上の理由から、React は setState メソッドへの複数の呼び出しを 1 回の実行にマージします。 setState を実行しても、状態内のデータはすぐには更新されません。

前述したように、React の合成イベントとライフサイクル関数で setState を直接呼び出すと、非同期的に動作します。

さらに、React のパフォーマンス最適化メカニズムをバイパスし、ネイティブイベントで setState または setTimeout を使用すると、同期的に動作します。

2. 非同期的に動作する

1. React合成イベント

onChange、onClick など、React で直接使用されるイベントは、React によってカプセル化されたイベントです。これらは合成イベントであり、React によって管理されます。すると、パフォーマンス最適化メカニズムにより、合成イベントで setState を直接呼び出すと非同期になります。

次のコードでは、合成イベント onClick で、状態内の count が直接 1 増加し、その後 count の値が出力されます。その結果、ボタンが初めてクリックされたときに、最新の 1 ではなく 0 が出力されます。

状態 = { カウント: 0 };
追加 = () => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0
};
与える（） {
    戻る （
        <>
            <div>現在のカウント: {this.state.count}</div>
            <button onClick={this.add}>追加</button>
        </>
    );
}

2. ライフサイクル機能

ライフサイクル関数も React によって管理されます。ライフサイクル関数内で setState を直接呼び出すと、非同期的に動作します。

次のコードでは、ライフサイクルのcomponentDidMount関数で、状態内のカウントが1増加し、その後countの値が出力されます。結果は最新の1ではなく0になります。

状態 = { カウント: 0 };
コンポーネントマウント() {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0
}
与える（） {
    戻る （
        <>
            <div>現在のカウント: {this.state.count}</div>
            <button>追加</button>
        </>
    );
}

3. 同期として表示される

1. ネイティブイベント

setState の実行プロセス自体は同期的です。ネイティブイベントを使用し、React の管理をバイパスすると、同期フォームが表示されます。

次のコードは、ID によって DOM 要素を取得し、ネイティブメソッドを使用してクリックイベントをバインドします。クリックイベントでは、状態の count に 1 を追加し、count の値を出力します。その結果、最新の count 値 1 が出力されます。

状態 = { カウント: 0 };
コンポーネントマウント() {
    btn = document.getElementById('btn');
    btn.onclick = () => {
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count); // 1
    };
}
与える（） {
    戻る （
        <>
            <div>現在のカウント: {this.state.count}</div>
            <button id="btn">追加</button>
        </>
    );
}

2.タイムアウトを設定する

次のコードは、ライフサイクルのcomponentDidMount関数にタイマーsetTimeoutを記述します。setTimeout内では、状態のcountが1増加し、その後countの値が出力されます。その結果、最新のcount値1が出力されます。

setState はライフサイクルの componentDidMount 関数にも記述されていますが、componentDidMount に直接記述されているわけではなく、setTimeout のレイヤーでラップされています。このように、setState は同期的に動作します。

状態 = { カウント: 0 };
コンポーネントマウント() {
    タイムアウトを設定する(() => {
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count); // 1
    }, 0);
}
与える（） {
    戻る （
        <>
            <div>現在のカウント: {this.state.count}</div>
            <button>追加</button>
        </>
    );
}

4. setStateの2番目のパラメータ

setState がオブジェクト指向形式で記述されているか関数指向形式で記述されているかに関係なく、オプションのコールバック関数である 2 番目のパラメーターがあります。このコールバック関数は、状態が更新され、インターフェイスが更新された後 (render が呼び出された後) にのみ呼び出されます。

以下のコードのように、componentDidMount 内で直接 setState を呼び出していますが、setState のコールバック関数内で count の値が出力され、最新の値 1 が取得されています。状態が更新された後にコールバック関数が呼び出されるので、当然最新の count が取得できます。

状態 = { カウント: 0 };
コンポーネントマウント() {
    this.setState({ count: this.state.count + 1 }, () => {
        console.log(this.state.count); // 1
    });
}
与える（） {
    戻る （
        <>
            <div>現在のカウント: {this.state.count}</div>
            <button>追加</button>
        </>
    );
}

React の setState の同期または非同期の問題を理解するこの記事はこれで終わりです。React の setState の同期または非同期に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: