web-dev-qa-db-ja.com

React.jsのsetStateとreplaceState

私はReact.jsライブラリーが初めてで、いくつかのチュートリアルを調べていましたが、出くわしました。

  • this.setState
  • this.replaceState

指定された説明はあまり明確ではありません（IMO）。

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

同様に、

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

this.setState({data: someArray});に続いてthis.replaceState({test: someArray});を試し、それらをconsole.loggedして、stateがdataとtestの両方を持つようになったことがわかりました。

次に、this.setState({data: someArray});に続いてthis.setState({test: someArray});を試し、それらをconsole.loggedして、stateが再びdataとtestの両方を持っていることがわかりました。

それで、2つの違いは正確に何ですか？

javascriptfrontendreactjs
93
myusuf

setStateを使用すると、現在の状態と以前の状態がマージされます。 replaceStateを使用すると、現在の状態が破棄され、指定したもののみに置き換えられます。通常、何らかの理由でキーを削除する必要がない限り、setStateが使用されます。しかし、それらをfalse/nullに設定することは、通常、より明確な戦術です。

可能ですが、変更される可能性があります。 replaceStateは現在、状態として渡されたオブジェクト、つまりreplaceState(x)を使用し、一度設定するとthis.state === xを使用します。これはsetStateよりも少し軽いので、数千のコンポーネントが頻繁に状態を設定している場合に最適化として使用できます。
このテストケース でこれをアサートしました。

現在の状態が{a: 1}で、this.setState({b: 2})を呼び出す場合;状態が適用されると、{a: 1, b: 2}になります。 this.replaceState({b: 2})を呼び出した場合、状態は{b: 2}になります。

サイドノート：状態は即座に設定されないため、テスト時にthis.setState({b: 1}); console.log(this.state)を実行しないでください。

136
Brigand

例による定義：

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

ただし、 docs からこのことに注意してください。

setState（）はすぐにthis.stateを変更しませんが、保留状態の遷移を作成します。このメソッドを呼び出した後にthis.stateにアクセスすると、既存の値が返される可能性があります。

replaceState()についても同様です

44
Grav

docs によると、replaceStateは非推奨になる可能性があります。

このメソッドは、React.Componentを拡張するES6クラスコンポーネントでは使用できません。 Reactの将来のバージョンでは完全に削除される可能性があります。

13
Liran Brimer