零经验学 react 的第11天 - 组件的生命周期

class 组件的生命周期

渲染阶段

• render ：渲染之前,执行 render 决定模版
• componentDidMount：已经挂载，一般用于页面初始化，可以请求一些数据

更新阶段

• shouldComponentUpdate: 是否应该重新更新（一般用于性能提升）
• componentDidUpdate 已经更新

卸载阶段

• componentWillUnmount 即将卸载，一般用于清理定时器、监听等

import React from 'react';

class Test2 extends React.Component {
    constructor(props) {
        super(props);
    }

    // 组件挂载时触发， 一般用于页面初始化，可以请求一些数据
    componentDidMount() {
        console.log("Test2 componentDidMount");
    }
    // 是否允许组件更新时触发render， 是否应该重新更新（一般用于性能提升）
    shouldComponentUpdate() {
        console.log("Test2 shouldComponentUpdate");
        return true; // 如果返回 false，则不会触发render进行数据更新
    }
    // 组件更新时触发
    componentDidUpdate() {
        console.log("Test2 componentDidUpdate");
    }
    // 卸载组件时触发，一般用于清理定时器、监听等
    componentWillUnmount() {
        console.log("Test2 componentWillUnmount");
    }
    // render 函数，渲染页面（也是一个声明周期，决定模版的内容）
    render() {
        return(
        <div className="test2-box">
            <p>Test2</p>
            <div>
                <p>这是一个 class 组件</p>
            </div>
        </div>
        )
    }
}
export default Test2;

function 组件的生命周期（用hook 做生命周期）

函数本身就相当于 render 声明周期 useEffect(副作用，用于模拟生命周期，相当于 componentDidMount &componentDidUpdate 两个周期的结合体)

• 如果只需要 componentDidMount 的效果，则需要一个空数组作为 useEffect 的第二个参数
• 如果需要根据某个数据变化而重新更新，那么useEffect的第二个参数中填写这个数据

useEffect(() => {
    console.log("生命周期-- a 每次更新 + 页面初始化会执行");
}, [a]);
useEffect(() => {
    console.log("生命周期--组件的每次更新后执行 + 页面初始化会执行");
});
useEffect(() => {
    console.log("生命周期--页面初始化会执行");
}, []);

import { useEffect, useState } from "react";

// 函数本身就是一个 render 的生命周期
function Test1 () {
    // useEffect(副作用，用于模拟生命周期，相当于 componentDidMount &componentDidUpdate 两个周期的结合体)
    useEffect(() => {
        console.log("生命周期-- a 每次更新 + 页面初始化会执行");
    }, [a]);
    
    useEffect(() => {
        console.log("生命周期--组件的每次更新后执行 + 页面初始化会执行");
    });
    
    useEffect(() => {
        console.log("生命周期--页面初始化会执行");
    }, []);
    
    return (
        <div className="test1-box">
            <p>Test1</p>
            <div>
                <p>这是一个 function 组件</p>
            </div>
        </div>
    )
}

export default Test1;