3分钟了解React生命周期

# Web 开发# JavaScript# 初学者# React

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

这里有一个简单的**3 分钟指南**，可以帮助您了解一切的工作原理。

📚 下载我的免费 101 个 React 技巧和窍门书，抢占先机。

Section Divider

React 组件的生命周期是什么？

React 组件就像人类😅。

正如我们诞生、发展并最终消亡一样，React 组件也遵循生命周期：它们**诞生**、**更新**，然后**消亡**。

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

  • 安装 (又名诞生)：React 创建组件并将其添加到 DOM。
  • 更新（又名发展）：组件响应状态的变化而变化。
  • 卸载 (又名消亡)：React 删除组件并清理资源。

    • 每个阶段都包括 React 执行的优化渲染和管理资源的具体步骤。

    null

    Section Divider

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

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

  • 使用 useEffect 和 useLayoutEffect 编写更好的效果。
  • 避免低效率，例如在 useEffect 内部设置状态。
  • 通过清理来防止内存泄漏。
  • 优化性能并避免不必要的重新渲染。
    • Section Divider

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

    nullhttps://julesblom.com/writing/react-hook-component-timeline

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

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

    **什么会引发安装？**

  • 当你调用 root.render(）
  • 当 React 将组件添加到 JSX 树并重新渲染其父组件以包含新组件时。

    • **安装期间会发生什么？**

  • Render：React 调用组件函数（或类组件中的 render 方法）来创建 React 元素。React 还会初始化 hooks。
  • 插入 DOM 节点：React 使用新元素更新真实 DOM。此步骤发生在提交阶段，即 React 将更改应用于 DOM 时。
  • 设置 DOM Refs：如果使用 useRef，React 会设置对 DOM 节点的引用。
  • 运行 useLayoutEffect：React 运行 useLayoutEffect 函数。此处所做的更改不会导致可见的闪烁，因为更改将在用户看到任何视觉变化（在绘制期间发生）之前发生。
  • DOM Paint：浏览器绘制更新的 UI。
  • 运行 useEffect：最后，React 运行 useEffect 函数。

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

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

    **什么触发更新？**

  • 状态更新
  • 更新的上下文值
  • 父组件重新渲染（如果组件未被记忆）
  • ETC。

    • **更新期间会发生什么？**

  • 重新渲染：React 重新计算组件的输出。
  • 协调：React 将新的 React 树与之前的 React 树进行比较以确定变化。
  • 提交更改：React 使用更改更新 DOM。
  • 取消设置 DOM Refs：如果在更新过程中删除或替换了引用的 DOM 节点，React 将使 ref.current 无效，并使用 null 调用非稳定 ref 回调。
  • 清理 useLayoutEffect：React 从之前的 useLayoutEffect 运行清理函数。
  • 设置 DOM Refs：React 为更新的 DOM 元素设置新的 ref 值（如在安装阶段）。
  • 运行 useLayoutEffect：React 调用 useLayoutEffect 钩子，就像在挂载阶段一样（如果其依赖项根据 Object.is 发生了变化）。
  • 绘制 DOM：浏览器更新 UI 以反映变化。
  • 清理 useEffect：清理上次 useEffect 运行的函数，以防止内存泄漏。
  • 运行 useEffect：React 运行更新后的 useEffect 函数（如果其依赖项根据 Object.is 发生了变化）。

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

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

    **什么触发卸载？**

  • 该组件不再是 JSX 树的一部分
  • React 卸载其父级。
  • 组件的键已更改（React 将卸载旧实例并安装一个新实例）。
  • ETC。

    • **卸载期间会发生什么？**

  • 运行清理函数：React 运行 useEffect 和 useLayoutEffect 中定义的清理函数。
  • 取消设置 DOM Refs：React 使 ref.current 无效并使用 null 调用 ref 回调。
  • 删除 DOM 节点：React 删除与元素关联的 DOM 节点。
    • Section Divider

    更多资源

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

  • React Docs 渲染和提交 Reactive Effects 的生命周期
  • 带有 Hooks 的 React 组件的时间轴 ❤️
  • 为什么 React 需要重新渲染
  • (基本) 完整的 React 渲染行为指南 - 警告：这是一篇很长的文章 😅
    • Section Divider

    概括

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

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

    开始通过现实世界的例子实践这些概念：

  • 使用 useLayoutEffect 进行 DOM 测量。
  • 当组件卸载时始终清理影响。

    • 你已经得到了它💪。

    Section Divider

    🐞 发现漏洞

    🍔 值得深思的问题

    Section Divider

    就这样结束了🎉。

    留下评论📩来分享您最大的收获。

    别忘了说一声“💖🦄🔥”。

    如果您正在学习 React，请**免费**下载我的《101 个 React 技巧与窍门》一书。

    如果您喜欢这样的文章，请加入我的**免费**新闻通讯**FrontendJoy**。

    如果您需要每日提示，请在 X/Twitter 或 Bluesky 上找到我。