在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. Go收藏

    Go项目收藏 电子书 1.Go Web 编程 2.Go入门指南(the-way-to-go_ZH_CN) 3.Go语言圣经(中文版) Go by Example 中文 一些Go英文电子书 High P ...

  2. 【荐】如何规划 Nginx 网站目录的权限(用户,用户组,ssh,sftp)

    从上一篇文章:PHP网站(nginx.php-fpm.mysql) 用户权限解析,可以学习了解到,nginx 和 php-fpm 的用户是如何运作的. 有个工作场景: 1.公司的一台 CentOS 服 ...

  3. Python员工信息表练习

    1.用户可以模糊查询员工信息 2.显示匹配了多少条,匹配字符需要高亮显示 employee_db.txt 总经办 龚丽丽 总经理 男 -- 1月18日 汉 族 中共党员 已婚 总经办 李惠 副总经理 ...

  4. ssh

    ssh的配置文件有两个:服务端:/etc/ssh/sshd_config 客户端:/etc/ssh_config 服务端配置文件:/etc/ssh/sshd_config [root@localhos ...

  5. UIPickerView去掉背景上的黑线

    - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger) ...

  6. arm_GPIO_简单编程例题

    题目 分析下面的汇编led.s,查看S5PV210手册,说明程序的功能,和最终的运行结果,以及相关的硬件原理图,S5PV210手册可以在教学资源里的学习资料文件夹中下载. .equ   GPH3CON ...

  7. OSG计时器与时间戳

    static osg::Timer* sendMsgTimer = new osg::Timer; if (sendMsgTimer->time_m()>100)//100ms {// d ...

  8. Ubuntu安装Mysqlcluster集群

    可参考:http://xuwensong.elastos.org/2014/01/13/ubuntu-%E4%B8%8Bmysql-cluster%E5%AE%89%E8%A3%85%E5%92%8C ...

  9. WordPress一键部署网站

    每个人心里都有一个建站梦,所以今天作为我第一篇文章,就给大家圆了这场梦. 今天我来详细的一步一步带领大家利用WordPress程序来建立自己的小站以及解决直接域名访问(本地安装wordpress请阅读 ...

  10. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...