Question

问题1 ：在React 16.3.x中，提供者将共享同一实例，而不管层次结构如何？

问题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}>的子代，则<LazyloadProvider value={value1}>不会对其产生影响。

与可变范围内的逻辑相同：

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

同一提供者的多个声明是否在React中创建新实例？

1 个答案: