React 组件重新渲染指南：为什么 React 组件会重新渲染

本文最初发表于https://www.developerway.com。该网站还有更多类似文章 😉

这是React 组件重新渲染完整指南的第一部分和第二部分。本指南解释了什么是重新渲染，哪些是必要的重新渲染，哪些是不必要的重新渲染，以及哪些因素会触发 React 组件的重新渲染。

完整指南还包含了有助于防止重新渲染的最重要模式，以及一些会导致不必要的重新渲染和性能下降的反模式。每种模式和反模式都配有图示和可运行的代码示例。

完整指南目录：

• 第一部分：React 中的重新渲染是什么？
• 第二部分：React 组件何时重新渲染自身？
• 第三部分：利用合成技术防止重新渲染
• 第四部分：使用 React.memo 防止重新渲染
• 第五部分：使用 useMemo/useCallback 提升重新渲染性能
• 第六部分：提升列表的重新渲染性能
• 第 7 部分：防止由上下文引起的重新渲染

React 中的重新渲染是什么？

谈到 React 性能，我们需要关注两个主要阶段：

• 初始渲染- 指组件首次出现在屏幕上时发生的事件
• 重新渲染- 指屏幕上已存在的组件的第二次及后续渲染。

当 React 需要使用新数据更新应用程序时，就会发生重新渲染。通常，这是由于用户与应用程序交互，或者通过异步请求或订阅模型接收到外部数据而引起的。

没有任何异步数据更新的非交互式应用程序永远不会重新渲染，因此无需关心重新渲染的性能优化。

🧐 什么是必要的重新渲染，什么是不必要的重新渲染？

必要的重新渲染——指对作为变更源的组件或直接使用新信息的组件进行重新渲染。例如，如果用户在输入框中输入内容，则管理其状态的组件需要在每次按键时更新自身，即需要重新渲染。

不必要的重新渲染——由于错误或低效的应用架构，组件通过不同的重新渲染机制在应用中传播，导致组件重新渲染。例如，如果用户在输入框中输入内容，而每次按键都导致整个页面重新渲染，则页面被不必要地重新渲染了。

不必要的重新渲染本身并不是问题：React 速度非常快，通常能够处理这些渲染，用户不会注意到任何问题。

但是，如果重新渲染过于频繁和/或在非常繁重的组件上发生，则可能导致用户体验出现“卡顿”，每次交互都会出现明显的延迟，甚至应用程序完全无响应。

React 组件何时重新渲染自身？

组件重新渲染的原因有四种：状态改变、父组件（或子组件）重新渲染、上下文改变以及钩子函数改变。此外，还有一个常见的误解：组件的 props 改变会导致重新渲染。但实际上并非如此（详见下文解释）。

🧐 重新渲染原因：状态变更

当组件状态改变时，它会重新渲染自身。通常，这会在回调函数或useEffect钩子函数中发生。

状态变化是所有重新渲染的“根本”原因。

请参阅 codesandbox 中的示例

🧐 重新渲染原因：父级重新渲染

如果父组件重新渲染，子组件也会重新渲染自身。或者反过来说：当一个组件重新渲染时，它也会重新渲染它的所有子组件。

它总是沿着元素树向下传递：子元素的重新渲染不会触发父元素的重新渲染。（这里有一些例外情况和特殊情况，更多详情请参阅完整指南：《React Element、子元素、父元素和重新渲染的奥秘》）。

请参阅 codesandbox 中的示例

🧐 重新渲染原因：上下文发生变化

当上下文提供程序中的值发生变化时，所有使用此上下文的组件都会重新渲染，即使它们没有直接使用已更改的数据部分。虽然无法直接通过记忆化来阻止这些重新渲染，但有一些变通方法可以模拟这种效果（参见第 7 部分：阻止由上下文引起的重新渲染）。

请参阅 codesandbox 中的示例

🧐 重新渲染原因：钩子更改

钩子函数内部发生的一切都“属于”使用该钩子的组件。关于上下文和状态变更的规则同样适用于此：

• 钩子内部的状态变化会触发“宿主”组件不可避免的重新渲染。
• 如果钩子使用了 Context，并且 Context 的值发生了变化，就会触发“宿主”组件不可避免的重新渲染。

钩子可以串联起来。链中的每个钩子仍然“属于”宿主组件，并且相同的规则适用于它们中的任何一个。

请参阅 codesandbox 中的示例

⛔️ 重新渲染原因：道具更改（一个很大的误区）

对于未记忆化的组件的重新渲染而言，组件的 props 是否改变并不重要。

为了使 props 发生变化，需要由父组件更新。这意味着父组件必须重新渲染，而这会导致子组件重新渲染，无论其 props 是否已更新。

请参阅 codesandbox 中的示例

只有当使用记忆化技术时（React.memo，useMemo），道具的变化才变得重要。

请点击此处查看指南其余部分：

• 第一部分：React 中的重新渲染是什么？
• 第二部分：React 组件何时重新渲染自身？
• 第三部分：利用合成技术防止重新渲染
• 第四部分：使用 React.memo 防止重新渲染
• 第五部分：使用 useMemo/useCallback 提升重新渲染性能
• 第六部分：提升列表的重新渲染性能
• 第 7 部分：防止由上下文引起的重新渲染

本文最初发表于https://www.developerway.com。该网站还有更多类似文章 😉

订阅新闻简报、在 LinkedIn 上与我们联系或在 Twitter 上关注我们，即可在下一篇文章发布时立即收到通知。