生命周期


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

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

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

  

源代码说明:点此下载

React笔记_(4)_react语法3的更多相关文章

  1. React笔记_(3)_react语法2

    React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...

  2. React笔记_(2)_react语法1

    这一节内容主要以了解为主. 渐渐的体会react的语法和其特性. ① htmlAndJs 混合编写 react和以往的前后台书写方式不一样. 在之前的多个语言中,讲求的是将页面代码和js代码逻辑分开, ...

  3. React笔记_(6)_react语法5

    react的版本 目前主要的react有 ES5,ES6.也有ES5和ES6混合编写的.比较混乱. react官方提倡用ES6. 说到这里,就需要提到一个概念--mixin mixin在es6中被摒弃 ...

  4. React笔记_(5)_react语法4

    ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...

  5. React笔记_(7)_react路由

    路由 路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程. 路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联. 那么react的路由到底指的是什么呢? 举个 ...

  6. React笔记_(1)_react概述

    React概述   React是一种很好的前端技术. 它将应用打散成独立的小模块,然后进行组装,完成开发. react远比angularjs难学的多. react依赖的如webpack等各种工具得先学 ...

  7. 运维开发笔记整理-Django模型语法

    运维开发笔记整理-Django模型语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模型基本概念 1>.什么是模型 模型是你的数据唯一的,权威的信息源.它包含你所存储数 ...

  8. 《DOM Scripting》学习笔记-——第二章 js语法

    <Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...

  9. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制

    在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...

随机推荐

  1. UIStoryboard类介绍(如何从Storyboard中加载View Controller)

    如何从Storyboard中加载View Controller? 1. 首先了解下UIStoryboard类: @class UIViewController; @interface UIStoryb ...

  2. jqery validate、validate自定义验证方法 + jaery form Demo

    校验规则 required:true  必输字段 remote:"check.php"  使用ajax方法调用check.php验证输入值 email:true  必须输入正确格式 ...

  3. 第七篇 SQL Server代理作业活动监视器

    本篇文章是SQL Server代理系列的第七篇,详细内容请参考原文 在这一系列的上一篇,你创建并配置SQL Server代理作业.每个作业有一个或多个步骤,可能包含大量的工作流.在这篇文章中,将查看作 ...

  4. 在相同的主机上创建一个duplicate数据库

    在相同的主机上创建一个duplicate数据库 source db:dbtest auxiliary db:dupdb duplicate database会自动分配一个新的DBID要确保auxili ...

  5. 12C清理asm磁盘组和文件

    磁盘清理(disk scrub)可以检查逻辑坏块,并使用镜像数据自动修复数据(必须是normal.high冗余级别).磁盘清理过程和磁盘组的rebalance相结合,可以减少对I/O资源的使用.清理过 ...

  6. Java基础之线程——使用Runnable接口(JumbleNames)

    控制台程序. 除了定义Thread新的子类外,还可以在类中实现Runnable接口.您会发现这比从Thread类派生子类更方便,因为在实现Runnable接口时可以从不是Thread的类派生子类,并且 ...

  7. Android Push Notification实现信息推送使用

    本贴在http://www.cnblogs.com/hanyonglu/archive/2012/03/16/2399655.html下略为改动. Apndroid Push Notification ...

  8. Java String.split()

    在java.lang包中有String.split()方法,返回是一个数组 我在应用中用到一些,给大家总结一下,仅供大家参考: 1.如果用“.”作为分隔的话,必须是如下写法,String.split( ...

  9. PostgreSQL Replication之第十二章 与Postgres-XC一起工作(6)

    12.6 添加节点 Postgres-XC允许您在那个过程中的任何一个时间点添加新的服务器到计划中.所有您需要做的是按照我们之前演示的设置一个节点,并在 控制器上调用CREATE NODE.然后,该系 ...

  10. acm算法模板(4)

    杂乱小模板 状态压缩dp小技巧 x&-x是取x的最后一个1的位置. x-=x&-x是去掉x的最后一个1. 读入外挂 int nxt_int(){// neg or pos    cha ...