所有后代都会重新渲染吗

Question

我正在阅读React新文档这里，它说：

这里，上下文值是一个具有两个属性的 JavaScript 对象， 其中之一是函数。每当 MyApp 重新呈现时（例如，在 路线更新），这将是指向 不同的功能，所以React也必须重新渲染所有 树深处调用 useContext(AuthContext) 的组件。

对于所说的“因此 React 还必须重新渲染树深处调用 useContext(AuthContext) 的所有组件”，我想知道这是否不太正确。根据我的测试，如果父组件调用 setState() 方法，则父组件及其所有子组件和子组件的子组件（实际上是所有后代）都会被重新渲染。

“必须重新渲染调用 useContext 的树深处的组件”对我来说似乎不正确，无论后代是否调用 useContext，它都将被重新渲染。我的理解对不对？

Answer 1

您的理解是正确的，但这只是对默认行为的理解。如果不采取措施阻止它，渲染组件将导致其所有后代被重新渲染，无论它们是否调用 useContext。

但出于性能原因，如果没有任何变化，您有时会想要跳过渲染组件。这通常是通过将组件包装在 React.memo 中来完成的。当记忆组件要渲染时，它首先比较其上一个和下一个 props。如果它们没有改变，它将跳过渲染。这反过来会导致其下面的整个子树跳过渲染。

上下文将穿透这些记忆层。因此，您可以有一个祖父母组件 A，它渲染一个

<AuthContext.Provider>

，然后是一个被记忆且不带任何 props 的父组件 B，然后是一个调用

useContext(AuthContext)

的子组件 C。如果 A 设置状态并将新值传递给提供者。 B 跳过渲染，因为它的所有 props 都没有改变，而 C 渲染，因为上下文已经改变。