1.创建阶段

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

2.实例化阶段

React.render(<HelloMessage 启动之后

getInitialState、componentWillMount、render、componentDidMount

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

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

3.更新阶段

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

componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

4.销毁阶段

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

componentWillUnmount

##8、配套视频(下载地址):https://yunpan.cn/cYid89wLX5w3c  访问密码 3f0d

8、手把手教React Native实战之ReactJS组件生命周期的更多相关文章

  1. 7、手把手教React Native实战之ReactJS

    ReactJS核心思想:组件化  维护自己的状态和UI  自动重新渲染 多个组件组成了一个ReactJS应用 React是全局对象   顶层API与组件API React.createClass创建组 ...

  2. 6、手把手教React Native实战之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...

  3. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  4. 5、手把手教React Native实战之盒子模型BoxApp

    用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/0 ...

  5. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  6. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  7. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

  8. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

  9. React Native学习(十)—— 生命周期

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

随机推荐

  1. 投票ajax请求代码(点赞代码)

    function vote(url, arr) { jq.ajax({ cache: false, async: false, url: url, type: 'post', data: {info_ ...

  2. odoo8.0下selection_add的使用

    在odoo中有selection类型的字段,用于限定字段的值在某些范围之内,在view上面显示此字段时,会显示一个下拉的列表. 如果是自己新定义的字段,这个列表的内容可以自己定义,但如果是继承自某个对 ...

  3. Android开发之应用程序更新实现

    近期给项目app做升级.对Android应用程序更新稍有研究,分享一下我的心得. 既然是更新,那么一定是要联网和下载的.所以联网和存储訪问权限时一定要有的: <!-- 权限申请 -->   ...

  4. Linux内核部件分析 原子性操作atomic_t

    在任何处理器平台下,都会有一些原子性操作,供操作系统使用,我们这里只讲x86下面的.在单处理器情况下,每条指令的执行都是原子性的,但在多处理器情况下,只有那些单独的读操作或写操作才是原子性的.为了弥补 ...

  5. 10-spring学习-注入Resource

    注入Resource 虽然Resource 的子类利用了字符串格式进行了隐藏,但是此时的代码中,ResourceLoader跟我的开发没有任何关系, 如果真的开发只关心Resource一个接口就够了. ...

  6. LR 监控mysql

    sapphire的个人空间 中介绍了LoadRunner监控Mysql和Appache进程占用cpu的方法 方法如下: 公司的新产品需要监控Mysql和Appache进程,求高手帮忙总算成功了. 服务 ...

  7. Arm Cache学习总结

    cache,高速缓存,其原始意义是指访问速度比一般随机存取内存(RAM)快的一种RAM,通常它不像系统主存那样使用DRAM技术,而使用昂贵但较快速的SRAM技术. 1.cache映射方式 cache中 ...

  8. 将项目从tomcat 迁移到JBoss5.0

    http://java-boy.iteye.com/blog/531411从Tomcat升级到JBoss5.1真是一个痛苦的过程,可能遇到很多问题.以下是我碰到的问题,及解决方法. 一.Hiberna ...

  9. 基于委托的C#异步编程的一个小例子 带有回调函数的例子

    我创建的是一个winform测试项目:界面如下: 设置: 下面是代码: using System; using System.Collections.Generic; using System.Com ...

  10. 问题解决: Pandas and scikit-learn: KeyError: […] not in index

    https://stackoverflow.com/questions/51091132/pandas-and-scikit-learn-keyerror-not-in-index The probl ...