React.js组件生命周期详解

React.js组件生命周期详解（以React 18为例）

一、生命周期概述

React组件的生命周期是指组件从创建、挂载到更新、卸载的完整过程，通过生命周期钩子函数（生命周期方法），开发者可以在特定阶段插入自定义逻辑（如初始化状态、操作DOM、清理资源等）。
需要注意的是：函数组件没有生命周期，但可通过React Hooks（如useEffect）模拟类似功能；以下内容均针对类组件展开。

二、生命周期阶段划分

React组件的生命周期主要分为三大阶段，每个阶段包含若干关键钩子函数：

1. 挂载阶段（Mounting）

定义：组件从实例化到首次渲染到真实DOM的过程（“出生”阶段）。
触发时机：ReactDOM.render(<Component />, container)。
关键钩子函数及作用：

（1）constructor(props)

• 调用顺序：挂载阶段的第一步（仅在组件首次创建时执行一次）。
• 核心用途：
  • 初始化组件的state（如this.state = { count: 0 }）；
  • 绑定事件处理函数的this指向（如this.handleClick = this.handleClick.bind(this)）；
  • 接收父组件传递的props（通过props参数）。
• 注意事项：
  • 必须调用super(props)（ES6类的要求，用于初始化父类的props）；
  • 避免在constructor中调用setState（此时组件未挂载，无法触发渲染）。

（2）static getDerivedStateFromProps(props, state)

• 调用顺序：constructor之后、render之前（每次渲染前都会执行，包括首次渲染和更新）。
• 核心用途：
  • 根据**新的props**更新组件的state（返回一个对象，React会将其合并到state中；返回null则表示不更新）。
• 注意事项：
  • 是静态方法（必须用static修饰），无法访问this；
  • 需谨慎使用（过度使用会导致代码难以维护），优先考虑通过props直接控制渲染。

（3）render()

• 调用顺序：挂载阶段的核心步骤（每次渲染都会执行）。
• 核心用途：
  • 返回React元素（JSX），描述组件的UI结构；
  • 是纯函数（无副作用，不能修改state或触发DOM操作）。
• 注意事项：
  • 必须返回有效的React元素（如<div />、null或false）；
  • 避免在其中调用setState（会导致无限循环渲染）。

（4）componentDidMount()

• 调用顺序：render之后（组件首次渲染到真实DOM后执行，仅一次）。
• 核心用途：
  • 执行副作用操作（如发送网络请求、添加DOM事件监听、启动定时器等）；
  • 是类组件中最常用的生命周期方法之一。
• 注意事项：
  • 此时组件已挂载到DOM，可通过this.refs或document.getElementById访问DOM节点；
  • 避免在此处执行耗时操作（如同步遍历大型数组），以免阻塞渲染。

2. 更新阶段（Updating）

定义：组件因props变化、state更新或forceUpdate触发的重新渲染过程（“成长”阶段）。
触发时机：

• 父组件重新渲染（传递新的props）；
• 调用this.setState修改state；
• 调用this.forceUpdate强制更新。
  关键钩子函数及作用：

（1）static getDerivedStateFromProps(props, state)

• 调用顺序：更新阶段的第一步（每次更新前都会执行）。
• 核心用途：同挂载阶段（根据props更新state）。
• 注意事项：
  • 需与render配合使用（每次渲染前都会执行），避免复杂的逻辑。

（2）shouldComponentUpdate(nextProps, nextState)

• 调用顺序：getDerivedStateFromProps之后、render之前。
• 核心用途：
  • 控制组件是否更新（返回true则继续更新流程，返回false则跳过本次更新）。
• 注意事项：
  • 是性能优化的关键（默认返回true，每次props或state变化都会触发更新）；
  • 需比较nextProps和nextState与当前的this.props、this.state（避免浅比较导致的bug）。

（3）render()

• 调用顺序：更新阶段的核心步骤（每次更新都会执行）。
• 核心用途：同挂载阶段（返回React元素）。
• 注意事项：
  • 避免在其中调用setState（会导致无限循环）。

（4）getSnapshotBeforeUpdate(prevProps, prevState)

• 调用顺序：render之后、componentDidUpdate之前。
• 核心用途：
  • 获取更新前的DOM信息（如滚动位置、输入框值等），并返回该信息（作为componentDidUpdate的第三个参数）。
• 注意事项：
  • 必须与componentDidUpdate配合使用（返回值会被传递给componentDidUpdate）；
  • 适用于需要对比更新前后DOM的场景（如保存滚动位置）。

（5）componentDidUpdate(prevProps, prevState, snapshot)

• 调用顺序：更新阶段的最后一步（组件更新完成后执行）。
• 核心用途：
  • 执行依赖DOM的副作用操作（如根据新的props获取数据、操作更新后的DOM、发送分析事件等）。
• 注意事项：
  • 需对比prevProps和prevState与当前的this.props、this.state（避免不必要的操作）；
  • 避免在此处调用setState（可能导致无限循环，除非配合条件判断）。

3. 卸载阶段（Unmounting）

定义：组件从DOM中移除的过程（“死亡”阶段）。
触发时机：ReactDOM.unmountComponentAtNode(container)或父组件卸载时。
关键钩子函数及作用：

（1）componentWillUnmount()

• 调用顺序：卸载阶段的唯一一步（组件卸载前执行，仅一次）。
• 核心用途：
  • 执行清理操作（如取消网络请求、移除DOM事件监听、清除定时器等）。
• 注意事项：
  • 必须执行清理（否则可能导致内存泄漏，如未清除的定时器会持续运行）；
  • 避免在此处调用setState（组件已卸载，无法更新状态）。

4. 错误处理阶段（Error Handling）

定义：组件渲染、生命周期或子组件构造函数中抛出错误时的处理阶段。
关键钩子函数及作用：

（1）static getDerivedStateFromError(error)

• 调用顺序：子组件抛出错误后，渲染前执行。
• 核心用途：
  • 捕获错误并更新state（如设置hasError: true），用于显示错误边界UI。
• 注意事项：
  • 是静态方法，无法访问this；
  • 仅用于捕获子组件的错误（无法捕获自身的错误）。

（2）componentDidCatch(error, info)

• 调用顺序：getDerivedStateFromError之后执行。
• 核心用途：
  • 记录错误信息（如发送到错误监控系统）。
• 注意事项：
  • 与getDerivedStateFromError配合使用，构成错误边界（Error Boundary）。

三、常见生命周期流程示例

1. 挂载流程（首次渲染）

constructor → getDerivedStateFromProps → render → componentDidMount

2. 更新流程（setState触发）

getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate

3. 卸载流程

componentWillUnmount

四、注意事项

1. 废弃的生命周期方法：
   • React 16.3+版本中，componentWillMount、componentWillReceiveProps、componentWillUpdate被标记为不安全（UNSAFE_前缀），建议使用getDerivedStateFromProps、componentDidUpdate替代。
2. 函数组件的替代方案：
   • 类组件的生命周期可通过useEffect模拟：
     • componentDidMount → useEffect(() => {}, [])（空依赖数组，仅在挂载时执行）；
     • componentDidUpdate → useEffect(() => {}, [props, state])（依赖项变化时执行）；
     • componentWillUnmount → useEffect(() => { return () => {} }, [])（返回清理函数）。
3. 性能优化：
   • 合理使用shouldComponentUpdate或React.memo（函数组件）避免不必要的渲染；
   • 避免在render中执行复杂计算（可使用useMemo缓存结果）。

通过以上详解，可清晰掌握React类组件生命周期的各个阶段及钩子函数的使用场景，为组件开发提供更精准的控制能力。