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

如何解决将状态和分派放入单独的上下文提供程序是否可以防止不必要的重新渲染？

我发现在 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)

解决方法

如果几乎​​所有组件都同时使用状态和分派，则不需要将它们放在单独的 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 在评论中指出的那样，如果您的应用程序中有很多组件在很大程度上只使用调度，因此它们不会重新渲染，那么将调度和状态保持在单独的上下文中是很有意义的如果状态发生变化。

即使我们用 useMemo hook 记住 contextValue，每次更新 contextValue 的值时，state 仍然会被重新评估，导致所有依赖于上下文的组件重新渲染，甚至其中一些只依赖于 dispatch。

另见：https://hswolff.com/blog/how-to-usecontext-with-usereducer/#performance-concerns

评估您的应用要求并明智地做出决定。