reactjs - 是否需要 useMemo 来通过 reactjs 中的上下文 API 管理状态？

Question

我想了解 this (mostly very helpful) article其中描述了如何使用 react 的 context API 来管理应用程序级的状态。对于一个简单的应用程序(在本例中是一个基本的计数器应用程序)，它使用以下解决方案:

const CountContext = React.createContext()

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = React.useMemo(() => [count, setCount], [count])
  return <CountContext.Provider value={value} {...props} />
}

提供上下文，然后可以在组件树的某个位置使用以下钩子(Hook):

function useCount() {
  const context = React.useContext(CountContext)
  if (!context) {
    throw new Error(`useCount must be used within a CountProvider`)
  }
  return context
}

我的问题:
我很难理解为什么 useMemo这里需要钩子(Hook)。这里没有涉及特别繁重的计算，所以我不确定我们为什么要记住这些值。如果上下文提供程序如下所示，这是否也能正常工作:

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  return <CountContext.Provider value={value} {...props} />
}

我觉得我可能缺少一些东西!

Answer 1

有一个非常简单的理论来解释为什么要使用 useMemo 来内存返回给 Context Provider 的值。当您将值作为对象或作为数组传递给上下文提供程序时

return <CountContext.Provider value={{state, setCount}} {...props} />

或者

return <CountContext.Provider value={[state, setCount]} {...props} />

本质上发生的是，每次 CountProvider 组件重新呈现对对象或数组的新引用时，都会将其作为值传递给 CountContext.Provider。因此，即使实际值可能没有改变，上下文消费者也会重新渲染，因为该值的引用检查失败

现在，您可能需要也可能不需要 useMemo，具体取决于您的 ContextProvider 中的逻辑。 .例如，在您的情况下 CountContext只是使用一种状态，即计数并将其传递给 child ，如果 CountContext是顶级元素之一，除了计数更改之外不会重新渲染，那么在这种情况下，您是否使用 useMemo与否没有区别，因为返回值的引用来自 useMemo计数变化也会更新

但是，如果您有某些 parent 到CountProvider这可能导致CountProvider重新渲染，useMemo内存上下文值很方便，可以避免重新渲染所有上下文消费者