Создают ли несколько объявлений одного и того же провайдера новые экземпляры в React?

Question

Вопрос 1 В React 16.3.x будут ли поставщики использовать один и тот же экземпляр независимо от иерархии?

Вопрос 2 Будут ли LazyloadProvder с общим value такими же экземплярами?

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}>, <LazyloadProvider value={value1}> не влияет на него.

Это та же логика, что и в переменных областях:

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