ReactNative组件生命周期

组件生命周期详解

• 组件生命周期基础知识
  组件，又名控件，是一段独立可复用的代码。在React Native应用开发中，组件是页面最基本的组成部分。
  和React的组件一样，RN的组件也有自己的生命周期。在RN应用开发中，组件的生命周期指组件初始化并挂载到虚拟DOM为起始，到组件从虚拟DOM卸载为终结的整个过程，整个生命周期如图所示。

如图可知，rn组件的生命周期大体可以分为3个阶段，即挂载、更新和卸载。其中，挂载和更新阶段都会调用render()方法绘制视图。组件的每个生命周期阶段都提供了一些方法供开发者调用，以实现相应的需求和功能。
挂载阶段指的是从组件的实例被创建到将其插入DOM的过程。挂载阶段涉及的生命周期方法如下：

• defaultProps()：此阶段主要用于初始化一些默认属性，在ES6语法中，则统一使用static成员来定义。
• constructor()：此方法是组件的构造方法，可以在此阶段对组件的一些状态进行初始化。不同于defaultProps()，此方法定义的变量可以通过this.setState进行修改。
• componentWillMount()：在挂载前被立即调用。它在render()方法之前被执行，因此在此方法中设置state不会导致重新渲染。
• render()：此方法主要用于渲染组件，返回JSX或其他组件构成DOM。同时，此方法应尽量保持纯净，只渲染组件不修改状态。
• componentDidMount()：此方法在挂载结束之后立即调用，即在render()方法后被执行。开发者可以在此方法中获取元素或者子组件，也可以在此方法中执行网络请求操作。

挂载阶段的4个步骤分别对应着上面的4个方法，一般很少用defaultProps方法接收默认的props，而是直接在构造方法里面对state进行赋值。

当组件经过初始化阶段之后，应用程序就正常运行起来了，此时应用程序进入了运行阶段。运行阶段有个明显的特征，就是不论修改props还是state，系统都会调用shouldComponentUpdate方法来判断视图是否需要渲染。如果不需要，则不执行渲染，如果需要重新渲染，则调用render()方法执行视图的重绘。并且props的改变会比state的改变多一个步骤，props会先调用componentWillReceiveProps()方法接收props后，再判断是否需要执行更新操作。运行阶段涉及的组件的生命周期函数如下。

• componentWillReceiveProps()：在挂载的组件接收到新的props时被调用。它接收一个Object类型的参数nextProps，然后调用this.setState方法来更新组件的状态。(不过，这个方法是已经被舍弃的)
• componentDidUpdate()：在组件重新渲染完成后被调用，可以在此函数中得到渲染完成之后的通知。
• componentWillUpdate()：如果shouldComponentUpdate方法返回true，则此方法在组件重新渲染前被调用。
• shouldComponentUpdate()：当组件接收到新的props或state时此方法就会被调用。此方法默认返回true，用来保证数据变化时组件能够重新渲染。当然，开发者也可以重载此方法来决定组件是否需要执行重新渲染。

销毁阶段又名卸载阶段，主要指组件从挂载阶段到将其从DOM中删除的过程，是组件生命周期的终点。
除了正常移除组件外，组件的销毁还可能是由其他情况引起的，如系统遇到错误崩溃、系统内存空间不足，以及用户退出应用等。销毁阶段涉及的组件的生命周期函数如下。

• componentWillUnmount：在组件卸载和销毁之前被立即调用。可以在此方法中执行必要的清理操作，如关掉计时器、取消网络请求和清除创建的DOM元素等。

在组件的整个生命周期中，每一个生命周期函数并不是只被调用一次，有的生命周期函数在整个生命周期阶段可能被多次调用，如下表所示：

虚拟DOM

众所周知，web界面的本质上是由DOM树构成的，当其中某个部分发生变化时，其实就是对应的DOM节点发生了变化。
在jq出现之前，前端开发人员如果要修改界面，需要直接操作DOM节点。在这一时期，程序的代码结构混乱，可维护性比较差。不过，随着jq以及高度封装的API的出现，开发人员慢慢地从繁琐的DOM操作中解脱出来。MVVM使用的数据双向绑定和自动更新技术使得前端开发效率大幅度提升，但是大量的事件绑定导致的执行性能低下的问题依然存在。
React技术提供了一个虚拟DOM技术，来解决上述问题。React中的组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM。只有当它被插入文档以后，才会变成真实的DOM。
根据React的设计，所有的DOM变动都需要先反映在虚拟DOM上，再将实际发生变动的部分反映到真实的DOM上，而这一过程的核心就是DOM diff算法。它可以减少不必要的DOM渲染，极大地提高组件的渲染性能。

虚拟DOM与生命周期

在React中，组件的每个生命周期阶段都和虚拟DOM息息相关，因此可以根据生命周期函数来执行不同的DOM操作。组件生命周期和虚拟DOM操作的对应关系如下表所示。

组件生命周期名称	对应虚拟DOM操作
constructor	组件被创建时执行，不执行DOM操作
componentDidMount	组件被添加到DOM树后执行
componentWillUnmount	组件从DOM树中被移除后执行
componentDidUpdate	组件需要更新时执行