useReducer/useState更新太慢

Question

我正在尝试删除我们应用程序的 redux。为此，我尝试使用新的 React Hooks API.

我写了自己的钩子，它是 useReducer 函数的扩展，每次更新时都保持状态。

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    const nextState = reducer(state, action)
    setState(nextState)
    persist(nextState, persistKey)
  }

  return [state, dispatch]
}

我的问题是我有这样的用例，我的调度函数在很短的时间间隔内被调用了几次，它们相互中继。就像一个数组，它总是在每次调度时添加一个新项目。为此，我合并了最后一个状态和新状态。因为它是在状态更新之前被调用的，所以最后的状态不是上次调用的新状态。因此我的状态只保存最后一次调度。有什么方法可以解决这个问题（除了更改更新的调用方式，因为它们来自第三方组件）

提前致谢。

Answer 1

我无法验证这是否有效，但我怀疑它会。您可以将 dispatch 中的 setState 调用更改为回调形式，这样您就可以在将现有状态传递到 reducer 之前引用它。

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    setState(prevState => { // Use callback form here.
      const nextState = reducer(prevState, action)
      persist(nextState, persistKey)
      return nextState
    });
  }

  return [state, dispatch]
}

useReducer/useState更新太慢

useReducer/useState updates too slow

javascript

reactjs

react-hooks