React 生命周期详解：从挂载到卸载

React 生命周期详解：从挂载到卸载

React 组件的生命周期（Lifecycle）是指组件从创建到销毁的整个过程，包括挂载、更新和卸载三个主要阶段。这套机制允许开发者在组件的不同生命周期节点注入自定义逻辑，如初始化状态、请求数据、清理资源等。

关键点：

• 主要针对类组件：React 16.3+ 引入 Hooks 后，函数组件通过 useEffect 等 Hook 模拟生命周期。但本文重点讲解类组件的经典生命周期（基于 React 18+）。
• 已弃用方法：React 17+ 标记了 componentWillMount、componentWillReceiveProps、componentWillUpdate 为 UNSAFE_（不推荐使用，可能在未来版本移除）。
• 异步渲染：React 16+ 支持异步渲染，生命周期方法调用顺序可能因 Fiber 架构而略有变化，但整体流程一致。
• Hooks 替代：函数组件更推荐，使用 useEffect、useState 等实现类似功能。

下面按时间线（从挂载到卸载）详细拆解每个阶段，包括方法调用顺序、用途、代码示例和注意事项。

1. 挂载阶段（Mounting）：组件首次渲染到 DOM

这一阶段从组件实例化开始，到插入 DOM 结束。顺序固定。

方法名称	调用时机	用途 / 常见操作	是否能访问 DOM	异步渲染影响
constructor()	组件实例化时（props 传入前）	初始化 state、绑定方法（this.xxx = this.xxx.bind(this)）	否	无
static getDerivedStateFromProps(props, state)	constructor 后 / render 前（静态方法）	从 props 派生 state（很少用）	否	无
render()	所有准备就绪后	返回 JSX / React 元素（纯函数，不能有副作用）	否	—
componentDidMount()	render 后，组件已插入 DOM	请求数据、添加事件监听、setState（初始化后更新）	是	无

代码示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);  // 绑定方法
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.initialCount !== prevState.count) {
      return { count: nextProps.initialCount };  // 从 props 更新 state
    }
    return null;
  }

  componentDidMount() {
    // 发起 API 请求
    fetch('/api/data').then(res => this.setState({ data: res }));
    document.addEventListener('click', this.handleClick);  // 添加全局监听
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

注意：

• 避免在 constructor 中调用 setState（props 还没初始化）。
• componentDidMount 是请求数据的黄金时机（不会阻塞渲染）。
• 已弃用：UNSAFE_componentWillMount（用 constructor 或 getDerivedStateFromProps 代替）。

2. 更新阶段（Updating）：组件 props/state 变化时

当 props/state 变化、父组件重渲染或 forceUpdate() 时触发。顺序类似挂载，但多了一些更新前检查。

方法名称	调用时机	用途 / 常见操作	是否能访问 DOM	异步渲染影响
static getDerivedStateFromProps(props, state)	props/state 变化后，render 前	从新 props 更新 state	否	无
shouldComponentUpdate(nextProps, nextState)	getDerivedStateFromProps 后	性能优化：返回 false 阻止渲染（PureComponent 默认实现）	否	无
render()	shouldComponentUpdate 返回 true 后	返回新 JSX	否	—
getSnapshotBeforeUpdate(prevProps, prevState)	render 后，DOM 更新前	捕获 DOM 状态（如滚动位置）返回给 componentDidUpdate	是	无
componentDidUpdate(prevProps, prevState, snapshot)	DOM 更新后	更新后操作（如动画、请求新数据）	是	无

代码示例：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;  // 浅比较，避免不必要渲染
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 捕获滚动位置
    return document.getElementById('scroll-container').scrollTop;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.value !== prevProps.value) {
      // 根据 snapshot 恢复滚动位置
      document.getElementById('scroll-container').scrollTop = snapshot;
      // 或发起新请求
      fetch(`/api/update?newValue=${this.props.value}`);
    }
  }

  render() {
    return <div>Value: {this.props.value}</div>;
  }
}

注意：

• shouldComponentUpdate 是性能调优的关键（但不要过度使用）。
• 已弃用：UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate（用 getDerivedStateFromProps / getSnapshotBeforeUpdate 代替）。
• componentDidUpdate 避免直接 setState（防止无限循环），用条件判断。

3. 卸载阶段（Unmounting）：组件从 DOM 移除

当组件被移除（父组件不渲染它）时触发。只有一个方法。

方法名称	调用时机	用途 / 常见操作	是否能访问 DOM	异步渲染影响
componentWillUnmount()	组件即将从 DOM 移除前	清理资源：移除事件监听、取消定时器、关闭连接	是	无

代码示例：

class MyComponent extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => console.log('tick'), 1000);
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    clearInterval(this.timer);  // 清理定时器
    document.removeEventListener('click', this.handleClick);  // 移除监听
    // 关闭 WebSocket 等
  }

  render() {
    return <div>Unmounting Example</div>;
  }
}

注意：

• 这里是清理资源的唯一时机（防止内存泄漏）。
• 不要在这里 setState（组件已卸载）。
• 已弃用：无（但老版本有 componentWillUnmount 的 UNSAFE_ 变体）。

4. 函数组件的生命周期（Hooks 模拟，2025 主流写法）

类组件生命周期正逐渐被 Hooks 取代。Hooks 更简洁、复用性强。

类组件方法	Hooks 等价物	备注
constructor	useState 初始值	—
getDerivedStateFromProps	useEffect + 依赖数组	—
componentDidMount	useEffect(() => { … }, [])	空依赖数组
shouldComponentUpdate	React.memo / useMemo	—
componentDidUpdate	useEffect(() => { … }, [deps])	非空依赖
componentWillUnmount	useEffect(() => { return cleanup; }, [deps])	返回清理函数

Hooks 示例（模拟类组件）：

import { useState, useEffect } from 'react';

function MyFunctionalComponent({ value }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // componentDidMount + componentDidUpdate
    fetch(`/api/data?value=${value}`).then(res => setCount(res.count));

    return () => {
      // componentWillUnmount
      console.log('清理资源');
    };
  }, [value]);  // 依赖 value 变化

  return <div>Count: {count}</div>;
}

注意：useEffect 的依赖数组是关键（空数组 = 只挂载时执行；无数组 = 每次渲染都执行）。

5. 常见问题与最佳实践

• 无限循环：componentDidUpdate / useEffect 中无条件 setState → 无限渲染。
• 性能优化：用 shouldComponentUpdate / React.memo 避免子组件不必要重渲染。
• 异步问题：setState 是异步的（用回调形式处理）。
• 迁移建议：新项目优先 Hooks（函数组件）；老项目类组件可渐进迁移。
• 调试工具：React DevTools 高亮组件渲染顺序和生命周期钩子。

掌握这些，你就能在 React 项目中精准控制组件行为！如果想看具体 Hooks 示例或某个方法的深度代码实战，告诉我，我们继续。