刚开始接触React Native开发的程序猿可能会拿着网上的例子和文档一头雾水，毕竟不是像C语言有个main、Android有个OnCreate，iOS有个ViewDidLoad那样，加上JavaScript语法的随意性，让很多人无从下手，本文主要介绍React Native组件的结构和生命周期，帮助读者理解一个React Native组件如何进行展示，如何进行开发。
1.组件的构成
在React Native项目中，所有展示的界面，都可以看做是一个组件（Component）只是功能和逻辑上的复杂程度不同。每一个是许许多多小的组件拼成的，每个小的组件也有自己对应的逻辑，不过他们都遵循同样的代码结构，由以下几个部分组成
第一是包和其他组件引用部分，如下图：
新版本的React Native已经变成了如下形式：
此部分首先会利用Node.js的require机制引入react-native这个包，接着会在var { } = React;的代码结构中引用来自React Native官方的组件（其中AppRegistry和StyleSheet比较重要）、API以及第三方或开发者项目中构建的组件，形式为该组件或API的React类名，当然，由于React Native利用了Node.js实现，还可以使用require引入其他可用的Node.js包，如：jssha（一个js哈希算法包），以供后面的代码进行使用。
第二部分是组件类的声明，如图：
新版形式：
此部分用于构造组件的状态和具体的展示结构，利用React.createClass（）来实例化一个React Native组件对象，其中会包含组件的几个重要的生命周期（下文会讲到），其中render属性对应的函数会返回一段JSX来表示该组件的结构和布局。该部分是一个组件必不可少的地方，没有这些内容，就无法构成一个组件。
第三部分是该组件的样式声明，如图：
新版形式：
该部分使用StyleSheet.create来实例化样式对象，其中的内容为JSON形式的React Native样式，该样式来源于CSS3，并将其字段规范为标准的首字母小写驼峰式命名，这些声明的样式可供开发者在构建组件的展示时（JSX代码中）进行使用（直接写入JSX也可，但影响可读性）。
2.生命周期
一个React Native组件的生命周期分为实例化、存在期和销毁期，其中最常用的为实例化期，该时期即组件的构建、展示时期，需要开发者根据几个函数的调用过程，控制好组件的展示和逻辑的处理。
（1）实例化期分为5个阶段，每个阶段以一个函数来进行控制，具体如下：
getDefaultProps：顾名思义，这里会初始化一些默认的属性，通常会将固定的内容放在这个过程中进行初始化和赋值，一个控件可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
getInitialState：这里是对控件的一些状态进行初始化，由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值，修改方式如下：
[javascript] view plain copy
function() {
this.setState({
showText: 'Hello'
});
}
值得注意的是，一旦调用了this.setState方法，控件必将调用render方法，对控件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
componentWillMount：可以通过字面意思看出，这个方法被调用时期是组件将要被加载在视图上之前，功能比较少，即：render一个组件前最后一次修改state的机会。
render：上面已经说过render是一个组件必须有的方法，形式为一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局、WPF的XAML布局类似，只能返回一个顶级元素，即：
同时，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值。
componentDidMount：即调用了render方法后，组件加载成功并被成功渲染出来以后所执行的hook函数，一般会将网络请求等加载数据的操作，放在这个函数里进行，来保证不会出现UI上的错误，如图所示，_fetchData利用了fetch API来异步请求Web API来加载商品数据：
（2）存在期主要是用来处理与用户的交互，如：点击事件，都比较简单，也不是很常用，具体有以下几个过程：
componentWillReceiveProps：指父元素对组件的props或state进行了修改
shouldComponentUpdate：一般用于优化，可以返回false或true来控制是否进行渲染
componentWillUpdate：组件刷新前调用，类似componentWillMount
componentDidUpdate：更新后的hook
（3）销毁期，用于清理一些无用的内容，如：点击事件Listener，只有一个过程：componentWillUnmount
3.总结
总得来讲，React Native组件的生命周期，经历了Mount->Update->Unmount这三个大的过程，即从创建到销毁的过程，如果借助Android和iOS的开发思想，那么React Native组件的生命周期就更容易理解了。那么，我们构建一个React Native控件也就能够知道如何下手，如何控制和优化。经过一层一层的封装和调用，一个完整的React Native应用也就构建出来了。
转载请注明出处：http://blog.csdn.net/yuanguozhengjust/article/details/50470171
