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

我正在试图理解哪个描述了如何使用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} />
}

我的问题: 我很难理解为什么这里需要

usemo

hook。这里没有特别繁重的计算，所以我不确定我们为什么要记住这些值。如果上下文提供程序看起来如下所示，那么这不是同样有效吗：

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

function CountProvider（道具）{
const[count，setCount]=React.useState（0）
返回
}

我觉得我可能错过了什么

调用setCount将始终重新呈现组件 我相信调用setCount总是会重新启动，即使相同的值被传递给函数

但是这条线

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

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

---

您可以通过在内部放置日志并查看组件在使用和不使用useMemo的情况下如何呈现来测试这一理论。

有一个非常简单的理论来解释为什么应该使用useMemo来记录返回给上下文提供程序的值。将值作为对象或数组传递给上下文提供程序时，如

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

返回

或

返回

实际上，每次CountProvider组件重新呈现对对象或数组的新引用时，都会将其作为值传递给

CountContext.Provider

，因此即使实际值可能没有更改，也会重新呈现上下文使用者，因为该值的引用检查失败

现在，您可能需要或不需要UseMoom，这取决于您的

ContextProvider

中的逻辑。例如，在您的情况下，

CountContext

仅使用一种状态，即count，并将其传递给子元素，如果

CountContext

是顶层元素之一，除count更改外，不会重新呈现，那么在这种情况下，是否使用

usemo

与引用

usemo

返回的值也会在计数更改时更新

---

但是，如果您有特定的父对象

CountProvider

，这可能会导致

CountProvider

重新呈现，那么

usemo

记忆上下文值就很方便，可以避免重新呈现所有上下文使用者

谢谢。是的，这是有道理的。这个答案和另一个答案都为记忆上下文值提供了很好的理由。我接受了另一个答案，但它们似乎都是合理的理由。当然，另一个答案提供了更多的深度。我很高兴能帮助一位反应热烈的朋友！！我和作者有同样的问题，不幸的是这个建议对我不起作用：（谢谢。是的，这很有道理，很高兴能帮上忙：-）

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

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