React Native组件生命周期

一、看图分析

      在下图中描述了React Native中组件的生命周期,我们可以根据其中的执行顺序在对应的函数中做对应的操作。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如图,可以把组件生命周期大致分为三个阶段:

第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

其中最常用的为实例化阶段,该阶段就是组件的构建、展示时期,需要我们根据几个函数的调用过程,控制好组件的展示和逻辑的处理。

二、实例化阶段函数功能分析

getDefaultProps

该函数用于初始化一些默认的属性,通常会将固定的内容放在这个函数 中进行初始化和赋值;

在组件中,可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。

getInitialState

该函数是用于对组件的一些状态进行初始化;

由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值, 比如:

this.setState({
    activePage: activePage, 
    currentX: contentOffSetX  
});

注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount

相当于OC中的ViewWillAppear方法,在组件将要被加载在视图上之前调用,功能相对较少。

render

      render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似,注意:只能返回一个顶级元素 ;

此外,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值 。

componentDidMount

       在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;

因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误

三、存在期阶段函数功能分析

componentWillReceiveProps    

指父元素对组件的props或state进行了修改

shouldComponentUpdate    

一般用于优化,可以返回false或true来控制是否进行渲染

componentWillUpdate

组件刷新前调用,类似componentWillMount

componentDidUpdate

更新后的hook

四、销毁期阶段函数功能分析

用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

 

Windows下搭建ReactNative安卓开发环境

前言

其实官方文档上已经很详细了,我这里只说一下要注意的细节和大致过程。其实最主要的是java的SDK

Python2

大家直接官网下载即可https://www.python.org/,需要注意的是目前ReactNative不支持Python 3版本

Node

继续官方下载安装即可:https://nodejs.org/en/

Android Studio

这个建议大家百度去下载,速度会快很多,Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)官网下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

然后就是安装完后的设置的sdk目录一定要记住,如图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

环境变量

ANDROID_HOME:指向了你安装的Android SDK的路径

JAVA_HOME:指向你安装java sdk的安装目录

将Android SDK的Tools目录添加到PATH变量中以便在终端中运行一些Android工具,例如android avd或是adb logcat等。

 

 

 

 

 

 

 

 

 

 

 

 

 

Genymotion模拟器

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费,需要大家注册在下载,官网地址:https://www.genymotion.com/download