5

私は withReducer HOC を使用していますが、この動作に気付きました: たとえば、クリック ハンドラーでこれを呼び出す:

import React from 'react'
import { withReducer } from 'recompose'
import { compose } from 'ramda'

export default compose(
  withReducer('state', 'dispatch', (state, { value }) => {
    console.log(value)
    return { ...state, value }
  }, { value: 'zero' })
)((props) => {
  const { dispatch, state } = props,
    onClick = () => {
      console.log('Hello')
      dispatch({ value: 'one' })
      dispatch({ value: 'two' })
      dispatch({ value: 'three' })
      console.log('World')
    }
  return (
    <div>
      <div>{state.value}</div>
      <button onClick={onClick}>Click me</button>
    </div>
  )
})

それは生成します

こんにちは

世界

1

2

三

これは、reduce 関数が非同期で呼び出されることを意味します。変更をすぐに保存するのではなく、非同期と呼ぶ正当な理由は何ですか?

4

2 に答える 2

3

この場合、dispatch は実際にはバニラ API メソッドのラッパーですsetState。

ReactsetStateは、パフォーマンス上の理由から状態遷移がまとめてバッチ処理されることがあるため、非同期で実装します。

React docsによると：

setState() はすぐに this.state を変更しませんが、保留中の状態遷移を作成します....setState への呼び出しの同期操作の保証はなく、呼び出しはパフォーマンス向上のためにバッチ処理される場合があります。

于 2017-01-07T18:22:04.533 に答える