1、创建阶段

getDefaultProps:处理props的默认值 在react.createClass调用

//在创建类的时候被调用  this.props该组件的默认属性

2、实例化阶段

ReactDOM.render(<自定义组件 启动后开始实例化

getInitialState:初始化组件的state值,其返回值会赋值给组件的this.state属性;

componentWillMount:在render之前调用此方法,业务逻辑的处理都应该放在这里,如对state的操作等;

render:根据state值,渲染并返回一个虚拟DOM;

componentDidMount:该方法发生在render方法之后;在该方法中,ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构,组件内部可以通过this.getDOMNode()来获取当前组件的节点;

state:组件的属性,主要是用来存储组件自身需要的数据,每次数据的更新都是通过修改state属性的值,ReactJS内部会监听state属性的变化,一旦发生变化的话,就会主动触发组件的render方法来更新虚拟DOM结构。

虚拟DOM:将真实的DOM结构映射成一个JSON数据结构

3、更新阶段

主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整

componentWillReceiveProps:该方法发生在this.props被修改或父组件调用setProps()方法之后;调用this.setState()方法来完成对state的修改;

shouldComponentUpdate:用来拦截新的props或state,根据逻辑来判断是否需要更新;

componentWillUpdate:shouldComponentUpdate返回true的时候执行,组件将更新;

componentDidUpdate:组件更新完毕后在此做一些DOM操作。

4、销毁阶段

componentWillUnmount:销毁时被调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。

ReactNative——生命周期的更多相关文章

  1. react-native 生命周期

    一.前言 问: 什么是组件的生命周期? 组件的生命周期中都包含哪些方法,各有什么作用? 生命周期的方法都在什么时候调用? 生命周期: 顾名思义,一个主体从出生到死亡的整个过程 学习组件(React的基 ...

  2. React-Native控件的生命周期

    React-Native控件的生命周期

  3. React-Native 之 生命周期

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  4. ReactNative——UI2.组件生命周期

    对于习惯了iOS开发的同学,可能会对React Native中组件的生命周期很困惑.在iOS中有一个ViewDidLoad来初始化,那么在RN中,又是在哪里呢? 一.看图分析 在下图中描述了React ...

  5. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  6. React Native之生命周期

    React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常 ...

  7. react native环境搭建与生命周期

    1.搭建开发环境 英文文档:http://facebook.github.io/react-native/docs/getting-started.html 中文文档:https://reactnat ...

  8. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. react学习二 生命周期

    转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...

随机推荐

  1. (笔记)Linux内核学习(五)之中断推后处理机制

    一 中断 硬件通过中断与操作系统进行通信,通过对硬件驱动程序处注册中断处理程序,快速响应硬件的中断. 硬件中断优先级很高,打断当前正在执行的程序.有两种情况: 硬件中断在中断处理程序中处理 硬件中断延 ...

  2. 基于LoadRunner构建接口测试框架

    基于LoadRunner构建接口测试框架 http://www.docin.com/p-775544153.html

  3. SecureCRT使用

    SecureCRT可以说是linux远程终端的代名词,关于它的一些技巧必须掌握,,, 1.解决中文乱码 登陆主机,运行locale命令,确定语言选项LANG是否为 zh_CN.gb2312 或者 en ...

  4. Android样式的开发:layer-list篇

    上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景.但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色底线的像素高度为4px,那么,在mdpi ...

  5. Redis配置以及通过C#访问小试

    首先安装一个Ubuntu14.04的虚拟机用来安装Redis.Ubuntu的Unity在虚拟机里面卡爆了,可以通过如下方法安装传统的Gnome界面: sudo aptitude install gno ...

  6. SPI总线通信电路设计

    数据带宽=(总线频率×数据位宽)÷8 B表示带宽,F表示存储器时钟频率,D表示存储器数据总线位数,则带宽为: B(峰值带宽)=F(时钟频率MHz)×D(总线位数bit)/8 例如,PC-100的SDR ...

  7. HANA Studio中修改默认查询结果只显示1000行

  8. 转:探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法

    前言 相信这样一个问题,大家都不会陌生, “有什么的方法可以使Android的程序APK不用安装,而能够直接启动”. 发现最后的结局都是不能实现这个美好的愿望,而腾讯Android手机游戏平台却又能实 ...

  9. JS思维之路菜鸟也能有大能量(1)--模拟push

    因为本系列文章属于思维类,所以不做基础方法的讲解. 任务:首先我定义了一个变量var arr = [0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分 ...

  10. VirtualBox Bridged 无线网卡

    启动虚拟机后选择右键单击右下角的网络链接图标,  弹出的窗口中选择Bridged Adapter,  wlan0 然后选择OK 查看virtual Box主页面中setting中网络的配置是否和刚才一 ...