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. eclipse 代码提示时闪退问题

    解决办法:在eclipse.ini里面最下面加上这句话 -Dorg.eclipse.swt.browser.DefaultType=mozilla

  2. 使用Eclipse PDT + Xampp搭建Php开发环境

    最新文章:Virson's Blog Eclipse版本:Eclipse Luna Service Release 2 (4.4.2) Xampp版本:XAMPP for Windows 5.6.8 ...

  3. saiku执行过程代码跟踪

    使用了很久的saiku,决定跟踪一下代码,看看它的执行核心过程: 一.入口controller代码 1.1.页面打开之后,会发送一个ajax请求 Request URL: http://l-tdata ...

  4. swift 闭包

    闭包可以捕获和存储其所在上下文中任意常量和变量的引用. 这就是所谓的闭合并包裹着 这些常量和变量,俗称闭包. Swift标准库中提供了sort排序函数,sort函数的第二个参数是个闭包.和OC中的bl ...

  5. 牢骚与javascript中的this

    最近在看关于拖延症的一本书<拖拉一点也无妨>,后面得出结论是自己写博客大部分处于两种状态,心情很好和心情很不好的时候.因为正常状态下感觉写博客吧,是件很麻烦的事情,不如去看看电影看看漫画啥 ...

  6. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByClassName

    按照类名获取元素 -- getElementsByClassName(HTML5) 标准 WHATWG 在Document与Element上均有定义,原型 HTMLCollection getElem ...

  7. make no mistake, we are the last line of defense.

    make no mistake, we are the last line of defense.

  8. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  9. CommonJS 模块规范 1.1.1

    本规范致力于描述一类可以同时适用于客户端和服务器端的模块系统.该系统中的模块拥有自己的作用域,可以从其他模块导入单例对象,或者对外提供 API. Require require 是一个函数对象. re ...

  10. 在做Android开发的,如何去掉滚动view在尽头时的阴影效果

    不经意的在开发中,发现qq的侧滑几乎没有阴影效果,就是拉到边界没有时出现的效果:于是在网上找了下,发现很简单的设置 只要在xml布局文件的滚动或者侧滑控件中加入如下样式: android:overSc ...