ReactNative运行原理分析
RN的生命周期
可以把组件生命周期大致分为三个阶段:
第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化。
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面。
第三阶段:是组件卸载消亡阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。
外部影响周期
组件周期结束
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会引发自身重绘,同时会触发生命周期函数,如果错误的方法进行调用会引发堆栈溢出