ReactNative iOS源码解析（一）

参考文章：袁峥
折腾范：源码分析

一 开发模式

1.Native 原生 缺点:无法动态更新，发版需要审核，时间长
2.Web 页面全部是HTML 缺点:体验极差
3.Hybrid 概念:既有原生，又有HTML。
举例 比如同花顺：
（1）k线原生：用户体验好
（2）金融产品、资讯用HTML：需要经常更新，增加新功能，灵活
4.Weex:基于Vue，写着JS代码，编译的时候变成了Native代码。优点：跨平台，只需要一套代码，底层判断iOS 还是Android
5.React Native ：JSX编写代码，运行的时候，将JS代码映射成OC代码执行。优点：热更新

二 React Native 本质

JS 方法 和 OC方法 一一对应。有个方法表，JS调用方法xxx，从方法表中找出对应的OC方法执行。

三 React Native 交互原理

1.JSX -> JS
2.JS ->OC(通过JavaScriptCore)

四 举例说明 JSX -> 原生 （例如：RCTRootView ）

0.RCTRootView 显示的 时候

1. 创建RCTBridge：JS OC交互
2. 创建 RCTBatchedBridge：JS OC具体实现在这个类里面

截止到这，通用交互库加载完毕，下面加载 单个 模块的资源

3. 执行 [RCTBatchedBridge loadSource] -> 加载JS源码
   4.执行[RCTBatchedBridge initModulesWithDispatchGroup] -> 创建OC模块表
   5.执行[RCTJSCExecutor injectJSONText] -> 往JS中插入OC模块表
   6.执行 JS，JS调用OC

   
   
   

   304825-03054fedd4cfed99.png

五 React Native加载JS源码流程

1.加载远程服务器中JS代码：[RCTJavaScriptLoader loadBundleAtURL]
2.开启异步加载JS代码 ：attemptAsynchronousLoadOfBundleAtURL

3. RCTBatchedBridge 执行JS代码 ：[RCTBatchedBridge executeSourceCode:sourceCode]（翻译JS代码）
4. RCTJSCExecutor 执行JS代码
   5.发送JS完成通知
   6.RCTRootVIew 监听到通知，创建 View
   7.调用register 相关方法
5. RCTBatchedBridge 调用 里面的方法 返回OC 方法调用顺序
   9.原生 依次调用

六 UI渲染顺序

1. RCTBatchedBridge 执行 JS桥接方法，并得到控件信息
2. RCTUIManager 执行JS调用OC 创建View
3. RCTRootShadowView 插入所有子控件 并布局

七 事件处理流程

1. RCTTouchHandler：处理触摸，手势
2. RCTTouchHandler 创建 RCTTouchEvent对象
3. RCTEventDispatcher分发事件
4. RCTBatchedBridge 执行 JS