React 组件生命周期

封面图 • 2025-10-11 • React

React 组件生命周期是指组件从被创建、渲染到更新，再到最终被卸载的整个过程。在 React 中，根据版本不同（React 16.3 之前和之后），生命周期方法有所不同。

以下是 **React 函数组件** 和 **类组件** 的生命周期总结：

---

## 🧱 一、类组件生命周期（React 16.3 之前）

### 1. 挂载阶段（Mounting）
- `constructor()`：构造函数，初始化 state 和绑定事件。
- `getDerivedStateFromProps()`：在 render 之前调用，用于根据 props 更新 state。
- `render()`：渲染组件。
- `componentDidMount()`：组件挂载完成后调用，常用于发起网络请求、设置定时器等。

### 2. 更新阶段（Updating）
- `getDerivedStateFromProps()`：当 props 或 state 变化时调用。
- `shouldComponentUpdate()`：决定是否重新渲染组件（可优化性能）。
- `render()`：重新渲染组件。
- `getSnapshotBeforeUpdate()`：在 render 之后，DOM 更新前调用，用于获取快照。
- `componentDidUpdate()`：组件更新后调用，常用于处理更新后的逻辑。

### 3. 卸载阶段（Unmounting）
- `componentWillUnmount()`：组件卸载前调用，用于清理资源（如取消订阅、清除定时器）。

---

## 🧱 二、类组件生命周期（React 16.3 之后）【推荐】

React 16.3 引入了新的生命周期方法，旧的方法逐渐被标记为 deprecated。

### 1. 挂载阶段
- `constructor()`
- `static getDerivedStateFromProps(props, state)`：替代 `getDerivedStateFromProps`（旧版）。
- `render()`
- `componentDidMount()`

### 2. 更新阶段
- `static getDerivedStateFromProps(props, state)`
- `shouldComponentUpdate()`
- `render()`
- `getSnapshotBeforeUpdate(prevProps, prevState)`：替代 `componentWillUpdate`。
- `componentDidUpdate()`

### 3. 卸载阶段
- `componentWillUnmount()`

---

## 🧱 三、函数组件生命周期（React Hooks）

React 16.8 引入了 Hooks，现在大多数开发使用函数组件 + Hooks 来替代类组件。

### 常见 Hook：
- `useEffect()`：模拟 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`。
- `useContext()`：访问上下文。
- `useReducer()`：状态管理。
- `useRef()`：保存变量或 DOM 引用。
- `useState()`：状态管理。

### 示例：

```jsx
import React, { useEffect } from 'react';

function MyComponent({ name }) {
  useEffect(() => {
    // componentDidMount 和 componentDidUpdate
    console.log('Component mounted or updated');

return () => {
      // componentWillUnmount
      console.log('Component will unmount');
    };
  }, [name]); // 依赖项数组控制 effect 执行时机

return <div>Hello, {name}</div>;
}
```

---

## ✅ 总结对比表

| 生命周期阶段 | 类组件（旧） | 类组件（新） | 函数组件（Hooks） |
|--------------|---------------|----------------|---------------------|
| 挂载         | `constructor`, `render`, `componentDidMount` | `constructor`, `render`, `componentDidMount` | `useEffect`（无单独挂载阶段） |
| 更新         | `render`, `componentDidUpdate` | `render`, `componentDidUpdate` | `useEffect`（依赖项控制） |
| 卸载         | `componentWillUnmount` | `componentWillUnmount` | `useEffect` 返回的函数 |
| 获取快照     | `componentWillUpdate` | `getSnapshotBeforeUpdate` | 无直接对应，可用 ref 或 state 替代 |

---

如果你是初学者，建议使用函数组件 + Hooks，因为它是 React 的主流趋势，并且更简洁易读。

需要我帮你写一个具体组件的生命周期示例吗？