时间戳

首页 > 解决方案 > Provider 实例之间是否共享从 React 中的相同上下文派生的上下文值？

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

问题描述

我有一个 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()调用派生的？

标签： reactjsreact-hooksreact-context

解决方案

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

例子

推荐阅读