[解決済み] 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つの違いは一体何なのでしょうか?
どのように解決するのですか?
とは
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)
を使わないでください。
関連
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み】React.jsの状態配列の正しい修正について
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法