React の `setState` が状態を即座に更新しないのはなぜですか?

setState 非同期: 状態を即座に更新しないのはなぜですか?

React アプリケーションでは、setState メソッドが非同期状態更新をトリガーし、更新された状態がすぐに期待される場合、混乱を招く可能性があります。この動作を理解することは、効果的な状態管理にとって重要です。

非同期の理由:

setState は、リソースを大量に消費する可能性のある再レンダリング プロセスを開始するため、非同期です。スムーズなユーザー エクスペリエンスを確保するために、React はこれらの更新をバッチ処理してパフォーマンスを最適化します。このバッチ動作により、大量の状態更新中に UI が応答しなくなるのを防ぎます。

結果:

setState を呼び出しても、状態は即座には更新されません。 setState 呼び出し後に this.state にアクセスすると、更新が完了するまで前の状態値が返される場合があります。この動作により、更新された状態にすぐに依存するコードで予期しない結果が発生する可能性があります。

コールバック メソッドの使用:

setState 呼び出し後に更新された状態にアクセスするには、React は次のことを推奨します。 2 番目の引数としてコールバック関数を使用します。このコールバックは、状態の更新が完全に処理された後にのみ実行され、最新の状態値へのアクセスが保証されます。

setState({ key: value }, () => {
  console.log('Updated state value:', this.state.key);
});

例:

次のコードを考えてみましょう。

class NightlifeTypes extends React.Component {
  handleOnChange = (event) => {  // Arrow function binds `this`
    const value = event.target.checked;

    if (event.target.className === "barClubLounge") {
      this.setState({ barClubLounge: value });
      // Console log will still print the old state value here

      // Use a callback to log the updated state value
      this.setState({ barClubLounge: value }, () => {
        console.log(value);
        console.log(this.state.barClubLounge);
      });
    }
  };
  render() {
    return (
      <input
        className="barClubLounge"
        type="checkbox"
        onChange={this.handleOnChange}
        checked={this.state.barClubLounge}
      />
    );
  }
}

ReactDOM.render(<NightlifeTypes />, document.getElementById("app"));

この例では、handleOnChange メソッド内のコンソール ログは、直後の状態にアクセスする場合との違いを示しています。 setState を使用し、コールバックを使用します。コールバックにより、コンソールは更新された状態値を正しく出力します。

React アプリケーションで状態を効果的に管理するには、setState の非同期の性質を理解することが不可欠です。コールバック メソッドを活用すると、予期しない動作を回避し、最新の状態値に適切にアクセスできるようになります。

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