本文已参与[新人创作礼]活动，一起开启掘金创作之路
一.概念
- 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
- 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程
- 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
- 只有 类组件 才有生命周期。
二.整体说明
projects.wojtekmaj.pl/react-lifec…
三.挂载阶段
执行时机
组件创建时（页面加载时）
执行顺序
constructor --> render --> component-DidMount
| 钩子 函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建组件时，最先执行 | 1.初始化state，2.创建Ref等 |
| render | 开始时触发一次，之后每次组件渲染都会触发 | render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM |
| componentDidMount | 组件挂载(完成DOM渲染)后 | 1.发送网络请求，2.DOM操作 |
四.更新阶段
执行时机
- setState() 2. forceUpdate() 3. 组件接收到新的props
执行顺序
render --> componentDidUpdate
| 钩子 函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建组件时，最先执行 | 1.初始化state，2.创建Ref等 |
| render | 开始时触发一次，之后每次组件渲染都会触发 | 简单来说就是渲染UI（与挂载阶段是同一个render） |
| componentDidUpdate | 组件更新（完成DOM渲染）后 | DOM操作，可以获取到更新后的DOM内容，不要调用setState |
五.卸载阶段
执行时机
执行时机：组件从页面中消失
执行顺序
render --> componentDidUpdate
| 钩子 函数 | 触发时机 | 作用 |
|---|---|---|
| componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等） |
