2017-01-11 16 views
0

私は以下の記事を読んでいました。 https://facebook.github.io/react/docs/react-component.html#setstateReactのsetstateメソッドの新しい署名?

次のようなsetStateの前に見つかりました。

this.setState({mykey: 'my new value'}); 

ただし、次のような新しい署名があります。

this.setState((prevState, props) => { 
    return {myInteger: prevState.myInteger + props.step}; 
}); 

公式DOCは「これは、任意の値を設定する前の状態と小道具の前の値を調べアトミック更新をエンキューします。」と説明しています。 しかし、私は理解していません。私は、setStateの呼び出しの同期動作が保証されていないことを知っています。しかし、新しい署名方法は同期的であるか、または他の効果を持つでしょうか?

誰か説明できますか?

答えて

1

オブジェクトと関数でsetStateを呼び出すの違いは以下の通りです、あなたの状態オブジェクトがちょうど{ counter: 1 }先頭であると仮定します

は、あなたがSETSTATEが非同期であることを考えると

setState({ counter: this.state.counter + 1}); 
setState({ counter: this.state.counter + 1}); 

を行うと仮定2つの呼び出しの後に、予期しない{ counter: 2 }状態オブジェクトがある可能性があります(これは今試してみると起こります)。setStateに渡されたオブジェクトの両方が{ counter: 2 }と評価されます。

あなたが機能を渡した場合:

setState(state => ({ counter: state.counter + 1})) 
setState(state => ({ counter: state.counter + 1})) 

を(これは彼らのSETSTATEコールが呼び出された順にエンキューされ、関数内でオブジェクトが動的に計算されていることを考えると、あなたは正しいになってしまいますまたは期待される)答えは{ counter: 3 }です。

関連する問題