生命周期
很多语言中都讲了关于生命周期。这可是决定生命的周始,有没有存在感的关键啊。
生命周期,有生有死,有始有终,因果轮回,循环往复。(说多了)
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);