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.log を試しましたが、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)、テスト時には設定しないでください。

例による定義：

// 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()

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

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

replaceStateは非推奨となったため、非常に簡単な回避策を次に示します。あなたがこれを必要とする/頼る必要があることはおそらく非常にまれですが。

状態を削除するには：

for (const old_key of Object.keys(this.state))
    this.setState({ [old_key]: undefined });

または、代わりに、複数の呼び出しをしたくない場合 setState

const new_state = {};
for (const old_key of Object.keys(this.state))
    new_state[old_key] = undefined;
this.setState(new_state);

基本的に、状態内の以前のすべてのキーはを返しますundefined。これは、ifステートメントで非常に簡単にフィルターできます。

if (this.state.some_old_key) {
    // work with key
} else {
    // key is undefined (has been removed)
}

if ( ! this.state.some_old_key) {
    // key is undefined (has been removed)
} else {
    // work with key
}

JSXの場合：

render() {
    return <div>
        { this.state.some_old_key ? "The state remains" : "The state is gone" }
    </div>
}

最後に、状態を「置き換える」には、新しい状態オブジェクトを、以前の状態のコピーと組み合わせて、状態undefinedとして設定します。

const new_state = {new_key1: "value1", new_key2: "value2"};
const state = this.state;

for (const old_key of Object.keys(state))
    state[old_key] = undefined;

for (const new_key of Object.keys(new_state))
    state[new_key] = new_state[new_key];

this.setState(state);