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);
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
![](https://www.cnblogs.com/images/cnblogs_com/amwuau/927688/o_1544511405530.jpg)
![](https://images.cnblogs.com/cnblogs_com/amwuau/927688/o_erweima.jpg)
作者:风来风往风伤
出处:http://www.cnblogs.com/amwuau/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。