React では、setState メソッドはコンポーネントの状態を設定するために使用される非同期関数です。これは、setState を呼び出した直後には状態が更新されないことを意味します。これは、setState がコンポーネントの再レンダリングをトリガーし、コストのかかる操作になる可能性があるためです。ブラウザーが応答しなくなることを避けるために、setState 呼び出しはバッチ化され、後で実行されます。
React ドキュメントによると、「setState() はすぐに this.state を変更しませんが、保留中の状態遷移を作成します。」したがって、setState を呼び出した後に this.state にアクセスすると、依然として既存の値が返される可能性があります。
パフォーマンスの最適化のため、複数の 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 サイトの他の関連記事を参照してください。