React-组件的生命周期

type

status

date

slug

summary

引言

在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下

React 生命周期

🌟 三阶段执行流程（按顺序触发）

React 生命周期主要包括三个阶段：初始化阶段，更新阶段，销毁阶段

🔥 三阶段快速记忆法（30秒掌握）

阶段	核心钩子（顺序）	记忆口诀	作用场景
初始化	`C` → `G` → `R` → `M`	“构造器，props来，渲染，挂载完”	组件首次挂载（只执行1次）
更新	`G` → `S` → `R` → `S` → `D`	“props来，检查更新，渲染，快照，更新完”	state/props 变化时触发
销毁	`U`	“卸载前清理”	组件从 DOM 移除前触发

✨ 口诀详解：
C = constructor（构造函数）
G = getDerivedStateFromProps（根据 props 更新 state）
R = render（渲染 JSX）
M = componentDidMount（挂载完成）
S = shouldComponentUpdate（更新前检查）
D = componentDidUpdate（更新完成）
U = componentWillUnmount（卸载前清理）

📌 详细阶段说明

1️⃣ 初始化阶段（组件首次挂载）

钩子函数	触发时机	作用
`constructor(props)`	组件初始化时（仅执行1次）	初始化 `state` / 绑定方法（推荐用类属性初始化 state）
`static getDerivedStateFromProps(props, state)`	`render` 之前（初始化和更新都会触发）	根据 `props` 生成新的 `state`（返回对象或 `null`）
`render()`	`getDerivedStateFromProps` 之后	返回 JSX（不操作 DOM，仅生成虚拟 DOM）
`componentDidMount()`	组件挂载到 DOM 后（首次渲染后）	执行副作用（如 API 请求、订阅事件）

💡 关键点：
getDerivedStateFromProps 必须返回对象（如 return { count: props.initialCount }）
若不需要根据 props 更新 state，返回 null
避免在 render 中调用 setState（会导致死循环）

2️⃣ 更新阶段（state/props 变化时）

钩子函数	触发时机	作用
`getDerivedStateFromProps(props, state)`	`render` 之前（每次更新都会触发）	根据新 `props` 生成新 `state`（核心优化点）
`shouldComponentUpdate(nextProps, nextState)`	`render` 之前（更新前检查）	返回 `false` 可阻止更新（性能优化关键！）
`render()`	`shouldComponentUpdate` 返回 `true` 后	重新渲染 JSX
`getSnapshotBeforeUpdate(prevProps, prevState)`	`render` 之后、DOM 更新前	获取更新前的 DOM 状态（如滚动位置）
`componentDidUpdate(prevProps, prevState, snapshot)`	DOM 更新后（非首次渲染）	执行更新后的副作用（如更新 DOM、发送新请求）

💡 关键点：
shouldComponentUpdate是性能优化的核心！例如：
getSnapshotBeforeUpdate 必须与 componentDidUpdate 配合使用

3️⃣ 销毁阶段（组件从 DOM 移除）

钩子函数	触发时机	作用
`componentWillUnmount()`	组件即将卸载前（最后一次执行）	清理副作用（如清除定时器、取消订阅）