zoukankan      html  css  js  c++  java
  • React笔记_(4)_react语法3

    生命周期


    很多语言中都讲了关于生命周期。这可是决定生命的周始,有没有存在感的关键啊。

    生命周期,有生有死,有始有终,因果轮回,循环往复。(说多了)

    react中,主要说明的是 一个组件的生命周期。简单来讲就是:

    初始化 →  渲染  →  更新  →   (渲染)  →   销毁  。。。

    最常用的三个生命周期   

    1. componentWillMount

        相当于初始化,在render渲染动作执行前要干的事。

    2. componentDidMount

        在render渲染动作执行后马上要干的事。

    3. componentWillUnmount

        销毁,在组件从页面dom中移除时要干的事。

    老套路,举个例子吧。

    'use strict';
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    class LifeCycle extends Component {
    
        componentWillMount() {
            console.log("渲染前");
            this.timer = setInterval(function () {
                console.log('不断打印中.....');
            }, 500);
        }
        render() {
            console.log("渲染中.....");
            return (<div>我出生啦!!</div>);
        }
        componentDidMount() {
            console.log("渲染后");
        }
        componentWillUnmount() {
            console.log("销毁啦!");
            clearInterval(this.timer);
        }
    
    }
    
    //创建组件
    ReactDOM.render(
        <LifeCycle />,
        document.getElementById("app")
    );
    //2s后移除组件
    setTimeout(function () {
        // 移除节点的函数
        ReactDOM.unmountComponentAtNode(document.getElementById("app"));
    }, 2000);
    

      

    源代码说明:点此下载



    如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!


    作者:风来风往风伤
    出处:http://www.cnblogs.com/amwuau/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

     
  • 相关阅读:
    三者最大实例分析
    Python eval函数
    Linux查看某个进程的线程
    将列表传递给函数
    二十四、二进制日志截取与恢复
    二十三、二进制日志事件
    二十二、二进制日志记录方式
    二十一、二进制日志介绍
    二十、错误日志
    十九、InnoDB核心参数
  • 原文地址:https://www.cnblogs.com/amwuau/p/6138301.html
Copyright © 2011-2022 走看看