[解決済み] ReactのsetState/getStateと非同期について

質問

Reactにはなぜ非同期getState関数がないのですか？

ドキュメントによると、setStateは非同期であるとのことです。しかし、それはつまり this.stateを安全に使用することはできません。 そして、実行順序を尊重するために、非同期のgetStateも必要です。

私の理解では、this.stateは決して使用せず、このようなgetState関数を使用すべきです。

  getState(callback) {
    this.setState((prevState) => {
      callback(prevState) ;
    });
  }
  ...
  this.getState((curState) => {
    // we now can use the current state safely
  }

私の考え方で何か見落としていることはありませんか？なぜReactにそのような機能がないのか？

-- EDIT --

私の友人はそれが明確ではなかったと私に言ったように、私は最初の答えが納得できないので、いくつかのコードの部分を分析しましょう。

simpleFunc() {
    setState({ "counter" : 1 });
    setState({ "counter" : 2 });
    this.state.counter // => no garanty about the value
    getState((curState) => {  // ensure curState.counter is 2 });
}

この簡単な例では すべての場面でthis.stateを直接使えるわけではありません。 setStateは非同期であるため。

ここで、getStateを使用できる例を挙げます。 http://codepen.io/Epithor/pen/ZLavWR?editors=0010#0

短い回答です。 悪い習慣で、getStateが現在の状態を教えてくれるかどうかもわからない。

回避策は簡単ですが、ある関数を因数分解して、文脈を気にせず使えるというのは面白そうですよね？

つまり、多くのイベントが特定の順番で発生したとき、あるイベントは状態を変更し、あるイベントは状態を読み取ります。 this.state は、すべての変更が非同期であるため、良い状態を読み取るために？

実際、すべては時間についてです。

T     : event 1, change state
T+1ms : event 2, change state
T+2ms : event 3, read state
T+3ms : event 4, change state

イベント1や2のsetStateがいつ発生するか正確には予測できないため。 イベント3がイベント2で設定された状態を本当に読み取ることをどのように保証するのでしょうか？

短い答えです。 イベントはJSスタックにキューイングされ、状態変化は内部Reactキューにキューイングされます。内部Reactのキューは手を出す前に完全にアンスタックされる。

解決方法は？

を使用すれば間違いありません。 this.state 直接 一般的に . 決して ミューテート 状態を直接 ( this.state.foo = 0 を使用し、代わりに setState は、状態を変化させたいときに使用します。

通常は setState はこのようになります。

this.setState({
    foo: 0
})

そうすると、安全に this.state.foo 例えば render() 関数を使用します。

しかし、注意点があります。 setState にすぐにアクセスできる保証はありません。 this.state 後 setState が呼び出されました。

myFunc(baz) {
    this.setState({
        foo: baz + 1
    })
    console.log(this.state.foo) // not guaranteed
}

した方が良い

myFunc(baz) {
    const bazOne = baz + 1
    this.setState({
        foo: bazOne
    })
    console.log(bazOne)
}

または setState 関数の2番目のパラメータで、setState操作の終了時に実行されるコールバックとして使用されます。このコールバックでは、更新された状態にアクセスできる。 this.state :

myFunc(baz) {
    this.setState({ foo: baz + 1 }, () => {
        console.log(this.state.foo) // guaranteed in callback
    });
}

ご覧ください。 https://facebook.github.io/react/docs/react-component.html#setstate