携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 

hello,小伙伴们大家好啊，今天是8月更文挑战第一天，主要来简单复习下react的生命周期和各个周期内的钩子函数

定义

react生命周期主要分为：

• Mounting(挂载)：此阶段已插入真实 DOM
• Updating(更新)：这个阶段正在被重新渲染
• Unmounting(卸载)：此时已移出真实 DOM

详解：

挂载阶段

当组件实例被创建并插入 DOM 中时，此时生命周期调用顺序：

• constructor: 在 React 组件挂载之前，创建组件时，会执行调用它的构造函数。是最先执行的函数，初始化只执行一次。 作用： 1.初始化state 2.创建ref 3.使用bind解决this指向问题
• getDerivedStateFromProps: 在调用 render 方法之前调用，初始挂载和后续更新时都会被调用
• render: 每次组件渲染都会调用。主要作用为渲染url(不能调用setState)
• componentDidMount: 在组件挂载后（完成dom渲染后）执行，主要功能是dom操作和发送网络请求

更新阶段

组件的 state 或 props 每次发生变化时，组件就会更新变化，触发更新，执行顺序为:

• getDerivedStateFromProps: 在调用 render 方法之前调用，在初始挂载及后续更新时都会被调用。
• shouldComponentUpdate:当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
• render:每次渲染都会触发，和挂载阶段的url为同一个
• getSnapshotBeforeUpdate: 在最近一次渲染输出（提交到 DOM 节点）之前调用。主要作用为能在组件发生更改之前从dom中捕获一些信息将这些信息作为参数传递给 componentDidUpdate函数
• componentDidUpdate: 在更新后(dom渲染完毕)会被立即调用。主要作用为:dom操作，获取更新后的dom内容(注意不能直接调用setState)

卸载

卸载阶段只有一个方法:

• componentWillUnmount: 在组件卸载及销毁(从页面消失)之前直接调用。此时主要操作为清理工作，如清理定时器等。

总结：

组件的生命周期：就是组件从创建到最终的销毁的整个过程，包括：创建 -> 挂载 -> 更新 -> 销毁。