参考资料:
component-lifecycle.jpg一: 实例化期:
<p>
1. getDefaultProps
getDefaultProps：顾名思义，这里会初始化一些默认的属性，通常会将固定的内容放在这个过程中进行初始化和赋值，一个控件可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
2. getInitialState
getInitialState：这里是对控件的一些状态进行初始化，由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值, 修改方式如下:
function() {
this.setState({
showText: 'Hello'
});
}
值得注意的是，一旦调用了this.setState方法，控件必将调用render方法，对控件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染
3. componentWillMount
componentWillMount：可以通过字面意思看出，这个方法被调用时期是组件将要被加载在视图上之前，功能比较少，即：render一个组件前最后一次修改state的机会。相当于OC中的viewWillAppear方法
4. render
render：上面已经说过render是一个组件必须有的方法，形式为一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局、WPF的XAML布局类似，只能返回一个顶级元素: 例如: render只返回一个View,如果返回两个并列的View, 则是不对的
同时，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值。
5. componentDidMount
componentDidMount：即调用了render方法后，组件加载成功并被成功渲染出来以后所执行的hook函数，一般会将网络请求等加载数据的操作，放在这个函数里进行，来保证不会出现UI上的错误
二: 存在期(运行期):
<p>
1. componentWillReceiveProps
componentWillReceiveProps: 指父元素对组件的props或state进行了修改
2. shouldComponentUpdate
shouldComponentUpdate: 一般用于优化, 可以返回false或true来控制是否进行渲染
3. componentWillUpdata
componentWillUpdata: 组件刷新前的调用, 类似于componentWillMount
4. componentDidUpdate
componentDidUpdate: 更新后的hook
三: 销毁期:
用来清理一些无用的内容, 如: 点击事件Listener, 只有一个过程: componentWillUnmount
四: 常用知识点分析:
<p>
1. this.state
开发中组件与用户交互, 可以将组件看成一个状态机, 一开始有一个初始状态, 然后用户互动, 导致状态变化,根据diff算法算出来有差后, 就会执行this.render方法, 从而触发重新渲染UI.
2. 获取真实的DOM节点
- 在RN中, 组件并不是真实的DOM节点, 而是存在于内存中的一种数据结构, 叫做虚拟DOM(virtual DOM)
- 只有当它插入文档以后, 才会变成真实的DOM
根据React的设计, 所有DOM的变动, 都现在虚拟DOM上发生, 然后再将实际发生变动的部分,反映在真实的DOM上, 这种算法叫DOM diff, 它可以极大提高网页的性能表现 - 但, 有时需要从组建中获取真实DOM节点, 这时就要用到
ref属性:
例如:<View ref="topView" style={styles.container}></View>
我们获取用:this.refs.topView, 我们必须等到虚拟DOM插入文档以后, 才可以适用这个属性, 否则会报错