react生命周期

---

前言

今天我们一起看看react中的生命周期，并且看一看在每一个阶段都做了哪些事情~

---

一、组件生命周期概述

1.组件的生命周期

组件从被创建到挂载到页面中（显示），再到组件从页面中卸载（消失）的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。

2.钩子函数的作用

为开发人员在不同阶段操作组件提供了时机。
理解了组件的生命周期就是理解了组件的运行方式，可以帮我们实现更复杂的组件和分析组件错误原因等
只有 类组件 才有生命周期。

二、生命周期的三个阶段

1. 生命周期图解

• 每个阶段的执行时机
• 每个阶段钩子函数的执行顺序
• 每个阶段钩子函数的作用
  
  图示地址：

2. 创建时（挂载阶段）

执行时机：当组件实例被创建并插入 DOM 中时（页面刷新时）
执行顺序：

作用：

3. 更新时（更新阶段）

执行时机：

• setState()
• forceUpdate()
• 组件接收到新的props
  (以上三者任意一种情况发生，触发组件重新渲染)

执行顺序: render() —>componentDidUpdate()

作用：

4. 卸载时（卸载阶段）

执行时机：组件从页面中消失
执行顺序：：componentWillUnmount()
作用：

---

总结

Time waits for no man.