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

Question

我想了解this (mostly very helpful) article，它描述了如何使用 react 的上下文 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} />
}

提供上下文，然后是下面的钩子，它可以在组件树的某个地方使用：

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

我的问题：

我很难理解为什么这里需要useMemo 挂钩。这里没有涉及特别繁重的计算，所以我不确定我们为什么要记住这些值。如果上下文提供程序如下所示，这不是同样有效吗：

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 仅使用一种状态，即计数并将其传递给子级，并且如果CountContext 是顶级元素之一，除了计数更改之外不会重新渲染那么在这种情况下，您是否使用useMemo 没有区别，因为来自useMemo 的返回值的引用也会在计数更改时更新

但是，如果您有某些 CountProvider 的父级可能导致 CountProvider 重新渲染，则 useMemo 记忆上下文值会派上用场，以避免重新渲染所有上下文消费者

Answer 2

调用 setCount 总是会重新渲染一个组件

我相信即使将相同的值传递给函数，调用 setCount 也会始终重新呈现。

但是行

const value = React.useMemo(() => [count, setCount], [count])

除非计数值不同，否则将停止调用 setCount。从而减少重新渲染并提高性能。

您可以通过在其中放置日志并查看组件在使用和不使用 useMemo 时的呈现方式来测试这个理论。