组件的生命周期主要由三个部分组成:

  • Mounting:组件正在被插入DOM中
  • Updating:如果DOM需要更新,组件正在被重新渲染
  • Unmounting:组件从DOM中移除

React提供了方法,让我们在组件状态更新的时候调用,will标识状态开始之前,did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。

Mounting

  • getInitialState():初始化state
  • componentWillMount():组件被出入DOM前执行
  • componentDidMount():组件被插入DOM后执行

Updating

  • componentWillReceiveProps(object nextProps):组件获取到新的属性时执行,这个方法应该将this.props同nextProps进行比较,然后通过this.setState()切换状态
  • shouldComponentUpdate(object nextProps, object nextState):组件发生改变时执行,应该将this.props和nextProps、this.stats和nextState进行比较,返回true或false决定组件是否更新
  • componentWillUpdate(object nextProps, object nextState):组件更新前执行,不能在此处调用this.setState()。
  • componentDidUpdate(object prevProps, object prevState):组件更新后执行

Unmounting

  • componentWillUnmount():组件被移除前执行

Mounted Methods

  • findDOMNode():获取真实的DOM
  • forceUpdate():强制更新

react组件生命的更多相关文章

  1. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  2. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  3. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  4. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  5. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  6. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

  7. react组件生命周期过程

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  8. 1.4 React 组件生命周期

    1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...

  9. 3. React 组件生命周期介绍

            React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...

随机推荐

  1. 《gradle 用户指南中文版》目录

    gradle 用户指南 版权所有©2007-2017 Hans Dockter,Adam Murdoch只要您不对这些副本收取任何费用,并且进一步规定,每个副本都包含本版权声明,无论是以印刷版还是电子 ...

  2. React-Native基础_2.样式Style

    2.样式Style 基本使用 方式1 直接在View 上面写style 内容 <View style={{ backgroundColor: '#07811d', flex: 1 }}> ...

  3. localhost与127.0.0.1之间的区别

    Localhost的意思是本地服务器,而127.0.0.1是本机地址,他们的关系是通过操 作系统中的hosts文件,将Localhost解析为127.0.0.1.而实际工作中,Localhost是不经 ...

  4. MYSQL 调优和使用必读

    转载自:http://blog.eood.cn/mysql#rd?sukey=fc78a68049a14bb29c60f21c5254b15a1a9234459cf25ff467de14129ca11 ...

  5. oracle中查询结果集为空,则得到一个默认值

    有同事问我上述问题,我把我的实现思路写出来.子查询把查询的结果和默认的结果全部显示.父查询通过伪列rownum来筛选,如果查询有结果,就有几条就显示几条,而不去显示子查询中的默认值:如果查询没有结果, ...

  6. HDU2222 Keywords Search ac自动机第一题

    指针我一般都会出错,所以还是自己写数组版本. In the modern time, Search engine came into the life of everybody like Google ...

  7. BZOJ1101 POI2007 Zap 【莫比乌斯反演】

    BZOJ1101 POI2007 Zap Description FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b, ...

  8. 剑指offer第五章

    剑指offer第五章 1.数组中出现次数超过一半的数 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组 ...

  9. 给select增加placeholder技巧

    转自:http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box/8442831 使 ...

  10. 【DUBBO】zookeeper在dubbo中作为注册中心的原理结构

    [一]原理图 [二]原理图解释 流程:1.服务提供者启动时向/dubbo/com.foo.BarService/providers目录下写入URL2.服务消费者启动时订阅/dubbo/com.foo. ...