React Native组件生命周期
概述
所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解空间的生命周期，是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样，React Native的组件也有生命周期（Lifecycle）。 React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段。我们只有在理解组件生命周期的基础上，才能开发出高性能的app。 React Native中组件的生命周期大致可以用以下图表示：
如图：
- 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
- 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
- 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。
生命周期分析
实例化阶段分析
getDefaultProps 该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值； 在组件创建之前，会先调用 getDefaultProps()初始化一些属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps()，所以组件自己不可以自己修改props。 getInitialState 该函数是用于对组件的一些状态进行初始化； 该函数不同于getDefaultProps，在以后的过程中，可以再次调用。 比如：
this.setState({
activePage: activePage,
currentX: contentOffSetX
});注：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。 componentWillMount 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。这个函数在整个生命周期中只被调用一次。 render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似。作用是通知系统准备加载组件。 componentDidMount 该方法是在调用了render方法后，通知组件已经加载完成。一般会在这个函数中处理网络请求等加载数据的操作；
存在期阶段分析
componentWillReceiveProps 如果组件收到新的属性（props），就会调用 componentWillReceiveProps()对组件的props或state进行了修改。 旧的属性还是可以通过 this.props 来获取，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。 shouldComponentUpdate 当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(…)，通过返回false或true来控制是否进行界面的渲染。如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。
componentWillUpdate 如果组件状态或者属性改变，并且上面的 shouldComponentUpdate() 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，组件刷新前调用，有点类似于componentWillMount()。 componentDidUpdate 调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：
void componentDidUpdate(
object prevProps, object prevState
)销毁期阶段分析
componentWillUnmount 当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，该函数可以做一些组件相关的清理工作，例如取消计时器、网络请求等。
总结
生命周期 | 调用次数 | 能否使用 setSate() |
|---|---|---|
getDefaultProps | 全局调用1次 | 否 |
getInitialState | 1 | 否 |
componentWillMount | 1 | 是 |
render | >=1 | 否 |
componentDidMount | 1 | 是 |
componentWillReceiveProps | >=0 | 是 |
shouldComponentUpdate | >=0 | 否 |
componentWillUpdate | >=0 | 是 |
componentDidUpdate | >=0 | 是 |
componentWillUnmount | 1 | 是 |
补充
什么是DOM Diff算法
Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，’这就需要对DOM树进行Diff算法分析。 即给定任意两棵树，找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3)，这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的，势必需要对算法进行优化。这看上去非常有难度，然而Facebook工程师却做到了，他们结合Web界面的特点做出了两个简单的假设，使得Diff算法复杂度直接降低到O(n)两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构；对于同一层次的一组子节点，它们可以通过唯一的id进行区分。