@[toc]
前言
生命周期其实就是从创建到销毁的整个过程，我们发现很多框架都涉及到生命周期，为什么这些框架需要设计生命周期呢，是因为我们需要了解我们代码的执行过程。以及它们的执行顺序是怎样的，同时在不同的生命周期阶段会暴露不同的构造函数，而在不同的构造函数中我们可以做很多不同的功能。在React中一个由extends Component创建的类组件才会拥有生命周期
react生命周期的四个阶段
- 组件初始化阶段：
getInitialState：初始化 this.state 的值，只在组件装载之前调用一次
getDefaultProps：只在组件创建时调用一次并缓存返回的对象（即在 React.createClass 之后就会调用）。
因为这个方法在实例初始化之前调用，所以在这个方法里面不能依赖 this 获取到这个组件的实例。
- 组件加载阶段：
componentWillMount：只会在装载之前调用一次
componentDidMount：只会在装载完成之后调用一次
- 组件更新阶段：
componentWillReceiveProps 、shouldComponentUpdate、componentWillUpdate、componentDidUpdate这些方法不会在首次render组件的 周期调用。
- 组件销毁阶段：
componentWillUnmount：卸载组件触发
案例说明
对于上面的生命周期过程，下面来写一个案例感受一下：
==关键点看代码中的注释：==
import React, { Component } from 'react'
export class Button extends Component {
constructor(props) {
super(props)
this.state = { liked: false }
// 我们要执行的第一个阶段就是初始化阶段
console.group('%c 1-初始化阶段', 'color: red', props, this.state)
}
// 逐渐被淘汰,需要使用就要加UNSAFE_不加会出现警告,此生命周期DOM未渲染
// 只会在挂载之前调用一次,在render之前调用,一般我们可以在这个阶段发起请求
// 还可以在这里调用setState改变状态,并且不会导致额外调用一次render
UNSAFE_componentWillMount() {
console.group('%c 2-组件加载前', 'color: green')
}
componentDidMount() {
// 在这里请求也可以,此时DOM节点已经生成
// 只在挂载完成之后调用一次,在render之后调用,从这里可以获取DOM节点
console.group('%c 4-组件加载后', 'color: orange')
}
hanleClick(e) {
this.setState({ liked: !this.state.liked })
}
shouldComponentUpdate() {
console.group('%c 5-数据是否需要更新', 'color: #00ae9d')
// return true代表组件需要更新,false表示不用更新,实际业务开发中我们一般不用这个
// return false
return true
}
UNSAFE_componentWillUpdate(nextProps, nextState) {
console.log(nextProps, nextState)
console.group('%c 6-更新前', 'color: #885233')
}
componentDidUpdate(prevProps, prevState) {
console.log(prevProps, prevState)
console.group('%c 7-更新后', 'color: #777663')
}
componentWillUnmount() {
// 这里主要完成组件的卸载和数据的销毁,清除组件所有的setTimeout,setInterval,移除所有的事件监听
console.log('8-组件销毁')
}
render() {
// 只要状态发生变化,一定会执行render方法
// render函数会插入jsx生成的DOM结构,react会生成一个虚拟DOM树,在每一次组件更新的时候,react会通过其diff算法比较更新前后的新旧DOM
// 比较以后，找到最小的差异DOM,进行重新渲染
console.group('%c 3-组件加载前render', 'color: blue')
const text = this.state.liked ? '喜欢' : '不喜欢'
return (
<button onClick={this.hanleClick.bind(this)}>你{text}学习react！</button>
)
}
}
export default Button点击按钮：经历如图所示的生命周期
再次点击按钮，进行更新：
执行更新的生命周期
如果还不清楚，直接来看图，对照着上面例子里的代码和结果，一目了然：
总结
react生命周期大致也可以分为 ==初始化== ==更新== ==销毁== 三个阶段，每个阶段中都有若干个生命周期函与一对一数
初始化
最开始调用构建函数来初始化组件的state，接着getDerivedStateFromProps函数会被调用用来探测state和props是否有变化，接着渲染逻辑render()函数就开始执行了，这时候ui就会被渲染出来，最后componentDidMount就会被执行。
graph TD
A(初始化) --> B(构建函数) --> C(getDerivedStateFromProps) --> D(render :渲染UI) --> E(componentDidMount)更新
只要组件中的props或stats发生改变，组件就会进入更新阶段：
首先执行的是getDerivedStateFromProps函数，用来探测state和props是否有变化，接着执行shouldComponentUpdate,在这里判断组件是否需要更新，如果需要更新那么render函数就会执行，ui会根据state或者props的变化进行重新渲染，渲染以后componentDidUpdate会执行，在这里处理一些组件更新以后的逻辑
graph TD
A(getDerivedStateFromProps) --> B(shouldComponentUpdate) --> C(render :渲染UI) --> D(更新) --> E(componentDidUpdate)销毁
最后当这个组件使命结束的时候吗，就会消亡。
componentWillUnmount函数就会被调用，我们在这里回收内存，删除事件监听等等，处理完成以后组件才会被最终销毁
graph TD
A(componentWillUnmount) --> B(销毁) 本篇文章就到这里啦，如果对你有帮助的话，点赞关注支持一下呀~
后续还会给大家继续带来优质的内容~
