深入理解 React 组件的生命周期：从创建到销毁的全过程

React 作为当今最流行的前端框架之一，其组件生命周期是每个 React 开发者必须掌握的核心概念。本文将全面剖析 React 组件的生命周期，包括类组件的各个生命周期方法和函数组件如何使用 Hooks 模拟生命周期行为，帮助开发者编写更高效、更健壮的 React 应用。

一、React 组件生命周期概述

React 组件的生命周期指的是一个组件从创建、更新到销毁的整个过程。在这个过程中，React 提供了许多"生命周期方法"，允许开发者在特定的阶段执行自定义代码。理解这些生命周期方法对于控制组件行为、优化性能以及管理副作用至关重要。

React 的生命周期可以分为三个主要阶段：

挂载阶段（Mounting）：组件被创建并插入到 DOM 中
更新阶段（Updating）：组件的 props 或 state 发生变化时的重新渲染过程
卸载阶段（Unmounting）：组件从 DOM 中移除

此外，React 16 还引入了错误处理生命周期方法，用于捕获和处理组件树中的 JavaScript 错误。

二、类组件的生命周期详解

1. 挂载阶段（Mounting）

挂载阶段是组件第一次被创建并插入到 DOM 中的过程，包含以下生命周期方法：

constructor()

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

最先执行的生命周期方法
必须调用 super(props)，否则 this.props 将会是 undefined
唯一可以直接修改 this.state 的地方
用于初始化 state 和绑定事件处理方法

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.prevValue) {
    return {
      value: props.value,
      prevValue: props.value
    };
  }
  return null;
}

在 render 方法之前调用，无论是初始挂载还是后续更新
应返回一个对象来更新 state，或返回 null 不更新
用于 state 依赖于 props 变化的罕见情况
此方法无权访问组件实例（即不能使用 this）

render()

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

类组件中唯一必须实现的方法
应该是一个纯函数，不修改组件状态，不与浏览器交互
返回以下类型之一：
- React 元素（JSX）
- 数组或 fragments
- Portals
- 字符串或数值（渲染为文本节点）
- 布尔值或 null（不渲染任何内容）

componentDidMount()

componentDidMount() {
  // 典型用法：
  fetchData().then(data => this.setState({ data }));
  // 或
  this.subscription = dataSource.subscribe(this.handleDataChange);
}

组件挂载（插入 DOM 树）后立即调用
适合执行有副作用的操作：
- 网络请求
- 设置订阅
- 手动操作 DOM
可以在此处直接调用 setState()，但会触发额外渲染

2. 更新阶段（Updating）

当组件的 props 或 state 发生变化时，会触发更新阶段的生命周期方法：

static getDerivedStateFromProps()

同挂载阶段，在每次渲染前调用

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) {
  // 只有当count变化时才重新渲染
  return nextState.count !== this.state.count;
}

决定组件是否应该更新
返回 false 可以阻止组件重新渲染
主要用于性能优化
不建议深层比较或使用 JSON.stringify()，影响性能
考虑使用 PureComponent 替代手动实现

render()

同挂载阶段

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.items.length < this.props.items.length) {
    const list = this.listRef.current;
    return list.scrollHeight - list.scrollTop;
  }
  return null;
}

在最近一次渲染输出（提交到 DOM 节点）之前调用
使得组件能在 DOM 变化前捕获一些信息（如滚动位置）
返回值将作为 componentDidUpdate() 的第三个参数

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
  
  if (snapshot !== null) {
    const list = this.listRef.current;
    list.scrollTop = list.scrollHeight - snapshot;
  }
}

更新完成后调用（首次渲染不会执行）
适合执行有副作用的操作：
- 网络请求（需比较 props）
- DOM 操作
可以调用 setState()，但必须包裹在条件语句中，否则会导致无限循环

3. 卸载阶段（Unmounting）

componentWillUnmount()

componentWillUnmount() {
  clearInterval(this.timerID);
  this.subscription.unsubscribe();
}

组件卸载及销毁前调用
用于执行必要的清理操作：
- 清除定时器
- 取消网络请求
- 清理订阅
不应调用 setState()，因为组件永远不会重新渲染

4. 错误处理

React 16 引入了错误边界的概念，用于捕获子组件树中的 JavaScript 错误。

static getDerivedStateFromError()

static getDerivedStateFromError(error) {
  return { hasError: true };
}

在后代组件抛出错误后被调用
接收错误作为参数
应返回一个状态对象以更新 state，用于渲染备用 UI

componentDidCatch()

componentDidCatch(error, info) {
  logErrorToService(error, info.componentStack);
}

在后代组件抛出错误后被调用
接收两个参数：
- error - 抛出的错误
- info - 包含 componentStack 键的对象
用于记录错误信息

三、函数组件的"生命周期"

随着 React Hooks 的引入，函数组件现在也能实现类组件的生命周期功能。以下是常用 Hooks 与生命周期方法的对应关系：

useState - 状态管理

const [count, setCount] = useState(0);

相当于类组件中的 this.state 和 this.setState
可以在函数组件中添加局部 state

useEffect - 副作用管理

useEffect(() => {
  // 相当于 componentDidMount 和 componentDidUpdate
  document.title = `You clicked ${count} times`;
  
  return () => {
    // 相当于 componentWillUnmount
    // 清理函数
  };
}, [count]); // 仅在 count 更改时更新

组合了 componentDidMount, componentDidUpdate 和 componentWillUnmount
第一个参数是 effect 函数，第二个参数是依赖数组
返回的函数是清理函数，在组件卸载时执行

useLayoutEffect

useLayoutEffect(() => {
  // 在 DOM 更新后同步执行
  const { width } = node.getBoundingClientRect();
  setWidth(width);
});

与 useEffect 签名相同，但调用时机不同
在 DOM 变更后同步触发
适用于需要读取 DOM 布局并同步重新渲染的情况

useMemo 和 useCallback - 性能优化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

相当于 shouldComponentUpdate 的优化
用于避免不必要的计算和渲染

四、新旧生命周期对比与最佳实践

React 16.3 对生命周期方法进行了重大调整，废弃了一些不安全的生命周期方法：

废弃的方法：

componentWillMount
componentWillReceiveProps
componentWillUpdate

这些方法被标记为不安全主要是因为：

它们经常被误用和滥用
在异步渲染中可能导致问题
容易引入副作用和错误

最佳实践建议：

将数据获取移到 componentDidMount 或 useEffect 中
使用 getDerivedStateFromProps 替代 componentWillReceiveProps
使用 getSnapshotBeforeUpdate 替代 componentWillUpdate
考虑使用函数组件和 Hooks 替代类组件
谨慎使用派生 state，多数情况下可以通过提升 state 或受控组件解决

五、实际应用场景示例

场景1：数据获取

class UserProfile extends React.Component {
  state = { user: null, loading: true };
  
  async componentDidMount() {
    const user = await fetchUser(this.props.userId);
    this.setState({ user, loading: false });
  }
  
  async componentDidUpdate(prevProps) {
    if (this.props.userId !== prevProps.userId) {
      this.setState({ loading: true });
      const user = await fetchUser(this.props.userId);
      this.setState({ user, loading: false });
    }
  }
  
  componentWillUnmount() {
    // 取消可能的未完成请求
  }
  
  render() {
    // 渲染用户信息
  }
}

场景2：滚动位置恢复

class ScrollList extends React.Component {
  getSnapshotBeforeUpdate(prevProps) {
    if (prevProps.items.length < this.props.items.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  
  render() {
    return (
      <div ref={this.listRef}>
        {/* 列表内容 */}
      </div>
    );
  }
}

场景3：错误边界

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}