eact 的生命周期函数（Lifecycle Methods）是类组件（Class Component）中用于在不同阶段执行特定逻辑的钩子函数。
它们让我们可以在组件创建、更新、销毁等阶段执行代码，例如发请求、订阅事件、清理资源等。
一、生命周期的三个阶段
React 组件的生命周期大体分为 三个阶段：
| 阶段 | 说明 |
|---|---|
| 挂载（Mounting） | 组件第一次被创建并插入到 DOM 中 |
| 更新（Updating） | 组件的 props 或 state 改变后重新渲染 |
| 卸载（Unmounting） | 组件从 DOM 中移除 |
二、挂载阶段（Mounting）
当组件第一次被渲染时，依次执行以下函数：
| 生命周期方法 | 作用 | 是否常用 |
|---|---|---|
| constructor(props) | 初始化 state、绑定方法 | ✅ |
| static getDerivedStateFromProps(props, state) | 根据 props 派生出 state（少用） | ⚠️ |
| render() | 渲染 UI（必须） | ✅ |
| componentDidMount() | 组件挂载后执行（常用于接口请求、DOM 操作、事件监听） | ✅✅✅ |
示例
class Demo extends React.Component {constructor(props) {super(props);this.state = { count: 0 };console.log('constructor');}componentDidMount() {console.log('componentDidMount');}render() {console.log('render');return <div>Hello React</div>;}
}
三、更新阶段（Updating）
当组件的 props 或 state 改变时，触发更新流程：
| 生命周期方法 | 作用 | 是否常用 |
|---|---|---|
| static getDerivedStateFromProps(props, state) | 再次根据 props 派生 state | ⚠️ |
| shouldComponentUpdate(nextProps, nextState) | 决定是否需要重新渲染（性能优化） | ✅ |
| render() | 重新渲染 UI | ✅ |
| getSnapshotBeforeUpdate(prevProps, prevState) | 在更新前获取 DOM 信息 | ⚠️ |
| componentDidUpdate(prevProps, prevState, snapshot) | 更新完成后执行（可发请求、操作 DOM） | ✅✅ |
示例
class Demo extends React.Component {state = { count: 0 };shouldComponentUpdate(nextProps, nextState) {return nextState.count !== this.state.count;}componentDidUpdate(prevProps, prevState) {console.log('Updated from', prevState.count, 'to', this.state.count);}render() {return <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>;}
}
四、卸载阶段（Unmounting）
| 生命周期方法 | 作用 | 是否常用 |
|---|---|---|
| componentWillUnmount() | 组件卸载前执行，用于清理（定时器、事件监听、请求等） | ✅✅✅ |
示例
componentWillUnmount() {clearInterval(this.timer);window.removeEventListener('resize', this.onResize);
}
五、React 16 后被废弃的生命周期
以下旧生命周期在 React 16 之后 不推荐使用，因为会引起潜在 bug：
| 废弃方法 | 替代方案 |
|---|---|
componentWillMount |
使用 constructor 或 componentDidMount |
componentWillReceiveProps |
使用 getDerivedStateFromProps |
componentWillUpdate |
使用 getSnapshotBeforeUpdate |
六、函数组件（Hooks）等价生命周期
React Hooks 出现后，大部分开发用函数组件了。
Hooks 没有“生命周期函数”，但可以通过 useEffect 实现同样的逻辑：
| Class 生命周期 | Hooks 等价写法 |
|---|---|
componentDidMount |
useEffect(() => {...}, []) |
componentDidUpdate |
useEffect(() => {...})（不加依赖或带特定依赖） |
componentWillUnmount |
useEffect(() => { return () => {...} }, []) |
示例
import React, { useEffect, useState } from 'react';function Demo() {const [count, setCount] = useState(0);useEffect(() => {console.log('挂载或更新');return () => {console.log('卸载');};}, [count]);return <button onClick={() => setCount(count + 1)}>Add</button>;
}
总结
| 阶段 | 类组件生命周期 | 函数组件 Hook |
|---|---|---|
| 挂载 | componentDidMount |
useEffect(() => {...}, []) |
| 更新 | componentDidUpdate |
useEffect(() => {...}, [依赖]) |
| 卸载 | componentWillUnmount |
useEffect(() => { return () => {...} }, []) |
| 优化 | shouldComponentUpdate |
React.memo() / useMemo() / useCallback() |
