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);

　　

源代码说明:点此下载