组件生命周期_挂载时

挂载阶段指的是组件被初始化到第一次渲染到页面上这个过程。

挂载阶段的钩子函数：

• constructor ：构造函数，组件被初始化时调用，在生命周期中只会被调用一次。
• static getDerivedStateFromProps：是组件类的静态函数， 组件props或者state初始化或者变化时调用，最终可以返回一个新的state对象，使用率低。
• render ：定义并返回组件的界面（react元素）。
• componentDidMount： 生成了真实DOM并被渲染到页面之后调用，在生命周期中只会被调用一次。

xxxxxxxxxx
import React, { Component } from 'react'

export default class LifeCycle extends Component {
    
    constructor(props) {
        console.log('constructor')
        super(props);
        // 初始化 state状态
        this.state = {
            text: "初始值"
        }
    }
    // 使用率低：它应返回一个对象来更新 state，如果返回 null 则state不变
    // getDerivedStateFromProps 在组件的state或者props初始化或者发生变化时调用
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps')
        return {
            text: props.text
        }
    }
    // 返回UI
    render() {
        console.log('render')
        return (
            <div>
                <h3>组件生命周期</h3>
                <p>{this.state.text}</p>
            </div>
        )
    }
    // 组件已经渲染完成
    // 这个时候组件对应的DOM已经插入到DOM文档当中了
    componentDidMount() {
        console.log("componentDidMount");
    }
}

实时效果反馈

1.那个函数是在组件DOM渲染完成之后调用：

A constructor

B render

C static getDerivedStateFromProps

D componentDidMount

答案

1=>D