实现原理详解

《实现原理详解》由会员分享，可在线阅读，更多相关《实现原理详解（14页珍藏版）》请在装配图网上搜索。

1、React Native实现原理详解、八 、亠刖言花了半个多月，把React Native源码看了一遍，大概的实现逻辑全看 明白了，希望对想了解React Native实现原理的同学有所帮助，其实 只要看懂文章的四幅图就明白它的原理了。如果喜欢我的文章，可以关注我微博 袁峥Seemygo也可以来小码哥, 了解下我们的iOS培训课程。后续还会更新更多内容，有任何问题，欢 迎简书留言 袁峥Seemygo。一、React Native 背景?有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？React? React是由Facebook推出的一个Jav

2、aScript框架，主要用于前段开 发。? React采用组件化方式简化Web开发DOM:每个HTML界面可以看做一个DOM原生的web开发方式，HTML 个文件，javaScript 一个文件， 文件分开，就会导致修改起来比较麻烦。可以把一组相关的HTML标签和JavaScript单独圭寸装到一个组件类中，便于复用，方便开发。? React可以高效的绘制界面 原生的Web,刷新界面(DOM)，需要把整个界面刷新.React 只会刷新部分界面，不会整个界面刷新。因为React独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的JavaScript对象，它与DOM是

3、 对应的关系，当界面发送变化时，React会利用DOM Diff算法，把有变化的DOM进行刷新. ? React是采用JSX语法，一种JS语法糖，方便快速开发。Native?想要了解Native是什么，需要了解下开发App有哪些开发模式，卖 了一个馆子，请继续往下看。二、常见的五种 App 开发模式?常见的开发模式有5种(Native App,Web App,HybridApp,Weex,React Native )Native App? Native App:指使用原生API开发App,比如iOS用OC语言开发? 优点：性能高? 缺点：开发维护成本高，养一个原生开发工程师需要很多钱，最重要i

4、OS版本更新也成问题。Web App?Web App:指使用Html开发的移动端网页App,类似微信小程序，整 个 App 都是网页。? 优点：用户不需要安装，不会占用手机内存? 缺点：用户体验不好，不能离线，必须联网Hybrid App? Hybrid App: 混合开发模式，原生 Api+Html 共同开发，比如 iOS, 用 html 写好界面，用 UIWebView 展示。?优点:界面复用性强，一个界面，iOS和安卓都可以使用? 缺点 :相对于原生，性能相对有所损害Weex?Weex:基于Vue（JS框架）的语法开发的App,底层会自动把JS弋码解 析成对应平台（iOS,安卓）的原生A

5、PI,本质还是原生API开发，只 不过表面是用Vue开发。? 优点 :可以做到一套弋码,跨平台执行,底层会自动判断当 前是哪个平台，转换为对应平台的原生 API代码。? 缺点：开源 较晚,互联网上相关资料还比较少,社区规模较小React Native? React Native:基于 React开发的 App? 优点：跳过 App Store 审核,远程更新代码,提高迭代频率和效率, 既有Native的体验，又保留React的开发效率。? 缺点 :对于不熟悉前端开发的人员上手比较慢, 不能真正意义上做到 跨平台，使用后，对app体积增加。? 相信大多数人了解完 React Native ,越来

6、越困惑了, 那不是跟 Native冲突了吗，Native是用原生Api开发，但是React Native又是用 React开发。? 要想彻底搞明白，需要了解 React Native 底层实现原理，又来了， 想知道原理，继续往下看三、React Native 原理? React Native原理其实跟Weex差不多，底层也会把React转换为原 生API? React Native和Weex区别在于跨平台上面，Weex只要写一套代码， React Native需要iOS,安卓都写，说明React Native底层解析原 生API是分开实现的，iOS套，安卓一套。四、React Native如何

7、把React转化为原生API? React Native会在一开始生成OC模块表，然后把这个模块表传入JS 中，JS参照模块表，就能间接调用OC的代码。相当于买了一个机器人（OC），对应一份说明书（模块表）， 用户（JS）参照说明书去执行机器人的操作。五、React Native是如何做到JS和OC交互?iOS原生API有个JavaScriptCore框架，通过它就能实现JS和OC交 互，想了解 JavaScriptCore ，请点击 JavaScriptCore1首先写好JSX代码（React框架就是使用JSX语法）2. 把JSX弋码解析成javaScript代码3.OC读取JS文件4. 把

8、javaScript代码读取出来，利用JavaScriptCore执行5. javaScript代码返回一个数组，数组中会描述 0C对象，0C对 象的属性，0C对象所需要执行的方法，这样就能让这个对象设置属 性，并且调用方法。React Native是如何让JS和0C交互React框架（组件化开发）JavaScript + HTML （界面，业务逻辑和数据）JavaScriptCore JS和0C通信桥梁）IOS, Android （UI界面渲染）JS和0C交互.png六、React Native 启动流程（iOS）? 1.创建RCTRootView - 设置窗口根控制器的View,把RN的V

9、iew添 加到窗口上显示。? 2.创建RCTBridge - 桥接对象管理JS和OC交互，做中转左右。? 3.创建RCTBatchedBridge - 批量桥架对象，JS和OC交互具体实 现都在这个类中。? 4.执行RCTBatchedBridge loadSource-加载 JS源码? 5.执行RCTBatchedBridge initModulesWithDispatchGroup-创建OC模块表? 6.执行RCTJSCExecutor injectJSONText- 往 JS中插入 OC模块表?7.执行完JSf弋码，回调OC,调用OC中的组件程序启动完成创建 RCTRootView创建

10、RCTBridge创建 RCTBatchedBridge执行RCTBatchedBridgeloadSourceJ?8.完成UI渲染执行RCT Batched Bridge initModulesWithDispatchGroup_豎_执frfRCTBatebedBridge initModulesWithDispatchGroupI执行RCTJSCExecutor inj ecUS ON Text完成UI渲染React Native 启动流程（iOS）.png七、React Native加载JS源码流程（iOS）? 1.RCTJavaScriptLoader loadBu ndleAtURL

11、-加载远程服务器中JS代码2.attemptAsynchronousLoadOfBundleAtURL（C函数）- 开启异步加载JS代码3. RCTBatchedBridge executeSourceCode:sourceCode- 让批量交接对象执行源代码RCTJSCExecutor executeApplicatio nScript-交给 JS执行者(RCTJSCExecutor)执行源码)真正执行JS代码的是RCTJSCExecutor对象? 5.postNotificationName:RCTJavaScriptDidLoadNotification -发送JS代码执行完成通知? 6

12、.RCTRootView 监听到 RCTJavaScriptDidLoadNotification 通知 ?7.创建 RCTRootContentView? 8.获取 RCTBridge 中的 RCTUIManager 注册 RCTRootView,并且记录 RCTRootView，_viewRegistryRCTUIManager :管理 UI组件_viewRegistry ：保存所有注册的 View? 9.RCTRootView runApplication:bridge-通知 JS运行 App?10.RCTBridge enqueueJSCall:AppRegistry1 method:

13、 runApplication2 args:moduleName, appParameters3 completion:NULL-通过桥接对象让 JS调用AppRegistry?11.RCTBatchedBridge_actuallyInvokeAndProcessModule:module method:method arguments:args queue:RCTJSThread - 通过批量桥架让 JS 执行AppRegistry方法?12.RCTJSCExecutor _executeJSCall:bridgeMethod arguments:module, method, args

14、un wrapResult:u nwrapResult callback:。nComplete- 让 JS执行者调用JS代码? 13.执行完JS代码，就能获取执行JS结果，是一个数组，0C需要做的事情都会保存到这个数组中? 14.RCTBatchedBridge _processResp on se:js on error:error-处理执行完JS弋码返回的结果对象? 15.RCTBatchedBridge han dleBuffer-处理 JS返回的数据，JS会返回的方法调用数组：按顺序描述需要调用哪个对象的方法， 一组调用包含(module , method , arguments )?

15、 16.self callNativeModule:modulelDsindex integerValue1 method:methodlDsi ndex in tegerValue遍历数组，依params:paramsArraysi ndex-注意：当前方法，在遍历数组中的代码块中执行，不只是执行一次|icC rjjv&cnpduhMler ! kQMifajndPfr/ULrtLI14f ” RC T百团 ill I甲EKkm仙艸taw审RE 畀事所11 .RC IRMVwCLriairhcdVridrMfidleBLdlcrMflrprrVjIuvl,rt n4-utrAphcdknWr

16、hp4)d| 呵 H 祈 iNklJS打悽 JR; 口RaCFN*LWfio4-YKwtfSnii hndfirMrlh 1骨直呻U苛1：畠1啤5iAa| 同 try门中aCTMTtpulitVBchr antjursl aaAIRCTUHMdPys rtr5ourrtM MNwrLCodIHJCTfcHhf-dBridqrU* ly i Ed b 亡出 n*T DC 申*fRCT再bnwhX耦 行 SiiplEhdLMMkriljd i 通知 JS运行 App? 2.RCTBatchedBridge _processResponse:json error:error -处理执行完JSf弋码(

17、runApplication)返回的相应，包含需要添加多 少子控件的信息。?3.RCTBatchedBridge batchDidComplete - 批量桥架对象调用 批量处理完成方法? 4.RCTUIMa n age r batchDidComplete - RCTUIManager调用批量处理完成的方法，就会开始去加载 rootView 的子控件。? 5.RCTUIMa n age r createView:viewName:rootTag:props -通过JS执行OC代码，让UI管理者创建子控件View通过RCT_EXPORT_METHOD宏定义createView这个方法1 RCT

18、_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTag2 viewName:(NSString *)viewName3 rootTag:(_unused NSNumber *)rootTag4 props:(NSDictionary *)props)RCT_EXPORT_METHOD宏会在JS中生成对应的OC方法，这样JS就 能直接调用?注意每创建一个UIView,就会创建一个RCTShadowView，与UIView 一一对应? RCTShadowView 保存对应UIView的布局和子控件，管理UIView的 加载? 6.RCTUIMa

19、nagerayoutAndMount-布局 RCTRootView和增加子控件? 7.RCTUIManager setChildren:reactTags:-给RCTRootView对应的RCTRootShadowView设置子控件注意：此方法也是JS调用OC方法? 8.RCTRootShadowView insertReactSubview:viewatln dex:i ndex+-遍历子控件数组，给RCTRootShadowView插入所有子控件? 9.RCTShadowView processUpdatedProperties:parentProperties:-处理保存在RCTShad

20、owView中属性，就会去布局 RCTShadowView对应UIView的所有子控件? 10.RCTView didUpdateReactSubviews-给原生 View添加子控件?11.完成UI渲染React Native (UHRCTRootViewrunApplication；bridgeR CT Batched Bridge _p rocessR es ponseRCTBatehedBridgebatchDidComplete)RCTUIManagerbatchDidCompleteRCTUIManagercreateViewRCTUII ManagerJayoutAndMount

21、)RCTUIManager setChildrenRCTRootShadowViewinsertReactSubviewRCTShadowViewp rocess Upd ated Propert ie sRCTViewdidUpdateReactSubviews*完成UI渲頑React Native (UI 控件渲染流程).png九、React Native事件处理流程(iOS)? 1.在创建 RCTRootContentView 的时候，内部会创建 RCTTouchHandlerRCTTouchHandler :继承 UIGestureRecognizer ，也就是它 就是一个手势它会作为

22、 RCTRootContentView 的手势，这样点击 RCTRootContentView ，就会触发 RCTTouchHandlerRCTTouchHandler :内部实现了 touchBegin 等触摸方法，用 来处理触摸事件? 2.在创建 RCTTouchHandler 的时候，内部会创建 RCTEventDispatcherRCTEventDispatcher :用来把事件处理传递给JS的方法处 理，也就是当ui界面产生事件，就会执行JS勺代码处理。?3.通过 RCTRootContentView 截获点击事件产生事件就会去触犯 RCTRootContentView 中勺 RCT

23、TouchHandler 对象。?4.当产生事件勺时候 ,会执行 RCTTouchHandler touchBegin?5.RCTTouchHandler 勺 touch 方法，会执行 RCTTouchHandler _updateAndDispatchTouches:eventName:内部会创建RCTTouchEvent事件对象?6.RCTEventDispatcher sendEvent:event - 让事件分发对象调用 发送事件对象内部会把事件保存到 _eventQueue （事件队列中）7. RCTEve ntDispatcher flushEve ntsQueue-让事件分发对象

24、冲刷事件队列，就是获取事件队列中所有事件执行8. RCTEve ntDispatcher dispatchEve nt:eve nt-遍历事件队列，一个一个分发事件分发事件的本质：就是去执行JS的代码，相应事件。9. RCTBatchedBridge enqueueJSCall:event class moduleDotMethod args:eve nt argume nts;-让桥架对象调用JS处理事件本质：就是产生事件调用JS代码? 10.这样就能完成把UI事件交给JS代码相应创建 RCTTouchHandter创建 RCTEventDi spatche r通过 RCTRootContentView截获点击事件RCTTouch HandlertouchBeginRCTTouch Handler_updateAndDispatchTouchesRCTEventDispatchersen dEvent：eventRCTEventDispatcherfl ush Eve n tsQ ue ueRCTEventDispatcherdispatchEve nt:e#mntRCTBatchedB ridgeenqueueJSCallRCTViewdidUpd ate Re actSu bvi ews * =完成UI事件交给JS代码处理最新文件 仅供参考已改成word文本 方便更