反应背景：儿童什么时候重新渲染？ [英] React Context: When Are Children Re-Rendered?

问题描述

在另一篇StackOverflow帖子中，Nicholas帮我理解了 Context.Provider 当上下文值 <$ c $时，重新呈现其后代 Context.Consumer 组件c>提供商提供更改。

In another StackOverflow post, Nicholas helped me understand that a Context.Provider re-renders its descendant Context.Consumer components when the context value the Provider provides changes.

官方文档：

作为提供者后代的所有消费者都将每当提供者的价值道具发生变化时，都会重新渲染
。

All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.

Nicholas也帮助我理解了<$ c的唯一方法$ c>提供商将知道上下文值是否已更改，如果其封闭组件重新呈现。

Nicholas also helped me understand that the only way a Provider will know if the context value has changed, is if its enclosing component re-renders.

总结：

1. 提供商更新其消费者每当上下文时t值更改


2. 只有当提供商周围的封闭函数重新呈现
时才会发生这种情况b $ b
3. 这导致提供商及其所有后代重新渲染

1. Providers update its Consumers whenever the context value changes
2. This can only happen when the enclosing function around the Provider re-renders
3. Which leads to the Provider and all its descendants re-rendering anyways

因此，上面（1）中的特征似乎是多余的。如果提供商只有在其封闭组件重新渲染时才会更新消费者，并发现上下文值 update只能在父级重新呈现时发生，不需要具有允许 Provider 更新使用者的功能当上下文值更改时。

Thus, the feature in (1) above, seem redundant. If Provider ever only updates Consumers when its enclosing component re-renders, and spotting a context value update can only happen when the parent re-renders, there is no need to have the feature that allows the Provider to update the Consumers when the context value changes.

我在这里缺少什么？

编辑

Nicholas在评论中也说：

Nicholas also says in a comment:

应用程序可以（可以想象）重新渲染，因为它无关联
它通过上下文提供的值。如果发生这种情况，您不希望消费者重新报销
。要实现这一点，您需要之前的值
和之后传递===检查的值。如果您提供
对象，这意味着您无法在App的渲染
方法中创建一个全新的对象，或者您最终会不必要地重新渲染消费者。

App can (conceivably) rerender due to things that have nothing to do the value its providing via context. If this happens, you do not want the consumers to rerender. For that to happen, you need the value before and the value after to pass a === check. If you're providing an object, that means you can't create a brand new object in App's render method, or you'll end up rerendering consumers unnecessarily.

然而，我的印象是当父母重新渲染时，所有其子女也会重新渲染。因此，上面提到的 === 检查无济于事，即孩子们无论如何都会重新渲染。

However, I was under the impression that when a parent re-renders, all its children will also re-render. Thus, the === check mentioned above would not help, i.e. the children would re-render regardless.

推荐答案

3）导致提供者及其所有后代无论如何重新呈现

3) Which leads to the Provider and all its descendants re-rendering anyways

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

While this is the default behavior, in practice it's common to change this in order to improve performance. Pure components, components that implement shouldComponentUpdate, or components using React.memo will cause the rerendering to stop before going through the entire tree.

例如：假设有一个带有某种状态的顶级组件，它会呈现一个具有的中级组件shouldComponentUpdate（）{return false; } ，它呈现底层组件。在初始安装时，所有这三个都将呈现。但是如果顶级组件更新其状态，则只有顶级组件将重新渲染。由于它的shouldComponentUpdate将跳过中级组件，然后甚至不会考虑底层组件。

For example: suppose there's a toplevel component with some state, which renders a midlevel component that has shouldComponentUpdate() { return false; }, which renders a bottom level component. On the initial mount, all 3 of these will render. But then if the toplevel component updates its state, only the toplevel component will rerender. The midlevel component will be skipped due to its shouldComponentUpdate, and then the bottom level component is never even considered.

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

Now we add in a context provider to the toplevel component, and a context consumer to the bottom level component. On the initial mount, they will again all render. If the toplevel component updates its state, it will rerender. The midlevel component will still skip its render, due to its shouldComponentUpdate. But as long as the context value changed, the bottom level component will rerender, even though its parent bailed out. This is the feature that is referred to by that blurb.

这篇关于反应背景：儿童什么时候重新渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！