Reactのsetstateとは何ですか

WBOY
リリース: 2022-04-21 17:06:11
オリジナル
2135 人が閲覧しました

react では、setstate はコンポーネントの状態を更新するために使用されるメソッドです; setState() はコンポーネントの状態への変更をキューに入れ、更新された状態を使用してこのコンポーネントとその子を再レンダリングする必要があることを React に通知します。 、構文は「setState(オブジェクト,[コールバック関数])」です。

Reactのsetstateとは何ですか

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

react の setstate とは

毎日の使用状況に基づいて、基本的にコンポーネントの状態を更新するために使用します。公式ドキュメントによると:

setState() はコンポーネントの状態への変更をキューに入れ、このコンポーネントとそのサブコンポーネントを更新された状態で再レンダリングする必要があることを React に通知します。これは、イベント ハンドラーに応答してユーザー インターフェイスを更新し、サーバー データを処理するための主な方法です。

setState() は、コンポーネントを即座に更新するコマンドではなく、リクエストとして考えてください。知覚されるパフォーマンスを向上させるために、React はそれを遅延呼び出しし、単一パスで複数のコンポーネントを更新します。 React は、状態の変更がすぐに有効になることを保証しません。

説明によると、setState の機能は、コンポーネントの状態更新タスクを呼び出して即座に状態を更新するのではなく、コンポーネントの状態更新タスクをタスクキューにキューイングすることです。つまり、setState はリクエストとみなされます。コンポーネントをただちに更新するコマンドではありません。したがって、setState メソッドを呼び出した後にコンポーネントの状態の値を取得すると、更新されていない値が取得されます。

setState() は、必ずしもコンポーネントをすぐに更新するとは限りません。更新をバッチで延期します。このため、setState() を呼び出した直後に this.state を読み取るのは危険です。隠れた危険を排除するには、componentDidUpdate または setState (setState(updater, callback)) のコールバック関数を使用してください。どちらのメソッドも、アプリケーションの更新後に確実にトリガーされます。

使用

setState(updater, [callback]),
ログイン後にコピー

updater は、stateChange オブジェクトを返す関数です: (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => { 
// 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })
ログイン後にコピー
setState(stateChange, [callback])
ログイン後にコピー

stateChange はオブジェクトです,

Callback は、ステータスが更新され、インターフェイスが更新された後に実行されるオプションのコールバック関数です。

this.setState({count: this.state.count + 1}), () => {
 // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })
ログイン後にコピー

概要:

オブジェクト モードは、function の略です。 mode

新しい状態が元の状態に依存しない場合===> オブジェクト メソッドを使用する

新しい状態が元の状態に依存する場合===> 関数を使用するMethod

setState() の後に必要な場合は、最新のステータス データを取得し、2 番目のコールバック関数で読み取ります。

推奨される学習: 「react ビデオ チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート