React で state と setState を使用する方法 (詳細なチュートリアル)

この記事は、React の勉強ノートでの state と setState の使い方を中心に紹介しています。編集者が非常に良いと思ったので、参考として共有します。エディターに従って見てみましょう

React では、state と setState() を使用してコンポーネントの状態を制御します。

state

state は、vue のデータと比較できるコンポーネントのデータステータスを保存するために反応する際に使用されます。

1. state の役割

state は React のコンポーネントのオブジェクトです。React はユーザー インターフェイスをステート マシンとして扱い、さまざまな状態を想定してこれらの状態をレンダリングすることで、ユーザー インターフェイスを簡単に作成できます。

React では、コンポーネントの状態を更新すると、ユーザー インターフェースが再レンダリングされます (DOM を操作しないでください)

。 2. 状態の動作原理

一般的に使用されるデータの変更を React に通知する方法は、setState(data, callback) を呼び出すことです。このメソッドはデータを this.state にマージし、レンダリングが完了した後にコンポーネントを再レンダリングします。オプションの

callback コールバックが呼び出されます。

setState()

vue との違いは、React がインターフェースを最新の状態に更新するためです。その状態は直接変更できないため、setState() メソッドを通じて変更する必要があります。

1. SetState() は、パフォーマンスを向上させるために、バッチで状態を更新してからレンダリングするため、setSate 直後の状態の値は反映されません。 ()内はアップデート後の状態ではありません。

2. setState() の最初のパラメータは、Object と Function の 2 種類のパラメータを受け入れます

Object

this.setState({
 msg: '更新state msg'
})

パラメータが Object の場合、対応する状態のキーにすることができ、値は新しい値になります1 つの値。

関数

パラメータが関数の場合、setState()は前のsetState()の結果をパラメータとしてこの関数に渡します

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

setState() 2番目のパラメータはコールバック関数で、状態の更新を示します完了

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

これによると、Promiseとasync/awaitを使って同期操作にカプセル化することができます

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

WeChatミニプログラムで画像切り替え表示を実現するスワイパーコンポーネントの使い方

vue2.0でよく使われるUIライブラリは何ですか?

C#で文字を整数に変換する方法

vue2.0とanimate.cssをマージする方法(詳細なチュートリアル)

以上がReact で state と setState を使用する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。