Provider 实例之间是不是共享从 React 中的相同上下文派生的上下文值？

Posted 2023-04-14

【中文标题】Provider 实例之间是不是共享从 React 中的相同上下文派生的上下文值？

【英文标题】：Is context value shared between Provider instances derived from the same context in React?Provider 实例之间是否共享从 React 中的相同上下文派生的上下文值？

【发布时间】：2020-03-12 14:32:02

【问题描述】：

我有一个 Provider 组件，我通过钩子导出其值。

我所描述的简单实现是这样的：

// SomeProvider.jsx
const SomeContext = React.createContext(null);

function SomeProvider(props) 
  const [state, setState] = useState(null)

  useEffect(() => 
    //some logic
    setState(newValue)
  , [props.someValue])

  return <SomeContext.Provider value=state ...props />;


const useSome = () => React.useContext(SomeContext);

export  SomeProvider, useSome ;

现在，如果我想在多个地方使用这个上下文提供程序怎么办？例如

// App.jsx
<SomeProvider someValue=valueOne>
  <SomeComponent />
</SomeProvider>
<SomeProvider someValue=valueTwo>
  <SomeOtherComponent />
</SomeProvider>

其中valueOne 和valueTwo 可能会发生变化

// SomeComponent.jsx
import  useSome  from 'SomeProvider';

function SomeComponent() 
  const someValue = useSome();

  return ....

// SomeOtherComponent.jsx
import  useSome  from 'SomeProvider';

function SomeOtherComponent () 
  const someValue = useSome();

  return ....

这种方法会导致两个SomeProvider 实例共享一个共同的值，从而搞砸事情吗？

如果是这种情况，最终使每个 SomeProvider 拥有自己的“私有”值的正确方法是什么？

如果不是这样，那么这是如何工作的，因为所有 Providers 都派生自同一个 React.useContext() 调用？

【问题讨论】：

你试过了吗？我 99% 确信他们不会共享价值观，因为他们提供了两种不同的上下文

我认为它们将共享相同的值，因为它们源自相同的React.createContext()（它只在模块中执行一次）。我会做一个简短的演示，然后回来回答

我是对的。刚刚测试过codesandbox.io/s/delicate-mountain-khig9

【参考方案1】：

即使createContext 只被调用一次，React 也会在每次渲染上下文提供者时创建这些上下文的实例。当调用useContext 时，React 将向上渲染树查找给定 type 的最近 Provider 并从该上下文的 instance 中获取该值。 p>

Example

【讨论】：

所以，如果我做对了，用外行的话来说，createContext(value) 只是将其value 作为初始值传递给每个新的Provider 实例，但之后每个实例都是彼此完全隔离

没错。更清楚地说，Context.Provider 组件上的 value 属性是可选的。您已经使用它实现了一种修改传递给createContext 的默认值的方法——但您刚才所说的完全正确。