08｜组件生命周期：React新老版本中生命周期的演化-现代React前端开发实战

当前位置:　首页>> 技术小册>> 现代React前端开发实战

### 08 | 组件生命周期：React新老版本中生命周期的演化

在React的世界里，组件的生命周期是一个核心概念，它定义了组件从创建到销毁的整个过程中，在不同时间点上React会调用的特定方法。随着React版本的迭代，尤其是从React 16.3引入的Hooks开始，组件生命周期的概念及其实现方式发生了显著的变化。本章节将深入探讨React新老版本中组件生命周期的演化，帮助读者更好地理解这些变化背后的原因以及如何在新旧项目中有效应用。

#### 一、React经典类组件的生命周期

在React 16.3之前的版本中，组件主要通过类组件（Class Components）的形式来定义，这些类组件遵循了特定的生命周期方法。这些方法按照组件的创建、更新、渲染、卸载等阶段被依次调用，为开发者提供了在这些关键点上执行自定义逻辑的机会。

##### 1. 挂载阶段（Mounting）

- **constructor(props)**: 组件实例化后立即被调用，用于初始化state或进行其他必要的设置。这是唯一在挂载过程中可以安全地设置state的地方。
- **static getDerivedStateFromProps(props, state)**: React 16.3引入的静态方法，用于替代`componentWillReceiveProps`在更新和挂载时根据props推导state。它仅在组件实例化及后续接收到新的props时调用。
- **render()**: 组件的`render`方法是一个必须实现的方法，它负责输出组件的JSX或null。
- **componentDidMount()**: 组件挂载后立即调用，此时组件已插入DOM中，可以在这里执行需要DOM节点的操作，如设置订阅、发起网络请求等。

##### 2. 更新阶段（Updating）

- **shouldComponentUpdate(nextProps, nextState)**: 返回一个布尔值，用于控制组件是否应该重新渲染。默认返回true，但在性能优化时非常有用。
- **static getSnapshotBeforeUpdate(prevProps, prevState)**: React 16.3引入，在最近一次渲染输出提交给DOM之前调用，允许组件在更改其输出之前捕获一些信息（如滚动位置）。此生命周期返回的任何值都将作为参数传递给`componentDidUpdate()`。
- **getDerivedStateFromProps(props, state)**: 同样在更新时也会被调用，用于根据props更新state。
- **render()**（再次提及）：组件更新时，会重新调用`render`方法来生成新的虚拟DOM。
- **componentDidUpdate(prevProps, prevState, snapshot)**: 更新完成后立即调用，可以访问更新后的DOM。如果`getSnapshotBeforeUpdate`返回了非null值，则此值将作为第三个参数传递。

##### 3. 卸载阶段（Unmounting）

- **componentWillUnmount()**: 组件即将被卸载及销毁时调用，常用于执行清理工作，如取消网络请求、移除订阅等。

#### 二、React函数组件与Hooks的引入

随着React 16.8中Hooks的引入，函数组件不再仅仅是无状态的纯函数，而是能够通过Hooks来访问组件的生命周期功能和其他React特性。Hooks的引入极大地改变了React组件的编写方式，使得函数组件变得更为强大和灵活。

##### 1. 替代生命周期的Hooks

- **useEffect()**: 这是一个非常强大的Hook，可以看作是`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`这三个生命周期方法的组合体。通过传入一个包含副作用的函数，并在该函数返回时提供一个清理函数（如果需要的话），`useEffect`能够处理组件的挂载、更新和卸载过程中的副作用。

- **挂载时**：`useEffect`内的函数在组件挂载到DOM后立即执行。
  - **更新时**：如果组件的props或state发生变化，并且`useEffect`的依赖项列表（作为第二个参数传入）中的任何值也发生了变化，则`useEffect`内的函数会再次执行。
  - **卸载时**：如果提供了清理函数，该函数会在组件卸载前执行，用于执行必要的清理工作，如取消定时器、移除订阅等。

- **useLayoutEffect()**: 类似于`useEffect`，但它在所有DOM变更之后同步调用，即在浏览器绘制之前执行。这使它成为执行DOM测量或重绘之前同步读取DOM布局的理想选择。

##### 2. 生命周期概念的转变

Hooks的引入让React的组件生命周期概念从基于类的方法调用转变为基于函数和副作用的声明式逻辑。这种转变不仅简化了组件的编写，还提高了代码的可读性和可维护性。开发者不再需要记忆复杂的生命周期方法调用顺序，而是可以通过逻辑清晰的Hooks来组织代码。

#### 三、新旧生命周期的比较与迁移策略

##### 1. 比较

- **类组件**：通过明确的方法（如`componentDidMount`、`componentDidUpdate`等）来管理生命周期，这些方法在组件的不同阶段被React自动调用。
- **函数组件+Hooks**：通过`useEffect`、`useLayoutEffect`等Hooks来声明副作用，这些Hooks在组件的特定阶段执行，但它们的调用是由开发者显式控制的。

##### 2. 迁移策略

对于需要从类组件迁移到函数组件的项目，以下是一些建议的迁移策略：

- **评估现有代码**：首先，分析当前项目中使用类组件的情况，特别是它们是如何利用生命周期方法的。
- **逐步迁移**：不必一次性迁移所有组件，可以从简单的、独立的组件开始，逐步迁移到函数组件。
- **重构逻辑**：将类组件中的逻辑（特别是与状态管理和副作用相关的）重构为Hooks，如`useState`、`useEffect`等。
- **测试与验证**：每次迁移后，都要确保组件的行为与迁移前一致，并进行充分的测试。

#### 四、结论

React组件生命周期的演化是React框架不断发展和完善的体现。从最初的类组件生命周期方法，到如今的函数组件加Hooks的组合，React为开发者提供了更加灵活、强大的方式来编写组件。了解并掌握这些变化，不仅能够帮助我们更好地利用React的新特性，还能在现有项目中实现更加高效、可维护的代码结构。随着React的持续发展，我们可以期待更多创新和优化，让前端开发变得更加简单和高效。

该分类下的相关小册推荐：

ReactJS面试指南

剑指Reactjs

React 进阶实践指南

React全家桶--前端开发与实例(下)

React全家桶--前端开发与实例(上)

深入学习React实战进阶