React 作为当今最流行的前端框架之一，其组件生命周期是每个 React 开发者必须掌握的核心概念。本文将全面剖析 React 组件的生命周期，包括类组件的各个生命周期方法和函数组件如何使用 Hooks 模拟生命周期行为，帮助开发者编写更高效、更健壮的 React 应用。
一、React 组件生命周期概述
React 组件的生命周期指的是一个组件从创建、更新到销毁的整个过程。在这个过程中，React 提供了许多"生命周期方法"，允许开发者在特定的阶段执行自定义代码。理解这些生命周期方法对于控制组件行为、优化性能以及管理副作用至关重要。
React 的生命周期可以分为三个主要阶段：
-
挂载阶段（Mounting）：组件被创建并插入到 DOM 中
-
更新阶段（Updating）：组件的 props 或 state 发生变化时的重新渲染过程
-
卸载阶段（Unmounting）：组件从 DOM 中移除
此外，React 16 还引入了错误处理生命周期方法，用于捕获和处理组件树中的 JavaScript 错误。
二、类组件的生命周期详解
1. 挂载阶段（Mounting）
挂载阶段是组件第一次被创建并插入到 DOM 中的过程，包含以下生命周期方法：
constructor()
constructor(props) {super(props);this.state = { count: 0 };this.handleClick = this.handleClick.bind(this);
}-
最先执行的生命周期方法
-
必须调用
super(props)，否则this.props将会是 undefined -
唯一可以直接修改
this.state的地方 -
用于初始化 state 和绑定事件处理方法
static getDerivedStateFromProps()
static getDerivedStateFromProps(props, state) {if (props.value !== state.prevValue) {return {value: props.value,prevValue: props.value};}return null;
}-
在 render 方法之前调用，无论是初始挂载还是后续更新
-
应返回一个对象来更新 state，或返回 null 不更新
-
用于 state 依赖于 props 变化的罕见情况
-
此方法无权访问组件实例（即不能使用 this）
render()
render() {return <div>{this.state.count}</div>;
}-
类组件中唯一必须实现的方法
-
应该是一个纯函数，不修改组件状态，不与浏览器交互
-
返回以下类型之一：
-
React 元素（JSX）
-
数组或 fragments
-
Portals
-
字符串或数值（渲染为文本节点）
-
布尔值或 null（不渲染任何内容）
-
componentDidMount()
componentDidMount() {// 典型用法：fetchData().then(data => this.setState({ data }));// 或this.subscription = dataSource.subscribe(this.handleDataChange);
}-
组件挂载（插入 DOM 树）后立即调用
-
适合执行有副作用的操作：
-
网络请求
-
设置订阅
-
手动操作 DOM
-
-
可以在此处直接调用 setState()，但会触发额外渲染
2. 更新阶段（Updating）
当组件的 props 或 state 发生变化时，会触发更新阶段的生命周期方法：
static getDerivedStateFromProps()
-
同挂载阶段，在每次渲染前调用
shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState) {// 只有当count变化时才重新渲染return nextState.count !== this.state.count;
}-
决定组件是否应该更新
-
返回 false 可以阻止组件重新渲染
-
主要用于性能优化
-
不建议深层比较或使用 JSON.stringify()，影响性能
-
考虑使用 PureComponent 替代手动实现
render()
-
同挂载阶段
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState) {if (prevProps.items.length < this.props.items.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;
}-
在最近一次渲染输出（提交到 DOM 节点）之前调用
-
使得组件能在 DOM 变化前捕获一些信息（如滚动位置）
-
返回值将作为 componentDidUpdate() 的第三个参数
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot) {if (this.props.userID !== prevProps.userID) {this.fetchData(this.props.userID);}if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}
}-
更新完成后调用（首次渲染不会执行）
-
适合执行有副作用的操作：
-
网络请求（需比较 props）
-
DOM 操作
-
-
可以调用 setState()，但必须包裹在条件语句中，否则会导致无限循环
3. 卸载阶段（Unmounting）
componentWillUnmount()
componentWillUnmount() {clearInterval(this.timerID);this.subscription.unsubscribe();
}-
组件卸载及销毁前调用
-
用于执行必要的清理操作：
-
清除定时器
-
取消网络请求
-
清理订阅
-
-
不应调用 setState()，因为组件永远不会重新渲染
4. 错误处理
React 16 引入了错误边界的概念，用于捕获子组件树中的 JavaScript 错误。
static getDerivedStateFromError()
static getDerivedStateFromError(error) {return { hasError: true };
}-
在后代组件抛出错误后被调用
-
接收错误作为参数
-
应返回一个状态对象以更新 state，用于渲染备用 UI
componentDidCatch()
componentDidCatch(error, info) {logErrorToService(error, info.componentStack);
}-
在后代组件抛出错误后被调用
-
接收两个参数：
-
error - 抛出的错误
-
info - 包含 componentStack 键的对象
-
-
用于记录错误信息
三、函数组件的"生命周期"
随着 React Hooks 的引入，函数组件现在也能实现类组件的生命周期功能。以下是常用 Hooks 与生命周期方法的对应关系：
useState - 状态管理
const [count, setCount] = useState(0);-
相当于类组件中的 this.state 和 this.setState
-
可以在函数组件中添加局部 state
useEffect - 副作用管理
useEffect(() => {// 相当于 componentDidMount 和 componentDidUpdatedocument.title = `You clicked ${count} times`;return () => {// 相当于 componentWillUnmount// 清理函数};
}, [count]); // 仅在 count 更改时更新-
组合了 componentDidMount, componentDidUpdate 和 componentWillUnmount
-
第一个参数是 effect 函数，第二个参数是依赖数组
-
返回的函数是清理函数，在组件卸载时执行
useLayoutEffect
useLayoutEffect(() => {// 在 DOM 更新后同步执行const { width } = node.getBoundingClientRect();setWidth(width);
});-
与 useEffect 签名相同，但调用时机不同
-
在 DOM 变更后同步触发
-
适用于需要读取 DOM 布局并同步重新渲染的情况
useMemo 和 useCallback - 性能优化
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);-
相当于 shouldComponentUpdate 的优化
-
用于避免不必要的计算和渲染
四、新旧生命周期对比与最佳实践
React 16.3 对生命周期方法进行了重大调整，废弃了一些不安全的生命周期方法：
废弃的方法：
-
componentWillMount
-
componentWillReceiveProps
-
componentWillUpdate
这些方法被标记为不安全主要是因为：
-
它们经常被误用和滥用
-
在异步渲染中可能导致问题
-
容易引入副作用和错误
最佳实践建议：
-
将数据获取移到 componentDidMount 或 useEffect 中
-
使用 getDerivedStateFromProps 替代 componentWillReceiveProps
-
使用 getSnapshotBeforeUpdate 替代 componentWillUpdate
-
考虑使用函数组件和 Hooks 替代类组件
-
谨慎使用派生 state，多数情况下可以通过提升 state 或受控组件解决
五、实际应用场景示例
场景1：数据获取
class UserProfile extends React.Component {state = { user: null, loading: true };async componentDidMount() {const user = await fetchUser(this.props.userId);this.setState({ user, loading: false });}async componentDidUpdate(prevProps) {if (this.props.userId !== prevProps.userId) {this.setState({ loading: true });const user = await fetchUser(this.props.userId);this.setState({ user, loading: false });}}componentWillUnmount() {// 取消可能的未完成请求}render() {// 渲染用户信息}
}场景2：滚动位置恢复
class ScrollList extends React.Component {getSnapshotBeforeUpdate(prevProps) {if (prevProps.items.length < this.props.items.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;}componentDidUpdate(prevProps, prevState, snapshot) {if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}}render() {return (<div ref={this.listRef}>{/* 列表内容 */}</div>);}
}场景3：错误边界
class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, info) {logErrorToService(error, info.componentStack);}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children; }
}总结
React 组件的生命周期是 React 应用的核心机制，理解这些生命周期方法对于构建高效、可靠的 React 应用至关重要。随着 React 的发展，生命周期方法也在不断演进，从类组件的各种生命周期方法到函数组件的 Hooks，React 提供了更灵活、更简洁的方式来管理组件的生命周期。
对于新项目，建议优先考虑使用函数组件和 Hooks，它们提供了更简洁的代码组织和更强大的组合能力。对于现有项目，了解类组件的生命周期仍然很重要，特别是在维护老代码时。
记住，生命周期方法是你控制组件行为的工具，正确使用它们可以：
-
优化性能
-
管理副作用
-
处理错误
-
保持代码整洁和可维护
通过掌握 React 组件的生命周期，你将能够构建更强大、更可靠的 React 应用程序。