004*：组件的生命周期（初始化、进行中、销毁）

目录

正文

1：生命周期-初始化

/* 目标
1：始化生命周期的执行过程
2：理解生命周期的各个钩子函数的作用
*/

import React, { Component } from 'react'

export default class LifeCycleComponent extends Component {
    // 构造函数
    constructor(props) {
        super(props)
        console.log('1:constructor')
    }

    /*
    组件挂载之前执行
        组件挂载之前，会执行constructor构造函数
        组件渲染之前最后一次修改数据的计划
        1：初始化数据的操作
    */ 
    componentWillMount() {
        console.log('2:componentWillMount')
    }

    /*
    组件挂载之后执行
        组件渲染之后的操作
        1：请求数据
        2：监听事件
        3：定时器
        4：订阅
        5：其他
    */ 
    componentDidMount() {
        console.log('4:componentDidMount')
    }
    // 渲染函数
    render() {
        console.log('3:render')
        return (
            <div>生命周期-初始化</div>
        )
    }
}

引用