小编典典

反应上下文:何时重新渲染儿童?

reactjs

我了解到,一个Context.Provider重新呈现其子Context.Consumer组件时的 上下文值
Provider规定变化。

官方文件进一步证实了这一点:

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

尼古拉斯还帮助我理解,Provider知道 上下文值 是否已更改的唯一方法是其包围组件是否重新渲染。

综上所述:

  1. Providers``Consumers每当 上下文值 更改时更新
  2. 仅在Provider重新渲染周围的封闭功能时才会发生这种情况
  3. Provider无论如何,都会导致及其所有后代重新渲染

因此,上面(1)中的功能似乎是多余的。如果ProviderConsumers在其包围组件重新渲染时才更新,并且只有在父级重新渲染时才可以发现
上下文值 更新,所以不需要具有允许在 上下文值 更改时Provider更新的功能。Consumers __

我在这里想念什么?


编辑

尼古拉斯在评论中还说:

应用程序可以(可以想象)由于与上下文无关的事情而重新渲染。如果发生这种情况,您不希望消费者重新提交。为此,您需要通过===检查之前的值和之后的值。如果要提供对象,则意味着您无法在App的render方法中创建全新的对象,否则最终将不必要地重新渲染使用者。

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


阅读 278

收藏
2020-07-22

共1个答案

小编典典

3)导致提供者及其所有后代重新渲染

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

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

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

2020-07-22