深入浅出React｜理解 React 生命周期
最新回答
战皆罪
2026-06-25 03:33:21
React框架中的生命周期概念，简言之，描述了组件从创建、存在到销毁的三个阶段：挂载、更新与卸载。这一概念在React中被用来描述组件的状态变化，主要由“render”与“commit”两个核心阶段构成。在理解这一概念时，我们首先需要明确React的核心算法——虚拟DOM。虚拟DOM的本质在于通过编译JSX得到的DOM结构描述，它在组件初始化阶段生成，通过`ReactDOM.render`方法将虚拟DOM转换为真实DOM。在组件更新阶段，再次生成虚拟DOM，借助Diffing算法对比两次虚拟DOM，实现最小化DOM更新，虚拟DOM因此成为Diffing算法的基础。
组件化是React框架中的一种优秀软件设计思想，每一个React项目的基础单元就是组件，通过组合构建应用。组件内部有自己的渲染逻辑（state），在没有数据流交互时，组件间互不干扰，实现封闭性。而组件间的通信则基于单向数据流原则（props），数据流动影响渲染结果，组件间通过数据桥梁开放，互相影响。这一封闭与开放的特性使得React组件具备高度可维护性和可重用性。
组件生命周期概述
了解类组件生命周期的方法，我们从React v15开始，然后过渡到v16.3和v16.4版本，对比其间的差异，这种学习方式虽不旨在多记API，而是通过对比发现差异并提出问题，帮助我们从“能用”向“会用”迈进。React v15中生命周期函数主要如下图所示：
constructor(props) <- 挂载前
componentWillMount() <- 挂载前
componentWillReceiveProps(nextProps) <- 更新前
shouldComponentUpdate(nextProps, nextState) <- 更新前
componentDidMount() <- 挂载后
componentWillUpdate(nextProps, nextState) <- 更新前
componentDidUpdate(prevProps, prevState, snapshot) <- 更新后
render() <- 每次渲染
componentWillUnmount() <- 卸载前
在React早期，使用`React.createClass()`创建组件时，还有`getDefaultProps`与`getInitialState`两个生命周期函数。随着ES6的普及，这种组件创建方式已不推荐使用。
生命周期函数注意事项
每个生命周期函数的具体说明可参考React官方文档，通过此链接加强理解：[React15 Lifecycle Demo](链接)。打开示例如遇预览问题，无需担心，这是codesandbox的问题，打开任意左侧源代码文件后保存，预览区域即可恢复正常。
React v16的生命周期函数变化
React v16开始对生命周期函数进行了更改，分为两个版本：v16.3及之前的版本，与v16.4及之后的版本。
React生命周期在线查看地址：[projects.wojtekmaj.pl/r...](链接)。
React v16与v15之间的变化主要体现在：
新增`getDerivedStateFromProps`和废弃`componentWillReceiveProps`，前者目的是为了替换`componentWillReceiveProps`，并提供了一个静态方法，不依赖组件实例，用于从props派生更新state，而不是简单替换逻辑。新增`getSnapshotBeforeUpdate`，用于在`componentDidUpdate`中读取DOM信息，提供UI交互的上下文，如滚动位置等。
生命周期演化原因
废弃`componentWillReceiveProps`的主要原因是它在更新阶段的使用会导致额外的render，`getDerivedStateFromProps`提供了更简洁的实现方式，旨在简化代码并确保生命周期函数的可控性。`getSnapshotBeforeUpdate`与`componentDidUpdate`的结合可以覆盖`componentWillUpdate`的使用场景，但废弃`componentWillUpdate`的根本原因在于Fiber架构的实施。
Fiber架构引入了任务拆解与渲染过程可打断的特性，解决了同步渲染带来的应用卡顿问题。生命周期函数的演化也与此相关，主要区别在于render阶段的执行与commit阶段的同步执行。废弃的生命周期函数都处于render阶段，可能被暂停、终止和重新执行，若在这些函数中运行副作用或操作DOM，可能导致严重的bug。
React生命周期与Hooks
Hooks与生命周期函数共同作用于React组件的生命周期管理，通过引入Hooks如`useState`、`useMemo`、`useEffect`等，函数组件也获得了使用和管理state的能力，从而演化出了函数组件的生命周期概念。这一概念涉及的Hook提供了更简洁的state管理方式，整体而言，大部分生命周期可以通过Hooks实现，一些难以实现的则往往是不推荐的反模式。
总结
本文深入讨论了React生命周期的概念，从挂载、更新到卸载的阶段，以及虚拟DOM与组件化思想。通过对比React v15与v16生命周期函数的演变，解释了生命周期函数的废弃与新增背后的原因，特别是Fiber架构的引入对生命周期管理的影响。通过学习本文，希望能帮助大家从“能用”向“会用”迈进，也欢迎在评论区分享心得或疑问，促进进一步的讨论。接下来我们还会有一系列关于React框架的文章，请大家持续关注。
热门标签
