Ciclo de vida de React(5) (antiguo)

Todos los ganchos de ciclo de vida con voluntad deben agregar UNSAFE_ excepto componenteWillUnmount

1. Etapa de montaje de componentes

1. Primero ejecuta el constructor constructor

2. Ejecute componentWillMount nuevamente (el componente se montará)

3. Inicializa la fase de renderizado render

4. Ejecute componenteDidMount nuevamente (el componente está montado)

 // 构造器
    constructor(props) {
        console.log('构造器', 'constructor');
        super(props);
    }
    componentWillMount() {
        console.log("组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("组件完成挂载", "componentDidMount");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("渲染", "render");
        return (
            <div id="hahah"></div>
        )
    }

2. Fase de actualización de componentes Cuando es necesario activar una actualización

1.DeberíaActualizarComponentes()

Cuando se llama al método setState, esta función se activará para determinar si es necesario actualizarlo. Si no está escrito, devolverá verdadero por defecto. Si devuelve falso, no se actualizará.

2.componentWillUpdate() El componente se actualizará

3.render() actualización de renderizado

4.componentDidUpdate() La actualización del componente está completa

 // 当调用setState方法后 会触发这个函数 用于判断是否需要更新 如果不写默认返回true  如果返回false 则不会更新
    shouldComponentUpdate() {
        console.log("组件是否应该更新", "shouldComponentUpdate");
        return true;
    }
    // 组件将要更新
    componentWillUpdate() {
        console.log("组件将要更新", "componentWillUpdate");
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log("组件更新完成", "componentDidUpdate");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("渲染", "render");
        return (
            <div id="hahah">
                <div>{this.state.num}</div>
                <button onClick={this.death}>哈哈了</button>
            </div>
        )
    }

 3. No cambie los datos de estado para forzar la actualización para omitir shouldComponentUpdate

render() {
        console.log("渲染", "render");
        return (
            <div id="hahah">
                <button onClick={this.fff}>不更改任何状态中的数据,强制更新</button>
            </div>
        )
    }
    fff = () => {
        this.forceUpdate();
    }

 4. Orden de ejecución del ciclo de vida del componente padre-hijo

Primero ejecute el montaje del componente principal => procesamiento del componente principal => montaje del componente secundario => procesamiento del componente secundario => montaje del componente secundario completo => montaje del componente principal completo

componente padre

 constructor(props) {
        console.log('父组件构造器', 'constructor');
        super(props)
    }
    componentWillMount() {
        console.log("父组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("父组件完成挂载", "componentDidMount");
    }
    render() {
        console.log("父组件渲染", "render");
        return (
            <div>
                <Dome1 />
            </div>
        )
    }

Subensamblaje

 // 构造器
    constructor(props) {
        console.log('子组件构造器', 'constructor');
        super(props)
    }
    componentWillMount() {
        console.log("子组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("子组件完成挂载", "componentDidMount");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("子组件渲染", "render");
        return (
            <div id="hahah"></div>
        )
    }

5. El componente se desinstalará

componentWillUnmount() {
        console.log("子组件被卸载", "componentWillUnmount");
    }

 6. Resumen