iOS热更新
ReactNative 原理及热更新
1
2
3
4
5
6
7
8
9
10
11
| 在 React 框架中，JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中，
而在 React Native 框架中，JSX 源码通过 React Native 框架编译后，通过对应平台的 Bridge 实现了与原生框架的通信
因为 React Native 的底层为 React 框架，所以如果是 UI 层的变更，那么就映射为虚拟 DOM 后进行 diff 算法，diff 算法计算出变动后的 JSON 映射文件，最终由 Native 层将此 JSON 文件映射渲染到原生 App 的页面元素上，最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与 Android 平台的 UI 变更。
编写的 React Native代码最终会打包生成一个 main.bundle.js 文件供 App 加载，此文件可以在 App 设备本地，也可以存放于服务器上供 App 下载更新
本质上还是一个ReactNative App加载main.bundle的模型,main.bundle可以被替换(热更新)
React Native 采用了 JavaScriptCore 作为 JS VM，中间通过 JSON 文件与 Bridge 进行通信,在使用 Chrome 浏览器进行调试时，那么所有的 JavaScript 代码都将运行在 Chrome 的 V8 引擎中，(即调试模式会起一个node.js窗口)与原生代码通过 WebSocket 进行通信
|
React Native 的核心驱动力来自于 JS Engine,所有的js和jsx代码都会被JS Engine来执行,在iOS上,即来自webKit的JavaScriptCore
JavaScript在React Native里非常重要:
1
2
3
4
| 1.负责管理UI component的生命周期,管理Virtual DOM
2.所有的业务逻辑都是用js来实现或衔接
3.调用原生代码来操控原生组件
4.js本身无绘图能力,都是通过给原生组件发指令来完成
|
React Native应用启动时有以下三个任务并行完成:
1.加载JavaScript打包文件，React Native的打包工具会像Webpack和Browserify一样把代码连同全部依赖打包成单个文件
2.与此同时，React Native开始加载原生模块。一旦某个原生模块完成加载就在桥接层注册，桥接层确认该模块。此时整个应用便知道该模块已可用并能创建该模块的实例
3.启动JavaScript虚拟机，提供JavaScript代码的执行环境
Bridge的作用就是给RN内嵌的JS Engine提供原生接口的扩展供JS调用,所有的原生功能都是通过Bridge封装城JS接口后注入JS Engine供JS调用
React Native有三个重要的线程:
1.Shadow queue 布局引擎(yoga)计算布局
2.Main thread主线程,操作系统的UI线程
3.Javascript thread. JavaScript线程,因为js是单线程模型,event驱动的异步模型,所以有此独立的js线程,所有的js和原生代码的交互都发生在这个线程里
React Native启动流程iOS
1
2
3
4
5
6
7
8
| 1.创建RCTRootView //设置窗口根控制器View,在界面上显示RN的主View
2.创建RCTBridge //桥接对象,管理JS和OC交互,做中转
3.创建RCTBatchBridge // 批量桥接对象,JS和OC交互具体实现在此
4.执行[RCTBatchBridge loadSource] //加载js源码
5.执行[RCTBatchBridge initModulesWithDispatchGroup] // 创建OC模块表
6.执行[RCTJSCExecutor injectJSONText] 往JS中插入OC模块表
7.执行完js代码,回调OC,调用OC中的组件
8.完成UI渲染
|