ReactNativeiOS源码解析(一)源码解析(一)
函数栈代码流程图,由于采用层次缩进的形式,层次关系比较深的话,不是很利于手机阅读,
ReactNative 概要
ReactNative,动态,跨平台,热更新,这几个词现在越来越火了,一句使用JavaScript写源生App吸引力了无数人的眼球,并
且诞生了这么久也逐渐趋于稳定,携程,天猫,QZone也都在大产品线的业务上,部分模块采用这个方案上线,并且效果得到了
验证(见2016 GMTC 资料PPT)
我们把这个单词拆解成2部分
React
熟悉前端的朋友们可能都知道React.JS这个前端框架,没错整个RN框架的JS代码部分,就是React.JS,所有这个框架的特
点,完完全全都可以在RN里面使用(这里还融入了Flux,很好的把传统的MVC重组为dispatch,store和components,Flux架
构)
所以说,写RN哪不懂了,去翻React.JS的文档或许都能给你解答
以上由@彩虹 帮忙修正
Native
顾名思义,纯源生的native体验,纯源生的UI组件,纯原生的触摸响应,纯源生的模块功能
那么这两个不相干的东西是如何关联在一起的呢?
React.JS是一个前端框架,在浏览器内H5开发上被广泛使用,他在渲染render()这个环节,在经过各种flexbox布局算法之
后,要在确定的位置去绘制这个界面元素的时候,需要通过浏览器去实现。他在响应触摸touchEvent()这个环节,依然是需要
浏览器去捕获用户的触摸行为,然后回调React.JS
上面提到的都是纯网页,纯H5,但如果我们把render()这个事情拦截下来,不走浏览器,而是走native会怎样呢?
当React.JS已经计算完每个页面元素的位置大小,本来要传给浏览器,让浏览器进行渲染,这时候我们不传给浏览器了,而
是通过一个JS/OC的桥梁,去通过[[UIView alloc]initWithFrame:frame]的OC代码,把这个界面元素渲染了,那我们就相当于
用React.JS绘制出了一个native的View
拿我们刚刚绘制出得native的View,当他发生native源生的- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent
*)event触摸事件的时候,通过一个OC/JS的桥梁,去调用React.JS里面写好的点击事件JS代码
这样React.JS还是那个React.JS,他的使用方法没发生变化,但是却获得了纯源生native的体验,native的组件渲染,native
的触摸响应
于是,这个东西就叫做React-Native
ReactNative 结构
大家可以看到,刚才我说的核心就是一个桥梁,无论是JS=>OC,还是OC=>JS。
刚才举得例子,就相当于把纯源生的UI模块,接入这个桥梁,从而让源生UI与React.JS融为一体。
那我们把野心放长远点,我们不止想让React.JS操作UI,我还想用JS操作数据库!无论是新玩意Realm,还是老玩意
CoreData,FMDB,我都希望能用JS操作应该怎么办?好办,把纯源生的DB代码模块,接入这个桥梁
如果我想让JS操作Socket做长连接呢?好办,把源生socket代码模块接入这个桥梁。如果我想让JS能操作支付宝,微信,苹
果IAP呢?好办,把源生支付代码模块接入这个桥梁
由此可见RN就是由一个bridge桥梁,连接起了JS与na的代码模块
链接了哪个模块,哪个模块就能用JS来操作,就能动态更新
发现现有RN框架有些功能做不到了?扩展写个na代码模块,接入这个桥梁
这是一个极度模块化可扩展的桥梁框架,不是说你从facebook的源上拉下来RN的代码,RN的能力就固定一成不变了,他的模
块化可扩展,让你缺啥补上啥就好了
ReactNative 结构图