ReactNative——生命周期

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中对应的组件数据结构、销毁一些无效的定时器等工作。

时间: 2024-07-31 11:48:01

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

react-native 生命周期

1 import React, { Component } from 'react'; 2 import { 3 AppRegistry, 4 StyleSheet, 5 Text, 6 View 7 } from 'react-native'; 8 9 export default class mykblearn extends Component { 10 constructor(props){ 11 super(props) 12 this.state={times:0} 13 } 14

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

React Native之生命周期

React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段. getDefaultProps: 该函数用于初始化一些默认的属性,开发中,通常将一些固定不变的值放在该函数内进行初始化,比如url.可以利用this.props.XXX 来获取该属性值.由于被初始化后,以后就不会再调用getDef

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

Expo大作战--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo依赖,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战--什么是expo,如何安装expo clinet和xde,xde如何

iOS程序执行顺序和UIViewController 的生命周期(整理)

说明:此文是自己的总结笔记,主要参考: iOS程序的启动执行顺序 AppDelegate 及 UIViewController 的生命周期 UIView的生命周期 言叶之庭.jpeg 一. iOS程序的启动执行顺序 程序启动顺序图 iOS启动原理图.png 具体执行流程 程序入口进入main函数,设置AppDelegate称为函数的代理 程序完成加载[AppDelegate application:didFinishLaunchingWithOptions:] 创建window窗口 程序被激活[

android Activity 的生命周期 以及横屏竖屏切换时 Activity 的状态变化

生命周期Android 系统在Activity 生命周期中加入一些钩子,我们可以在这些系统预留的钩子中做一些事情.例举了 7 个常用的钩子:protected void onCreate(Bundle savedInstanceState)protected void onStart()protected void onResume()protected void onPause()protected void onStop()protected void onRestart()protecte

连载《一个程序猿的生命周期》-《发展篇》- 12.向生活妥协的选择之路,你也面临吗?

本篇文章的主角是第二个加入我们团队的,暂且称他为G兄.是我第二家公司的同事,但是当时并没有交集,后来经过其他同事说起,被我招过来的.关于第二家公司的情况,请参见<而立之年,第一次跳槽,寻求转型> 在加入我们团队之前,G兄在一个不大不小的公司做内部OA系统,众所周知不会有什么太大发展,他当时也不太满意.在和他交流的过程中,我说的很直接:1.开发公司内部OA,并非公司实际产品,无法直接创造利润,就算是公司的产品,现在做OA的多了去了.2.OA开发完成后,只剩运维人员,假设裁掉一部分人员的话,你怎么

【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件 created钩子函数和beforeMount间的生命周期 对于created钩子函数和beforeMount间可能会让人感到有些迷惑,下面我就来解释一下: el选项的有无对生命周期过程