reactjs - 将状态和分派(dispatch)放入单独的上下文提供程序是否可以防止不必要的重新渲染？

Question

我发现在official next.js example , state和 dispatch将信息放在单独的上下文提供程序中。
这样做的意义何在？这种做法是否可以防止不必要的重新渲染？

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <CounterDispatchContext.Provider value={dispatch}>
      <CounterStateContext.Provider value={state}>
        {children}
      </CounterStateContext.Provider>
    </CounterDispatchContext.Provider>
  )
}

export const useCount = () => useContext(CounterStateContext)
export const useDispatchCount = () => useContext(CounterDispatchContext)

Answer 1

如果几乎所有组件都同时使用状态和分派(dispatch)，则不需要将它们放在单独的 ContextProvider 中，只需确保在将它们作为对象传递时记住传递给提供程序值的参数。这样你的消费者只会在状态实际改变时重新渲染。另请注意 dispatch实例实际上并没有改变，所以没有必要为它创建一个单独的上下文

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  const contextValue = useMemo(() => ({state, dispatch}), [state, dispatch])
  return (
    <CounterContext.Provider value={contextValue}>
        {children}
    </CounterContext.Provider>
  )
}

编辑:
正如@dciccale 在评论中指出的那样，如果您的应用程序中有很多组件在很大程度上只使用 dispatch 并且因此它们不会在状态更改时重新渲染，那么将 dispatch 和 state 保持在单独的上下文中是很有意义的.
即使我们记住了 contextValue带 useMemo Hook ， contextValue每次更新都会重新评估 state的值，导致所有依赖于上下文的组件重新渲染，甚至其中一些只依赖于 dispatch只要。
另见: https://hswolff.com/blog/how-to-usecontext-with-usereducer/#performance-concerns
评估您的应用要求并明智地做出决定。