在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. php数组array_push()和array_pop()以及array_shift()函数

    <?php /** * array_push()将一个或多个单元压入数组的末尾(入栈) */ $stack = array("Java", "Php", ...

  2. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  3. angularJS实践过程中出现的问题总结

    同名服务 在一次项目里,之前是同事写的.我有一次在异步获取服务器上的数据时,习惯把api地址写在一个服务Store里,但是程序总是返回Store.api.get()里的get is undefined ...

  4. Linux下的压缩和解压缩命令——jar

    原文链接:http://blog.chinaunix.net/uid-692788-id-2681136.htmlJAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有 ...

  5. 如何设置redis中hash的field的expire ?

    redis > hset expire:me name tom (integer) redis > hget expire:me name "tom" redis &g ...

  6. 如何方便的保存WinForm窗体控件的位置大小等等配置信息

    由于分辨率.屏幕主题.字体大小的不同,窗体显示效果在不同机器上不尽相同.窗体的弹性设计并不能满足多样的需求.为保证在各种情况下,能有满意的效果.窗体的多样显示方式能改变,并且保存.载入配置,显得很重要 ...

  7. 在Eclipse中集成Ant配置

    提要:本文将向你展示如何使用Eclipse设置为Ant所用的属性值和环境变量,并简要分析如何配置Ant编辑器以便从Eclipse内部操作Ant文件. 一. 修改Ant Classpath 在使用一个可 ...

  8. 记录NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END。

    Nonnull区域设置(Audited Regions) 如果需要每个属性或每个方法都去指定nonnull和nullable,是一件非常繁琐的事.苹果为了减轻我们的工作量,专门提供了两个宏:NS_AS ...

  9. myeclipse2015卸载、安装、破解全过程-----myeclipse2015

    myeclipse2015安装以及破解步骤: 下载地址:myeclipse2015-->https://pan.baidu.com/s/1i4RFCBb   密码:qxsu 破解文件地址--&g ...

  10. SQL SERVER中如何在声明游标的语句中,用变量做表名

    -- 因为定义游标所用的表名是变量,所以采用EXEC(定义语句) 的方式来声明游标set @StrSql='DECLARE Ba_Cursor CURSOR FOR (SELECT a.PhoneId ...