在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期。

注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周期之间的调用,mixins混合则玩不来

先从初始化执行开始:

挂载生命周期:

官方提供了componentWillMount,和componentDidMount

componentWillMount:

使用于render渲染组件之前调用,比如当前组件内部值需要发生逻辑上的变化,就可以在此做操作,这样的好处是不用再次render渲染组件。

componentDidMount:

使用于render渲染组件之后调用,比如ajax

var ReactWeek = React.createClass({
getInitialState:function(){
return console.log("getInitialState");
},
getDefaultProps:function(){
return console.log("getDefaultProps");
},
componentWillMount:function(){
console.log("componentWillMount");
},
componentDidMount:function(){
console.log("componentDidMount");
},
render:function(){
return(
<i></i>
)
}
}); React.render(<ReactWeek />,document.body);

这里添加了设置默认值getDefaultProps和初始化设置的getInitialState,运行一下看看它们之间的运行顺序。结果如下

React生命周期的更多相关文章

  1. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  2. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  3. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  4. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  5. react 生命周期钩子里不要写逻辑,否则不生效

    react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.

  6. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  7. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  8. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

  9. react生命周期知识点

    react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2. ...

随机推荐

  1. MVC-命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html”(是否缺少程序集引用?)

    如上截图,明明引用了“System.web.mvc”,可是还出这样的错误. 解决方法: 1.右键引用的“System.Web.Mvc” 2.<复制本地>一样选择<True> 3 ...

  2. node.js下使用RSA加密事例(windows)

    1.安装openss 直接下载window下的安装包 http://houjixin.blog.163.com/blog/static/3562841020144143494875/ 以我发博文现在的 ...

  3. excel to datatable (c#用NPOI将excel文件内容读取到datatable数据表中)

    将excel文件内容读取到datatable数据表中,支持97-2003和2007两种版本的excel 1.第一种是根据excel文件路径读取excel并返回datatable /// <sum ...

  4. git仓库的初始化

    关于git仓库的初始化和git push的操作 git init git remote add origin ssh://myserver.com/home/git/myapp.git git pul ...

  5. [转载]jquery版小型婚礼(可动态添加祝福语)

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  6. python , angular js 学习记录【3】

    1.Alembic是SQLAlchemy作者编写的Python数据库迁移工具.用它实现模型类和数据库的同步更新.(安装以及操作步骤 使用Alembic迁移数据库) 使用Alembic添加数据库字段操作 ...

  7. linux常用命令的介绍

    本文主要介绍Linux常用命令工具,比如用户创建,删除,文件管理,常见的网络命令等 如何创建账号: 1. 创建用户 useradd -m username -m 表示会在/home 路径下添加创建用户 ...

  8. java反射

    知识点1:获取类字节码的三种形式 1.Class date = Date.class;//根据类名获取字节码 2.Date date= new Date(); date.getClass();//对象 ...

  9. shell 脚本随机抽取班级学生

    #/bin/bash jw=(name1,name2,name3......name39) ..} do a=$(date +%N) b=$() ]" "${jw[$b]} don ...

  10. linux系统的初化始配置

    一.网络的初始化 1.ip地址的修改(临时生效) 使用ifconfig命令 ifconfig 网卡名 ip地址 子网掩码 [root@localhost /]# ifconfig eno1677773 ...