React笔记_(4)_react语法3

时间:2021-10-21 01:25:54

生命周期


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

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

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

  

源代码说明:点此下载