React 组件生命周期

组件从"出生"到"销毁"会经历几个固定阶段，React 在每个阶段都预留了钩子方法，让我们在正确时机做初始化、更新响应与清理工作。这是类组件时代最重要的概念，也是理解 Hooks 运行时机的基础。

三大阶段

生命周期分为挂载（Mounting）、更新（Updating）、卸载（Unmounting）三个阶段：组件首次插入 DOM 是挂载，props 或 state 变化触发更新，从 DOM 移除则是卸载。

挂载阶段

组件第一次渲染时依次执行 constructor → render → componentDidMount。发请求、订阅事件这类副作用应放在 componentDidMount 中，此时 DOM 已经就绪：

import { Component } from 'react'

class Article extends Component {
  componentDidMount() {
    console.log('挂载完成，可以请求文章数据了')
  }
  render() {
    return <article>文章正文</article>
  }
}
// 输出：挂载完成，可以请求文章数据了

更新阶段

props 或 state 变化时组件重新渲染。componentDidUpdate 能拿到更新前后的值做对比，适合"某个值变了才执行"的场景：

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    console.log('count 变了：', this.state.count)
  }
}

注意：在该方法里调用 setState 必须包一层条件判断，否则会陷入"更新-再更新"的无限循环。

卸载阶段

组件从 DOM 移除前会执行 componentWillUnmount，用来清理定时器、取消订阅、解绑监听，防止内存泄漏：

import { Component } from 'react'

class Timer extends Component {
  timer = null
  componentDidMount() {
    this.timer = setInterval(() => console.log('嘀嗒'), 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timer) // 组件销毁前释放定时器
  }
  render() {
    return <p>计时中...</p>
  }
}

生命周期速查表

方法	触发时机	典型用途
constructor	挂载前	初始化 state、绑定方法
render	每次渲染	返回 JSX（纯函数，别放副作用）
componentDidMount	挂载后	请求数据、订阅事件
componentDidUpdate	更新后	响应 props/state 变化
componentWillUnmount	卸载前	清理定时器、取消订阅

函数组件没有这些方法名，改用 useEffect 等 Hooks 表达同样的时机（详见 Hooks 章节），例如 useEffect 搭配空依赖数组等价于 componentDidMount。

小结：生命周期的本质是"在正确的时机做正确的事"——挂载时初始化、更新时响应变化、卸载时清理资源。记住这张速查表，就能掌控类组件从生到死的每个环节。