Reactで状態を取得する方法

React で状態を取得する方法: まず、対応する React コード ファイルを開き、次に React で「this.state.{property}」を通じて状態を直接取​​得できます。

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

反応で状態を取得するにはどうすればよいですか?

react では、this.state.{property} を通じて状態を直接取​​得できますが、状態を変更する場合、注意が必要な落とし穴が多くあります。

次の 3 つの一般的なトラップ:

1. 状態を直接変更することはできません。

コンポーネントは状態を変更し、レンダリングは再トリガーされません。例:

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2. 状態は非同期で更新されます

setState が呼び出されても、コンポーネントの状態はすぐには変更されません。変更される状態がイベント キューに入れられるだけです。実際の実行タイミングは最適化され、パフォーマンス上の理由により、複数の setState 状態変更が 1 つの状態変更にマージされる場合があります。したがって、次の状態を計算するために現在の状態に依存しないでください。状態の変更が実際に実行されるとき、依存する this.state が最新の状態であるとは保証されません。反応自体が複数の状態を 1 つにマージするためです。 .state は引き続き次の状態になります。 props の更新も非同期であるため、いくつかの状態変更前の状態は、現在の props に依存して次の状態を計算することもできません。 Eコマースアプリケーションの場合、ショッピングカート内で購入ボタンを1回クリックすると購入数量が1増加します。2回連続でクリックすると購入数量が2増加します。これは、次のコードを実行するのと同じです:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

したがって、前の操作は上書きされ、最終的な購入数量は 1 だけ増加します。このとき、別の関数をパラメータとして setState として使用できます。この関数には 2 つのパラメータがあり、最初のパラメータは現在の状態 preState (このコンポーネントの状態が変更される前の状態) または最新の状態 (このコンポーネントの状態が更新された後の状態)、2 番目のパラメータは最新の props です。 。リストは次のとおりです:

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3. 状態の更新はマージ プロセスです

ssetState() を呼び出してコンポーネントの状態を変更する場合、変更された状態のみを渡す必要があります。コンポーネントの状態の更新はマージプロセスであるため、完全な状態ではなく状態です。たとえば、コンポーネントの状態は次のとおりです:

this.state({
title:'React',
content:'React is an wondeful JS library'
})

タイトルのみを変更する必要がある場合は、次のことのみを行う必要があります。変更されたタイトルを setState に渡します:

this.setState({title:'ReactJs'});

react は、元の状態のコンテンツを保持しながら、最新のタイトルを元の状態にマージします。最終的にマージされた状態は次のとおりです:

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
})

関連する推奨事項: 「反応チュートリアル」

以上がReactで状態を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。