Articles

React`setState`

by admin

の理解Reactコンポーネントは状態を持つことができ、しばしばそうします。 状態は何でもかまいませんが、ユーザーがログインしているかどうか、どのアカウントがアクティブであるかに基づいて正しいユーザー名を表示する またはブログ記事の配列。 または、モーダルが開いているかどうか、その中のどのタブがアクティブであるか。

状態を持つReactコンポーネントは、その状態に基づいてUIをレンダリングします。 コンポーネントの状態が変更されると、コンポーネントUIも変更されます。

コンポーネントの状態をいつどのように変更するかを理解することが重要です。 このチュートリアルの最後に、setStateがどのように機能するかを知っていて、Reactを学ぶときに私たちの多くが打つ一般的な落とし穴を避

`setState()`の動作

setState()初期状態のセットアップ後に状態を更新する唯一の正当な方法です。 検索コンポーネントがあり、ユーザーが送信した検索語を表示したいとします。

ここでの設定です。

ここでの設定は:値として空の文字列を渡しており、searchTermsetState()setState()searchTermの値です。 Reactはこの値を取得し、それを必要とするオブジェクトにマージします。 これは、SearchsearchTermsetState()は答えで応答します。これは基本的に、Reactが調整を呼び出すプロセスを開始します。

これは基本的に、reactが調整を呼び出すプロセスを開始しています。 調整プロセスは、Reactが状態の変化に基づいてコンポーネントに変更を加えることによってDOMを更新する方法です。 setState()へのリクエストがトリガーされると、Reactは（更新された状態と共に）コンポーネント内の反応要素を含む新しいツリーを作成します。 このツリーは、SearchコンポーネントのUIが前のツリーの要素と比較して、状態の変化に応じてどのように変化するかを把握するために使用され Reactはどの変更を実装すべきかを知っており、必要に応じてDOMの部分のみを更新します。 これがReactが速い理由です。それはたくさんのように聞こえるが、流れをまとめるために:

  • 検索用語を表示する検索コンポーネントがあります
  • 検索用語が現在空であること
  • ユーザーが検索用語を送信します
  • その用語はsetStateによってキャプチャされ、保存されます
  • 調整が行われ、Reactは値の変更に気付きます
  • Reactは検索コンポーネントに値を更新するように指示し、検索用語がマージされます。

調整プロセスは、ツリーのルートが次のように変更される場合を除いて、必ずしもツリー全体を変更するわけではありません:すべての<div><span>タグになり、コンポーネントツリー全体が結果として更新されます。経験則は、状態を直接変更しないことです。

状態を変更するには、常にsetState()を使用します。 以下のスニペットのように状態を直接変更しても、コンポーネントは再レンダリングされません。

// do not do thisthis.state = { searchTerm: event.target.value}

`setState()`に関数を渡す

このアイデアをさらに実証するために、クリック時にインクリメントとデクリメントを行う単純なカウン

CodePenのKingsley Silas Chijioke(@kinsomicrote)によるペンsetStateペンを参照してください。

コンポーネントを登録し、UIのマークアップを定義しましょう。

class App extends React.Component {state = { count: 0 }handleIncrement = () => { this.setState({ count: this.state.count + 1 })}handleDecrement = () => { this.setState({ count: this.state.count - 1 })} render() { return ( <div> <div> {this.state.count} </div> <button onClick={this.handleIncrement}>Increment by 1</button> <button onClick={this.handleDecrement}>Decrement by 1</button> </div> ) }}

この時点で、カウンタはクリックごとにカウントを1ずつインクリメントまたはデクリメントします。

しかし、代わりに3ずつ増減したい場合はどうなりますか？ このような関数は、setState()handleDecrementhandleIncrementで3回呼び出すことができます:p>

handleIncrement = () => { this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 })}handleDecrement = () => { this.setState({ count: this.state.count - 1 }) this.setState({ count: this.state.count - 1 }) this.setState({ count: this.state.count - 1 })}

あなたが自宅で一緒にコーディングしている場合、あなたはそれが動作しないことを見つけるために驚くかもしれません。

上記のコードスニペットは次のものと同じです。

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

Object.assign()Object.assign()がどのように動作するかの簡単なバージョンです。

let count = 3const object = Object.assign({}, {count: count + 1}, {count: count + 2}, {count: count + 3});console.log(object);// output: Object { count: 6 }

だから、呼び出しが三回起こるのではなく、一度だけ起こります。 これはsetState()setState()渡すのと同じように、関数を渡すこともできます。

handleIncrement関数を次のように編集すると、

handleIncrement = () => { this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 }))}

…ワンクリックでカウントを三回インクリメントできるようになりました。

この場合、Reactはマージの代わりに、関数呼び出しを行われた順序でキューに入れ、完了した状態全体を更新します。 これにより、countの状態が1ではなく3に更新されます。

アップデータを使用して前の状態にアクセス

Reactアプリケーションを構築するとき、コンポーネントの前の状態に基づいて状態を計算したい this.statesetState()、常に画面にレンダリングされた状態と等しいためです。

カウンターの例に戻り、これがどのように機能するかを見てみましょう。 カウントを1ずつ減少させる関数があるとしましょう。 この関数は次のようになります:p>

changeCount = () => { this.setState({ count: this.state.count - 1})}

私たちが望むのは、3だけデクリメントする機能です。 このように、clickイベントを処理する関数では、changeCount()関数が3回呼び出されます。

handleDecrement = () => { this.changeCount() this.changeCount() this.changeCount()}

デクリメントするボタンがクリックされるたびに、カウントは3ではなく1ずつデクリメントされます。 これは、コンポーネントが再レンダリングされるまでthis.state.countchangeCount()this.statecountchangeCount()setState()を呼び出した後に状態が変更されるとは限りません。

ラップアップ

setState()で作業するとき、これらはあなたが知っておくべき主なものです。

  • コンポーネントの状態への更新は、setState()
  • オブジェクトまたは関数をsetState()
  • オブジェクトまたは関数をsetState()
  • setState()
  • を使用して行う必要があります。/div>
  • 状態を複数回更新することができるときに関数を渡します
  • これに依存しません。setState()を呼び出した直後に状態を設定し、代わりにupdater関数を使用します。