同一个 Provider 的多个声明是否会在 React 中创建新实例？

Question

问题 1 在 React 16 中。3.x Provider 会共享同一个实例而不考虑层次结构吗？

问题2共享value的LazyloadProvder会是同一个实例吗？

const value1 = {wow: () => {}}
<App>
  <LazyloadProvider value={value1}>
    <LazyloadConsumer >
     <h1>hello sibling 1</h1>
    </LazyloadConsumer>
    <LazyloadProvider value={value1}>
      <LazyloadConsumer>
       <h1>hello sibling 1 - child nest</h1>
      </LazyloadConsumer>
    </LazyloadProvider>
  </LazyloadProvider>
  <LazyloadProvider value={value1}>
    <LazyloadConsumer>
     <h1>hello sibling 2</h1>
    </LazyloadConsumer>
  </LazyloadProvider>
</App>

问题3不同values怎么办？

const value1 = {wow: () => {}}
const value2 = {wow: () => {}}
const value3 = {wow: () => {}}
<App>
  <LazyloadProvider value={value1}>
    <LazyloadConsumer >
     <h1>hello sibling 1</h1>
    </LazyloadConsumer>
    <LazyloadProvider value={value2}>
      <LazyloadConsumer>
       <h1>hello sibling 1 - child nest</h1>
      </LazyloadConsumer>
    </LazyloadProvider>
  </LazyloadProvider>
  <LazyloadProvider value={value3}>
    <LazyloadConsumer>
     <h1>hello sibling 2</h1>
    </LazyloadConsumer>
  </LazyloadProvider>
</App>

我不太了解这个 github 问题，但我认为它在谈论类似的事情 https://github.com/facebook/react/issues/13346

Answer 1

上下文 Consumer 从最近的 Provider 接收值。

如果 <LazyloadConsumer> 是 <LazyloadProvider value={value2}> 的 child，<LazyloadProvider value={value1}> 不会影响它。

这与变量作用域中的逻辑相同：

const foo = 1; // won't affect inner scope any way
{
  const foo = 2;
  console.log(foo); // 2
}

同一个 Provider 的多个声明是否会在 React 中创建新实例？

Do multiple declarations of the same Provider create new instances in React?

javascript

reactjs

react-context