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

Question

在另一StackOverflow上后，谢霆锋让我了解到，一个Context.Provider重新呈现其子Context.Consumer组件时的上下文值的Provider规定变化。官方文件进一步证实了这一点：只要提供商的价值支柱发生变化，作为提供商的后代的所有消费者都将重新渲染。尼古拉斯还帮助我理解，Provider知道上下文值是否已更改的唯一方法是其包围组件是否重新渲染。总之：ProvidersConsumers每当上下文值更改时更新它仅当Provider重新渲染周围的封闭功能时，才会发生这种情况Provider无论如何，都会导致及其所有后代重新渲染因此，上述（1）中的功能似乎是多余的。如果Provider仅Consumers在其包围组件重新渲染时才更新，并且只有在父级重新渲染时才可以发现上下文值更新，所以不需要具有允许在上下文值更改时Provider更新的功能。Consumers我在这里想念什么？编辑尼古拉斯在评论中还说：应用程序可以（可以想象）由于与上下文无关的事情而重新渲染。如果发生这种情况，则您不希望使用者重新提交。为此，您需要通过===检查之前的值和之后的值。如果要提供对象，则意味着您无法在App的render方法中创建全新的对象，否则最终将不必要地重新渲染使用者。但是，我给人的印象是，当父母重新渲染时，其所有孩子也会重新渲染。因此，===上面提到的支票将无济于事，即孩子们无论如何都将重新渲染。

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 ，则组件将更新。

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

我在这里想念什么？

我相信您所缺少的是没有这样的功能。这就是反应的工作方式。

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