1. ホーム
  2. javascript

[解決済み] React.jsのsetStateとreplaceStateの比較

2023-01-22 21:29:36

質問

私は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 の両方を持つようになりました。 datatest .

次に、試しに this.setState({data: someArray}); に続いて this.setState({test: someArray}); と入力し、console.logged してみると state はまたもや datatest .

では、この2つの違いは一体何なのでしょうか?

どのように解決するのですか?

とは 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) を使わないでください。