React Context:什么时候重新渲染儿童?

IT技术 javascript reactjs
2021-05-23 23:49:11

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

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

每当 Provider 的 value 属性发生变化时,所有作为 Provider 后代的消费者都会重新渲染。

Nicholas 还帮助我理解了 a Providerwill 知道上下文值是否已更改的唯一方法,是它的封闭组件是否重新呈现。

总之:

  1. ProvidersConsumers每当上下文值更改更新它
  2. 这只会在Provider重新渲染周围的封闭函数时发生
  3. Provider无论如何,这会导致及其所有后代重新渲染

因此,上面(1)中的特征似乎是多余的。如果ProviderConsumers在其封闭组件重新渲染时才更新,并且仅在父组件重新渲染时发现上下文值更新,则不需要具有允许上下文值更改Provider更新的功能Consumers

我在这里错过了什么?


编辑

尼古拉斯还在评论中说:

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

但是,我的印象是,当父级重新渲染时,所有子级也将重新渲染。因此,===上面提到检查无济于事,即孩子们无论如何都会重新渲染。

2个回答

3) 这导致 Provider 及其所有后代无论如何都要重新渲染

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

例如:假设有一个具有某种状态的顶层组件,它呈现一个具有 的中层组件shouldComponentUpdate() { return false; },它呈现一个底层组件。在初始安装时,所有 3 个都将呈现。但是如果顶层组件更新了它的状态,那么只有顶层组件会重新渲染。中间层组件会因为它的 shouldComponentUpdate 被跳过,然后底层组件甚至不会被考虑。

现在我们向顶层组件添加一个上下文提供者,向底层组件添加一个上下文使用者。在初始安装时,它们将再次全部渲染。如果顶层组件更新其状态,它将重新渲染。由于其 shouldComponentUpdate,中级组件仍将跳过其渲染。但是只要上下文值发生变化,底层组件就会重新渲染,即使它的父组件退出了。这是该简介所指的特征。

这种行为并不新鲜。当一个 react 组件收到一组不同的 props 时,(假设shouldComponentUpdate()返回 true)它会重新渲染它的子组件,并且效果会级联下降。

所以,如果你有这样的设置:

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

如果 Provider 只在其封闭组件重新渲染时更新 Consumers,

当父组件重新渲染时,效果会向下级联,如果shouldComponentUpdate()返回 true组件将更新

当上下文值更改时,不需要具有允许提供者更新消费者的功能。

我在这里错过了什么?

我相信你缺少的是没有这样的功能。这就是react的工作原理。

Provider/Consumer 的实际功能是,您不必手动将 props 从父级传递给子级到子级子级等,但您可以让子级深入到被提供者包围并直接接收props.