组件的生命周期可分成三个状态：
- Mounting(挂载)：已插入真实 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸载)：已移出真实 DOM
Mounting 挂载阶段
Mounting阶段叫挂载阶段，伴随整个虚拟DOM的声明。它里面有四个小的生命周期函数，分别是：
- constructor：初始化属性
- componentWillMount：在组件即将被挂载到页面的时候执行
- render：页面state或props发生变化时执行
- componentDidMount`：组件挂载完成之后执行
以下我们可以写一些代码来验证以下这四个阶段的执行顺序：
import React, { Component } from 'react'
export default class classs extends Component {
// 挂载阶段
constructor(props){
super(props)
console.log('1.constructor(props) --------- 组件初始化')
}
// 挂在前
componentWillMount() {
console.log('2.componentWillMount --------- 组件挂载之前')
}
// 挂在中
render() {
console.log('3.render -------- 组件中')
return (
<div>测试组件生命周期</div>
)
}
// 挂在后（常用）
componentDidMount() {
console.log('4.componentDidMount --------- 组件挂载之后')
}
}
注意：componentWillMount 和 componentDidMount 这两个生命周期函数，只在页面刷新时执行一次，而 render 函数只要有state和props变化就要执行
Updation更新阶段
Updation会在组件发生改变的时候执行。
- shouldComponentUpdate：该函数会在组件更新之前，自动被执行。
- componentWillUpdate：该函数在组件更新之前，但shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回false，那么该函数就不会被执行。
- componentDidUpdate：该函数在组件更新之后执行，它是组件更新的最后一个环节。
以下我们可以写一些代码来验证以下这三个阶段的执行顺序：文章来源：https://www.toymoban.com/news/detail-499726.html
shouldComponentUpdate() {
console.log('5.shouldComponentUpdate ------- 组件更新之前')
return true
}
componentWillUpdate() {
console.log('6.componentWillUpdate --------- 组件更新之前，shouldComponentUpdate函数后')
}
componentDidUpdate() {
console.log('7.componentDidUpdate --------- 组件更新之后')
}Unmounting 卸载阶段
componentWillUnmount：组件在卸载阶段时执行。文章来源地址https://www.toymoban.com/news/detail-499726.html
// 页面卸载时执行
componentWillUnmount() {
console.log('componentWillUnmount ----------- child')
}到了这里，关于React 组件生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
