React 生命周期（以分钟为单位）

掌握 React 生命周期是像专业人士一样调试的第一步？.

这是一个简单的3 分钟指南，帮助您了解一切是如何运作的。

？下载我的免费 101 React Tips And Tricks Book，抢占先机。

React 组件生命周期是什么？

React 组件就像一个人？.

正如我们的诞生、进化和最终消亡一样，React 组件也遵循生命周期：它们诞生，更新，然后消亡.

这个过程称为组件生命周期，它分为三个主要阶段：

• 安装（又名诞生）：React 创建组件并将其添加到 DOM。

• 更新（又名进化）：组件根据状态变化而变化。

• 卸载（又名死亡）：React 删除组件并清理资源。

每个阶段都包含 React 执行的特定步骤，以优化渲染和管理资源。

React 组件生命周期与人类生命周期的类比

为什么需要了解 React 组件生命周期？

了解 React 生命周期可以帮助您：

• 使用 useEffect 和 useLayoutEffect 编写更好的效果。

• 避免效率低下，例如在 useEffect 中设置状态。

• 通过清理来防止内存泄漏。

• 优化性能并避免不必要的重新渲染。

React 组件生命周期的三个阶段

带有 Hook 的 React 组件的时间线。来源：https://julesblom.com/writing/react-hook-component-timeline

1. 挂载：首次渲染组件时

当 React 将组件添加（挂载）到屏幕时，就会发生挂载。

什么触发安装？

• 当你调用 root.render()

• 当 React 将组件添加到 JSX 树并重新渲染其父组件以包含新组件时。

安装过程中会发生什么？

1. Render： React 调用组件函数（或类组件中的 render 方法）来创建 React 元素。 React 还会初始化钩子。

2. 插入 DOM 节点： React 使用新元素更新真实 DOM。此步骤发生在 提交阶段，此时 React 将更改应用于 DOM。

3. 设置 DOM 引用： 如果您使用 useRef，React 会设置对 DOM 节点的引用。

4. 运行 useLayoutEffect: React 运行 useLayoutEffect 函数。此处所做的更改不会导致可见的闪烁，因为更改将在用户看到任何视觉变化（在绘画期间发生）之前发生。

5. DOM 绘制： 浏览器绘制更新后的 UI。

6. 运行 useEffect: 最后，React 运行 useEffect 函数。

---

2. 更新：当组件重新渲染时

当 React 重新渲染组件以反映更改时，就会发生更新。

什么触发更新？

• 状态更新

• 更新的上下文值

• 父组件重新渲染（如果组件未记忆）

• 等等

更新期间会发生什么？

1. 重新渲染： React 重新计算组件的输出。

2. 协调： React 将新的 React 树与前一个 React 树进行比较以确定更改。

3. 提交更改： React 使用更改更新 DOM。

4. 取消设置 DOM 引用：如果在更新期间引用的 DOM 节点被删除或替换，React 会使 ref.current 无效，并使用 null 调用不稳定 ref 回调。

5. 清理 useLayoutEffect: React 运行之前 useLayoutEffect 中的清理函数。

6. 设置 DOM 引用： React 为更新的 DOM 元素设置新的引用值（就像在安装阶段一样）。

7. 运行 useLayoutEffect: React 调用 useLayoutEffect 钩子，就像在挂载阶段一样（如果它的依赖项已根据 Object.is 发生变化）。

8. 绘制 DOM： 浏览器更新 UI 以反映更改。

9. 清理 useEffect： 清理之前运行的 useEffect 中的函数以防止内存泄漏。

10. 运行 useEffect： React 运行更新后的 useEffect 函数（如果其依赖项已根据 Object.is 发生更改）。

    ---

3. 卸载：当 React 删除一个组件时

当 React 从 DOM 中删除组件并释放资源时，就会发生卸载。

什么触发卸载？

• 该组件不再是 JSX 树的一部分

• React 卸载其父级。

• 组件的键已更改（React 将卸载旧实例并挂载新实例。）。

• 等等

卸载过程中会发生什么？

• 运行清理函数： React 运行 useEffect 和 useLayoutEffect 中定义的清理函数。

• 取消设置 DOM 引用： React 使 ref.current 无效，并使用 null 调用 ref 回调。

• 删除 DOM 节点： React 删除与该元素关联的 DOM 节点。

进一步发展的其他资源

如果您想深入了解 React 生命周期，我推荐这些精彩的资源：

• React 文档

  • 渲染并提交
  • 反应效果的生命周期

• 带 Hooks 的 React 组件的时间线 ❤️

• 为什么 React 会重新渲染

• React 渲染行为（大部分）完整指南 - 警告：这是一篇很长的文章？

概括

一旦您了解了 React 组件生命周期，您将领先于 99% 的初级前端开发人员。

比你想象的要简单：只有三个阶段 - 安装、更新和卸载。

开始用现实世界的例子练习这些概念：

• 使用 useLayoutEffect 进行 DOM 测量。

• 组件卸载时始终清理效果。

你有这个吗？.

？发现错误

？值得深思的

这是一个包装？.

发表评论？分享你最大的收获。

别忘了加上“???”。 如果您正在学习 React，请

免费

下载我的 101 React Tips & Tricks 书。 如果您喜欢这样的文章，请加入我的免费时事通讯，

FrontendJoy

。

如果您想要每日提示，请在 X/Twitter 或 Bluesky 上找到我。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>

以上是React 生命周期（以分钟为单位）的详细内容。更多信息请关注PHP中文网其他相关文章！