3. React Native学习-组件的生命周期

参考资料:

一: 实例化期:

<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插入文档以后, 才可以适用这个属性, 否则会报错