RN

[emilyzfive]

RN 原理

开发者依然使用 web 语言，如（React 或者其他 DSL）,但渲染基本交给平台处理，React Native 代码中标签映射为虚拟节点，由原生平台解析虚拟节点并渲染出原生组件。如此一来，在开发层面，拜托了 webview 的束缚，保障了开发体验和效率。

React Native 由三层组成

• JavaScript
• C++ 适配层
• iOS/Android

C++ 层实现了动态链接库，衔接前端和原生平台，具体的工作为：使用 JavaScriptCore 解析 JavaScript 代码，通过 MessageQueue.js 实现双向通信。

RN 缺陷

通信过程是异步的，通信成本很高；部分组件的 API 没有实现平台统一

革新

简化bridge实现，直接用 C++ 生成 Shadow Tree，减少通信成本，提升交互性能。

和 flutter 的对比

flutter 采用 Dart 编程语言，不同于 React Native 的一个显著特点是：Flutter 并非使用原生平台组件进行渲染。比如在 React Native 中，一个 组件会被最终编译为 iOS 平台的 UIView Element 以及 Android 平台的 View Element，但在 Flutter 中，Flutter 自身提供一组组件集合，这些组件集合被 Flutter 框架和引擎直接接管。

目前来看，Flutter 具备其他（主流）跨平台方案所不具备的技术优势，它是更底层，真正意义上的跨端，未来前景大好。但作为后入场者，也存在生态小、学习成本高等障碍，也正因为更底层，存在需要通过 bridge，调用原生平台能力的成本困扰。

加载bundle的原理

要实现RN的脚本热更新，我们要搞明白RN是如何去加载脚本的。 在编写业务逻辑的时候，我们会有许多个js文件，打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件，所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里，启动App时会第一时间加载bundle文件，所以脚本热更新要做的事情就是替换掉这个bundle文件。

code push 原理

code push 调用 react native 的打包命令，将当前环境的非 native 代码全量打包成一个 bundle 文件，然后上传到微软云服务器（Windows Azure）。 在 app 中启动页（或 splash 页）编写请求更新的代码（请求包含了本地版本，hashCode、appToken 等信息），微软服务端对比本地 js bundle 版本和微软服务器的版本，如果本地版本低，就下载新的 js bundle 下来后实现更新(code push 框架实现)。

参考文章：为什么说RN凉了