• 初始化 ReactDOM.render(jsx, 原生 DOM 对象)

组件类定义

static defaultProps = {}

static propTypes = {}

constructor(props){...}

componentWillMount()    // 只执行一次,初始化数据

render()    // 第一次调用,渲染界面

componentDidMount()    // 只执行一次,执行异步代码

  • 更新 this.setState({...})

componentWillUpdate()

render()    // 每当状态机的数据改变都会自动调用

componentDidUpdate()

  • 死亡 ReactDOM.unmountComponentAtNode()

componentWillUnmount()    // 将要卸载组件之前

React_生命周期

一个对象从生到死的过程

  • Mounting :已插入真实 DOM
  • Updating :正在被重新渲染
  • Unmounting :已移出真实 DOM
  • getInitialState() --------已经废弃了!!!

用于初始化组件状态

在组件挂载之前调用一次。返回值将会作为 this.state的初始值

  • getDefaultProps -------- 好像也废弃了。

用于设置组件的 state 中 属性的默认值

在组件类创建的时候调用一次,然后返回值被缓存下来。

如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)

  • getDefaultProps() {
    return {
    title: '',
    popEnabled:true
    };
    },
  • propTypes

验证传入到组件的 props

  • isMounted()

当组件被渲染到 DOM,该方法返回 true,否则返回 false

该方法通常用于异步任务完成后修改 state 前的检查,以避免修改一个没有被渲染的组件的 state

  • 什么时候调用 render()
  • 初始显示第一次调用
  • 一旦钓鱼用 this.setState() 更新了状态

当该方法被回调的时候,会检测 this.props 和 this.state,并返回一个单子级组件。

该子级组件可以是虚拟的本地 DOM 组件

也可以返回 null 或者 false 来表明不需要渲染任何东西: 此时 this.getDOMNode() 将返回 null

  • 生命周期回调函数 (钩子)

在整个生命过程中某个特定时刻会自动调用相应的回调函数 (来通知你)

  • 通过重写 以下方法,初始化

第一次 render() 之前,执行一次

componentWillMount()    // 一般在此 准备数据

第一次 render() 之后,执行一次

componentDidMount()    // 执行异步代码 (定时器)

重写以下方法,在组件移除之前,清除定时器

componentWillUnmount()

  • 卸载一个节点的 react 组件实例

ReactDOM.unmountComponentAtNode(document.getElementById(""));

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

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  3. C# MVC 5 - 生命周期(应用程序生命周期&请求生命周期)

    本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...

  4. UIViewController生命周期-完整版

    一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load   (NSObje ...

  5. angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  6. Spring中Bean的作用域、生命周期

                                   Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...

  7. Autofac - 生命周期

    实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...

  8. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  9. Xamarin.Android活动的生命周期

    一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没有丢失.可以看出app的“生命”是掌握在系统手上的, ...

随机推荐

  1. GIT-windows系统部署git服务器

    windows系统部署git服务器 因为需要所以就来利用IIS(Internet Information Service )来进行搭建. 进入正文: 不管你是什么win7.win8.win8.1还是w ...

  2. 《Java》第四周学习总结

    20175301 李锦然 一:本周学习内容 1:学习第五章视频 2:做实验 第五章主要讲的是子类与父类的关系,子类的继承与多态,final类super类等内容 仓库地址https://gitee.co ...

  3. Codeforces Round #447 (Div. 2) B. Ralph And His Magic Field 数学

    题目链接 题意:给你三个数n,m,k;让你构造出一个nm的矩阵,矩阵元素只有两个值(1,-1),且满足每行每列的乘积为k,问你多少个矩阵. 解法:首先,如果n,m奇偶不同,且k=-1时,必然无解: 设 ...

  4. Python3:几行代码实现阶乘

    阶乘:一个正整数的阶乘(factorial)是所有小于及等于该数的正整数的积,并且0的阶乘为1.自然数n的阶乘写作n!. #---------------------------------- 阶乘- ...

  5. 【转】解决keepalived正常启动但是虚IP(VIP)没有生成的问题

    如题所示,keepalived安装配置好之后能够正常启动,但是虚IP并没有生成.接着检查防火墙(iptables)发现也没有相关的限制.稍微郁闷了一下之后,查看了keepalived日志文件,这次成功 ...

  6. 关于简单的安卓APP状态栏设置(类似沉浸式状态栏)

    1.设置为全屏模式: 在所需设置为全屏模式的逻辑的onCreat()方法中加入以下代码即可: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.K ...

  7. [PHP]获取静态方法调用者的类名和运用call_user_func_array代入对象作用域

    一.获取静态方法调用者的类名 方法一: class foo { static public function test() { var_dump(get_called_class()); } } cl ...

  8. Hive快捷查询:不启用Mapreduce job启用Fetch task三种方式介绍

    如果查询表的某一列,Hive中默认会启用MapReduce job来完成这个任务,如下: hive>select id,name from m limit 10;--执行时hive会启用MapR ...

  9. bzoj 3238

    后缀数组+单调栈的应用 首先我们研究一下这个表达式,可以发现前半部分与串的情况并没有关系,而只是跟串的长度有关,所以我们先把前半部分算出来: 于是我们只需计算出即可 那么可以发现,对于排名分别为i,j ...

  10. spring+redis的集成,使用spring-data-redis来集成

    1.参考:https://www.cnblogs.com/qlqwjy/p/8562703.html 2.首先创建一个maven项目.然后加入依赖的jar包就行了.我加入的jar包很多,反正加入了也没 ...