组件的生命周期

概述

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

生命周期的整体说明

• 每个阶段的执行时机
• 每个阶段钩子函数的执行顺序
• 每个阶段钩子函数的作用
• 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	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

todo案例优化

0. 组件拆分

1. 渲染任务列表

2. 更新数据

3. 删除一条数据功能

4. Footer点谁谁有边框

5. Footer点击切换数据

6. Footer清空数据

7. 剩余任务的功能

8. Header改造为受控组件

9. 回车新增功能

   0. ESC取消输入内容
   1. 新增空，清空输入框
   2. 数据不能为空，提示用户

10. 本地缓存数据

    0. 缓存list
    1. 缓存type

11. 全选功能

    0. 小选影响全选
    1. 全选影响小选

\