ReactNative运行原理分析

RN的生命周期

可以把组件生命周期大致分为三个阶段：

1. 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化。

2. 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面。

3. 第三阶段:是组件卸载消亡阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

外部影响周期

组件周期结束

getDefaultProps: 在组件创建之前，会先调用 getDefaultProps(),这是全局调用一次，相当于构造方法

getInitialState: 在组件创建并加载后，调用getInitialState()，用来初始化组件的状态。

componentwillmount: 准备加载组件,调用一次这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制render()之前。可以在这里做一些业务初始化操作，相当于安卓里的onMeasure方法

render: 组件渲染函数，会返回一个Virtual DOM。应该保持render函数的纯净，只渲染组件，不修改状态。

componentDid Mount: 这个函数调用的时候,其虚拟DOM已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了，相当于安卓里的onLayout方法

componentWillReceiveProps: 接受父组件新的属性(props)，相当于set()方法

shouldComponentUpdate: 当组件接收到新的属性和状态改变的话,都会触发shouldCoomponentUpdate，相当于安卓里的onInterceptTouchEvent方法

componentwillupdate: 如果组件状态或者属性改变,并且上面的 shouldCoomponentUpdate(...)返回为true，相当于安卓里的onTouchEvent方法

componentDidUpdate: 在render之后，会生成真实的DOM，然后调用componentDidUpdate(prevProps, prevState)，传递的参数是当前的props和state。

生命周期调用次数

备注:调用setState会引发自身重绘,同时会触发生命周期函数,如果错误的方法进行调用会引发堆栈溢出