reactjs - 当上下文消费者中的任何状态发生变化时，React 是否会重新渲染所有组件？

Question

我正在构建一个应用程序，我开始将我在整个地方传递的许多道具移动到上下文中。本质上，我有一个包含许多子组件的上下文提供程序组件。

自从我这样做后，我在重新渲染时遇到了麻烦。更具体地说，我在一个组件中有一个图，当兄弟组件中的状态更改不应该对图产生影响（不作为道具或共享上下文变量传入）时，它会重新渲染。

这是预期的行为吗？如果是，那么我应该尽可能地尝试“本地化”上下文吗？

标签： reactjs

Answer 1

默认行为是当一个组件渲染时，它的子组件也会渲染。这反过来会导致孙子渲染，依此类推。

您可以使用PureComponent / shouldComponentUpdate（在类组件中）或React.memo（在函数组件中）跳过渲染组件。这些技术可以让你指定如果 props 没有改变，那么组件就不需要再次渲染。如果跳过渲染，那么组件下面的树也将被跳过，需要注意的是：如果上下文值发生变化，使用上下文的组件将重新渲染，即使它们的直接父级没有渲染。

将这些渲染阻止组件之一作为上下文提供程序的直接子级通常很好。这样，如果您唯一更改的是上下文值，那么将重新呈现的唯一组件是显式使用上下文的组件。