《实现原理详解》由会员分享，可在线阅读，更多相关《实现原理详解（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-utrAphcdknWrhp4)d| 呵 H 祈 iNklJS打悽 JR; 口RaCFN*LWfio4-YKwtfSnii hndfirMrlh 1骨直呻U苛1：畠1啤5iAa| 同 tr
