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

Posted 2023-04-14

【中文标题】同一 Provider 的多个声明是不是会在 React 中创建新实例？

【英文标题】：Do multiple declarations of the same Provider create new instances in React?同一 Provider 的多个声明是否会在 React 中创建新实例？

【发布时间】：2019-06-04 14:08:33

【问题描述】：

问题 1 在 React 16.3.x 中，Providers 是否会共享同一个实例而不考虑层次结构？

问题 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

【参考方案1】：

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

如果<LazyloadConsumer> 是<LazyloadProvider value=value2> 的孩子，<LazyloadProvider value=value1> 不会影响它。

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

const foo = 1; // won't affect inner scope any way

  const foo = 2;
  console.log(foo); // 2

【讨论】：

当它们共享相同的值时会怎样。

值相同还是不同都没关系。如果存在内部LazyloadProvider，则忽略外部LazyloadProvider。也不清楚您所说的“实例”是什么意思。