• React旧有生命周期和新生命周期的解析

    React组件生命周期（旧有格式）
    在这里插入图片描述
    新的生命周期
    在这里插入图片描述
    下面是旧有声明周期的案例演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script src="../js/prop-types.js">script>
head>
<body>
    <div id="test">div>
    
    <script type="text/babel">
        class Count extends React.Component{
            //构造器;
            constructor(props){
                console.log('我是构造器');
                super(props);
                //初始状态；因为在构造器内部，所以，需要加this关键字;
                this.state={count:0};
            }
            //组件将要挂载;
            componentWillMount(){
                console.log('组件将要挂载...');
            }
            //加1按钮的回调;
            add = () => {
                //获取原始状态;
                const{count}=this.state;
                //更新状态;
                this.setState({count:count+1});
            }
            death= () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }
            //挂载完毕;
            componentDidMount(){
                console.log('组件挂载完毕...');
            }
            //卸载组件;
            componentWillUnmount(){
                console.log('组件卸载了...');
            }
            //组件更新
            shouldComponentUpdate(){
                console.log('shouldComponentUpdate...');
                return true;
            }
            //组件将要更新
            componentWillUpdate(){
                console.log('componentWillUpdate...');
            }
            //组件更新
            componentDidUpdate(){
                console.log('componentDidUpdate...');
            }
            //强制更新;
            force= () => {
                this.forceUpdate();
            }
            //渲染;
            render(){
                console.log('render');
                const {count}=this.state;  //这句不要忘了加
                return(
                    <div>
                        <h2>当前求和是：{count}</h2>
                        <button onClick={this.add}>按钮测试</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                );
            }
        }
        //调用;
        ReactDOM.render(<Count/>,document.getElementById('test'));
    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
    • 81
    • 82
  • 相关阅读:
    Python 组合序号
    随便谈谈职场人对开会的看法和建议以及针对无聊会议的摆烂建议
    2023/11/16JAVA学习
    [Wechat]概念辨析：微信的生态平台/运管平台
    vue 插槽 - 具名插槽
    Hash表实现原理
    HashCode 和 equals 学习笔记
    【PCBA方案】电子握力测试仪方案she‘ji
    1111 Online Map
    MacBook当作Win电脑副屏
  • 原文地址：https://blog.csdn.net/zhangchen124/article/details/126646381