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