React の「setState」が非同期的に見えるのはなぜですか? 更新された状態がすぐに反映されるようにするにはどうすればよいですか?

React の遅延状態更新: 非同期 setState について

React コンポーネントを操作する場合、setState メソッドの性質を理解することが重要です。状態の更新が即座に行われる命令型プログラミングとは対照的に、React の setState は非同期です。これは、状態の更新がコンポーネントの内部状態への即時反映を保証するものではないことを意味します。

問題のケース: Delayed BoardAdd Modal Show Flag

次のコードを考えてみましょう。 React で BoardAdd コンポーネントを実装するスニペット:

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

When the openAddBoardModalメソッドが呼び出されると、boardAddModalShow フラグが true に設定され、その値がコンソールに出力されます。ただし、コンソール出力には、setState 呼び出しにもかかわらず値が false のままであることが示されます。

Why?

setState は非同期です。呼び出された後、React が再レンダリングをスケジュールするまで、UI は影響を受けません。 console.log ステートメントは、再レンダリングが行われる前に実行され、古い状態値が出力されます。

解決策: コールバックの使用

この問題を解決するには、次のようにします。 setState への引数としてコールバック関数を使用できます。コールバックは、状態が更新され、再レンダリングが行われた後に実行されます。

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}

この場合、console.log ステートメントは状態が更新された後に実行され、新しい内容が正しく表示されます。 boardAddModalShow の値を true に設定します。

setState を作成する理由Asynchronous?

setState のこの非同期の性質は、パフォーマンス向上の目的に役立ちます。状態の更新により再レンダリングがトリガーされるため、状態の更新を同期するとブラウザーが応答しなくなる可能性があります。 setState 呼び出しをバッチ処理すると、不必要な再レンダリングが最小限に抑えられ、ユーザー エクスペリエンスが向上するため、パフォーマンスが向上します。

以上がReact の「setState」が非同期的に見えるのはなぜですか? 更新された状態がすぐに反映されるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。