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进行区分。