问题 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 使用不同的值
会怎么样?
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
最佳答案
上下文 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
}
关于javascript - 同一个 Provider 的多个声明是否会在 React 中创建新实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54116256/