11、React 组件生命周期全解析

React 组件生命周期全解析

1. 引言

在使用 React 创建应用的展示层时，我们已经掌握了组件的挂载和组合方法。然而，JavaScript 世界复杂多变，存在大量的异步操作，如数据加载时的延迟、动画创建时的延迟等。为了更好地利用第三方 JavaScript 库或进行后端数据请求，我们需要深入了解组件的生命周期。

2. 组件生命周期概述

组件生命周期包含一系列方法，在组件挂载或更新时按顺序调用。这些方法在组件渲染 UI 前后执行，渲染方法本身也是生命周期的一部分。主要有两种生命周期：挂载生命周期和更新生命周期。

2.1 挂载生命周期

挂载生命周期的方法在组件挂载或卸载时调用，可用于初始化状态、进行 API 调用、启动和停止定时器、操作渲染的 DOM、初始化第三方库等。

使用 ES6 类语法和 React.createClass 创建组件时，挂载生命周期略有不同：
- 使用 createClass 时，先调用 getDefaultProps 获取组件属性，再调用 getInitialState 初始化状态。
- ES6 类没有这些方法，默认属性作为参数传递给构造函数，在构造函数中初始化状态。

下表列出了组件挂载生命周期的方法：
| ES6 类 | React.createClass() |
| — | — |
| constructor(props) | getDefaultProps() |
| | getIn