Question

在another StackOverflow post中，尼古拉斯帮助我理解了numFrames提供 context值时，Context.Provider重新呈现了其后代Context.Consumer的组成部分。变化。

official Doc进一步证实了这一点：

作为提供者后代的所有消费者将重新呈现只要提供商的价值支柱发生变化。

尼古拉斯还帮助我理解了Provider知道 context值是否发生变化的唯一方法是其包围部分是否重新呈现。

总结：

Provider每当 context值更改时都更新其Providers
仅当Consumers周围的封闭函数重新呈现时，这种情况才会发生
哪个导致Provider及其所有后代重新渲染

因此，上面的（1）中的功能似乎很多余。如果Provider仅在重新封装其包围组件时更新Provider，并且只有在父级重新渲染时才能发现 context值更新，具有允许<{>上下文值更改时Consumers更新Provider的功能。

我在这里想念什么？

编辑

尼古拉斯也在评论中说：

由于无关紧要的事情，应用程序可以（可以想象）重新渲染通过上下文提供的值。如果发生这种情况，您不想消费者退回。为此，您需要价值之前和之后的值通过===检查。如果您要提供对象，这意味着您无法在App的渲染中创建全新的对象方法，否则您最终将不必要地重新呈现消费者。

但是，我给人的印象是，当父母重新渲染时，所有其孩子也将重新渲染。因此，上面提到的Consumers支票无济于事，即孩子们无论如何都会重新渲染。

Answer 1

3）导致提供者及其所有子代仍然重新渲染

虽然这是默认行为，但实际上通常会更改此行为以提高性能。纯组件，实现shouldComponentUpdate的组件或使用React.memo的组件将导致重新渲染在遍历整个树之前停止。

例如：假设存在一个处于某种状态的顶级组件，该组件渲染具有shouldComponentUpdate() { return false; }的中级组件，该组件呈现一个底层组件。在初始安装时，所有这三个都将渲染。但是，如果顶级组件更新其状态，则仅顶级组件将重新呈现。中级组件将由于其shouldComponentUpdate而被跳过，因此甚至不会考虑底层组件。

现在，我们在顶级组件中添加上下文提供者，并在底层组件中添加上下文使用者。在初始安装时，它们将再次全部渲染。如果顶级组件更新其状态，它将重新呈现。由于其shouldComponentUpdate，中级组件仍将跳过其渲染。但是，只要上下文值发生变化，即使其父级被保释，底层组件也将重新呈现。这就是该Blur所引用的功能。

Answer 2

这种行为并不是真的新现象。当一个React组件收到一组不同的道具时（假设shouldComponentUpdate()返回true），它将重新渲染其子级，并且效果将逐渐降低。

因此，如果您有这样的设置：

<ParentComponent>
  <Provider>
    <Context>
      <ChildReceivingContext />
    </Context>
  </Provider>
</ParentComponent>

如果提供商仅在重新封装其封闭组件时才更新使用者，

重新渲染父组件时，效果将向下级联，如果shouldComponentUpdate()返回true，则组件将更新。

不需要具有允许上下文值更改时提供者更新使用者的功能。

我在这里想念什么？

我相信您所缺少的是没有这样的功能。这就是反应的原理。

提供者/消费者的实际功能是，您不必手动将道具从父级传递到子级再传给子级子等，但是您可以让子级深入到被提供者包围并接收道具直接。

反应上下文：何时重新渲染儿童？

2 个答案: