1、组件的挂载阶段(只会执行一次)
读取props以及初始化state状态、自定义属性以及方法，使用构造函数construct()，加载的时候调用一次，可以初始化state
import React, {Component} from "react"
export default class Cycle extends Component {
// 1、初始化阶段[数据的挂载、函数的定义声明]
constructor(){
super()
this.state = {
msg:'旧版本的生命周期'
}
}
}
组件将要挂载的时候触发的函数：componentWillMount()
组件加载时只调用，之后组件更新不再调用，整个生命周期只会调用一次，此时可以去修改状态state中的数据。
componentWillMount(){
//修改数据
}
render()函数渲染组件
创建虚拟DOM，进行diff算法，更新DOM树都在此时进行。
render(){
return (
<>
{this.state.msg}
)
}
挂载完成触发函数
render()函数渲染完组件后触发，而且只会触发一次，在进行服务端渲染时是不会触发的。
这个生命周期的主要功能类似于window.onload，可以在这个生命周期函数中去操作DOM，以及去请求后台的数据接口等操作。
componentDidMount(){
// 请求后台数据
// 操作DOM
}
2、组件更新阶段
父组件改变props传值时，子组件触发数据更新函数componentWillReceiveProps()
// 修改数据的生命周期函数
componentWillReceiveProps(nextProps, nextContent) {
console.log('触发数据更新函数：', nextProps, nextContent);
}
父组件.png
子组件.png
image.png
是否要更新数据时触发的函数：shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)，要返回bool值，组件接收到新的props或者state时调用，就会更新dom（使用diff算法更新），return false 能阻止更新（不调用render）
// 是否要更新数据触发的函数，返回boolean类型
shouldComponentUpdate(nextProps,nextState){
return false; //设为false将不再更新dom
}
image.png
将要更新数据时触发的函数：componentWillUpdate(nextProps, nextState)
组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state
componentWillUpdate(nextProps, nextState){
//组件更新时调用
}
render()函数再次重新调起渲染组件，此时是更新DOM树
创建虚拟dom，进行diff算法，更新dom树。
数据更新完成时触发的函数：componentDidUpdate(nextProps, nextState)
componentDidUpdate(nextProps, nextState){
// 组件更新完成后执行的生命周期函数
}
3、组件卸载阶段
组件将要销毁时触发的函数：componentWillUnmount()
组件渲染之后调用，只调用一次，切换页面时，上个页面被销毁时触发，卸载过程只涉及一个函数，当React组件要从DOM树上删除前，会调用一次这个函数。这个函数经常用于去除componentDidMount函数带来的副作用，例如清除计时器、删除componentDidMount中创造的非React元素。
父组件：
constructor(){
super()
this.state = {
isShow:true,
}
}
// 卸载子组件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
{ this.state.isShow && 子组件：
componentWillUnmount(){
console.log('子组件已被卸载');
}
4、测试完整代码
父组件：
import React, {Component} from "react"
// 引入子组件
import Subcom from "./Subcom"
export default class Cycle extends Component {
// 1、初始化阶段[数据的挂载、函数的定义声明]
constructor(){
super()
this.state = {
msg:'旧版本的生命周期',
arr:['a','b','c','d','e','f'],
isShow:true,
}
}
componentWillMount(){
//修改数据
}
// 添加数据
handleAdd = () => {
const { arr } = this.state;
arr.push(Math.floor(Math.random()*10)+1); // 加个随机数
this.setState({
arr
})
}
// 卸载子组件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
{this.state.msg}
{ this.state.isShow && 子组件：
import React, { Component } from "react"
export default class Subcom extends Component {
// 修改数据的生命周期函数
componentWillReceiveProps(nextProps, nextContent) {
console.log('触发数据更新函数：', nextProps, nextContent);
}
// 是否要更新数据触发的函数，返回boolean类型
shouldComponentUpdate(nextProps,nextState){
return false;
}
componentWillUpdate(nextProps, nextState){
//组件更新时调用
}
render() {
const { list } = this.props;
return (
<>
{
list.map((item, index) => {
return - {item}
})
}
)
}
componentDidUpdate(nextProps, nextState){
// 组件更新完成后执行的生命周期函数
}
componentWillUnmount(){
console.log('子组件已被卸载');
}
}