5、React组件生命周期

1、介绍

组件生命周期：指的是组件从开始到结束的过程，中间会经历一些特定的时刻，如创建、实例化、渲染组件到页面（挂载）、state状态变化、组件从页面移除（卸载）等等。

钩子函数：组件经历到生命周期某些特定时刻时，某个特定的函数会被自动调用，这些特定的函数就称为钩子函数(生命周期回调函数)，React组件中包含一系列勾子函数。

钩子函数作用：开发者在定义组件时，可以在组件生命周期某时刻对应的钩子函数中实现指定的功能，例如组件被渲染到页面，然后立刻发起HTTP请求服务端数据。

2、组件生命周期详解

旧版本React生命周期（17版本以前）

在这里插入图片描述

上图所示，React组件生命周期大概分为三个阶段

一、初始化阶段：由ReactDOM.render()触发，下列函数会被依次调用

①constructor(); 通过new关键字创建组件实例对象。

②componentWillMount(); 组件被挂载到页面前。

③render(); 组件被挂载到页面。

④componentDidMount(); 组件被挂载到页面后。

二、更新阶段：由组件内部state改变或父组件重新render触发，下列函数会被依次调用

①shouldComponentUpdate(); 控制组件是否应该被更新，返回true时，后续三个函数继续执行，返回false则不执行。

②componentWillUpdate(); 组件被更新之前。

③render(); 组件更新，重新渲染到页面。

④componentDidUpdate(); 组件被更新之后。

三、卸载组件：由ReactDOM.unmountComponentAtNode()触发，仅一个函数会被调用

①componentWillUnmount(); 组件被卸载前被调用。

使用较为频繁的钩子函数总结：

componentDidMount()：组件挂载完成后做的一些初始化操作，如发起HTTP请求、订阅消息等。
componentWillUnmount()：组件卸载前的一些收尾操作，如清理未关闭的定时器、取消订阅消息等。
render()：类组件必用的钩子函数。

新版本React生命周期（17版本及以后）

待续。。。

3、演示钩子函数使用

旧版本React生命周期钩子函数（实际17、18版本也能使用）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件生命周期</title>
    </head>
    <body>
        <div id="container"></div>

        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

        <script type="text/babel" >
            class Person extends React.Component{
                //构造器，类组件被实例化的时候首先被调用
                constructor(props){
                    super(props)
                    console.log("constructor execute");
                }
                //初始化state状态属性
                state = {"count":1};

                //组件被挂载，组件更新时都会被调用
                render(){
                    console.log("render execute");
                    return (
                        <div>
                            当前组件状态：{this.state.count}<br/><br/>
                            <button onClick={this.changeState}>点击更新组件状态</button><br/><br/>
                            <button onClick={this.removeComponent}>点击卸载组件</button>    
                        </div>
                    );
                }

                changeState = ()=>{
                    const {count} = this.state;
                    this.setState({"count":count+1})
                }

                removeComponent = ()=>{
                    ReactDOM.unmountComponentAtNode(document.getElementById('container'))
                }

                //组件将要挂载的钩子
                componentWillMount(){
                    console.log("componentWillMount execute");
                }

                //组件挂载完毕的钩子
                componentDidMount(){
                    console.log('componentDidMount execute');
                }

                //组件将要卸载的钩子
                componentWillUnmount(){
                    console.log('componentWillUnmount execute');
                }

                //控制组件是否应该被更新(返回true组件将会被更新，返回flase组件不会被更新)
                shouldComponentUpdate(){
                    console.log('shouldComponentUpdate execute');
                    return true
                }

                //组件将要更新的钩子
                componentWillUpdate(){
                    console.log('componentWillUpdate execute');
                }

                //组件更新完毕的钩子
                componentDidUpdate(){
                    console.log('componentDidUpdate execute');
                }
            }

            ReactDOM.render(<Person/>,document.getElementById('container'))
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

相关阅读:
Packet Tracer模拟一次简单的HTTP请求
 【网络安全】图解 Kerberos：身份认证
 【Java万花筒】服务网格：微服务世界的交通管制中心
 C# 图片按比例进行压缩
 int, long long, double, float 等数据类型的长度及范围整理
 xxl-job源码解读：触发器Trigger
fork仓库的代码如何同步主仓库代码
 【备考网络工程师】如何备考2023年网络工程师之错题集篇（3）
本周三商店更新：多款套装下线，四款升级武器带异色皮肤返厂
 93. 复原 IP 地址
原文地址：https://blog.csdn.net/xiao_yu_gan/article/details/126834926