04-React组件的生命周期

概述

• 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
• 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程
• 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
• 早期：只有 类组件 才有生命周期。

生命周期的整体说明

• 每个阶段的执行时机
• 每个阶段钩子函数的执行顺序
• 每个阶段钩子函数的作用
• projects.wojtekmaj.pl/react-lifec…

创建阶段(一次)

执行时机：组件创建时（页面加载时）

执行顺序：

钩子 函数	触发时机	作用
constructor	创建组件时，最先执行	1. 初始化state 2. 创建Ref等
render	每次组件渲染都会触发	渲染UI
componentDidMount	组件挂载（完成DOM渲染）后	1. 发送网络请求 2.DOM操作

总结：

0. constructor 对标 Vue中的beforeCreate/created
1. componentDidMount 对标 Vue中的 Mounted
2. 在一个完整的生命周期中，constructor 与 componentDidMount 只会执行一次。
3. 在一个完整的生命周期中，render会执行多次

注意：

0. 在React中，我们在componentDidMount 中发请求，绝对不在constructor 中发请求。

更新阶段（多次）

• 执行时机：1. setState() 2. 组件接收到新的props、
• 说明：以上三者任意一种变化，组件就会重新渲染
• 执行顺序

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）（注意： 不能调用setState() ）
componentDidUpdate	数据更新-组件更新	DOM操作，可以获取到更新后的DOM内容，不要调用setState

总结：

0. 触发组件更新的方式（常用），两种：

   0. 💥props 值的改变
   1. 💥setState() 改变state

1. 更新阶段触发的钩子函数，有两个

   0. render
   1. componentDidUpdate

2. render与componentsDidUpdate 都可以拿到更新后的值。

3. render与componentsDidUpdate 中都不能调用setState ，会造成死循环。

注意：

0. 不论DOM中有没有使用数据，钩子函数都会被触发。（与vue不同）
1. react中的更新，指的是数据更新，而非视图更新。（与vue不同）

卸载阶段(一次)

• 执行时机：组件从页面中消失

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）