原生渲染方案

使用 JS 开发，通过中间层桥接后，使用原生组件来渲染 UI 界面

在 Android 开发中是使用 Kotlin 或 Java 来编写视图

在 iOS 中是使用 Swift 或 Objective-C 来编写视图

痛点

• 应用商店发版，不同商店都需要发，且等待时间长
• 两端研发不同步

react native

由 facebook 发布的一款开源框架

使用 react 组件通过 js 来调用这些视图

在运行时，rn 为这些组件创建相应的 android 和 iOS 视图

由于 RN 组件就是对原生视图的封装

所以用 RN 编写的应用外观，感觉和性能与其他任何原生应用一样

React Native 的思路是最大化地复用前端的生态和 Native 的生态，和 WebView 容器的最大区别在于 View 的渲染体系。

React Native 抛弃了低效的浏览器内核渲染，转而使用自己的 DSL 生成中间格式，然后映射到对应的平台，渲染成平台的组件。

相对 WebView 容器，体验会有一定的提升。

不过，渲染时需要 JavaScript 和原生之间通信，在有些场景可能会导致卡顿。

另外就是，渲染还是在 Native 层、要求开发人员对 Native 有一定的熟悉度

架构

从上到下分别是

• JS 层
• JSI
• C++层:JSCore 引擎，JSBridge 等
• Native 层：OC(iOS)/JAVA(Android)

React Native 主要有 JSI、Fabric、TurboModules 组成

JSI 是 Javascriptlnterface 的缩写，一个用 C++写成的轻量级框架，它作用就是通过 JSI，JS 对象可以直接获得 C++对象(Host Objects)引用，并调用对应方法。

有了 JSI，JS 和 Native 就可以直接通信了,调用过程如下:JS->JSI->C++->ObiectC/Java

优势

技术

iOS 和 Android 甚至 HTML5 只编写一套代码

性能方面与 Native 几乎相同

动画方面，RN 提供了非常流畅的动画，因为在渲染之前代码已经转化为原生视图

效率

调试时，无需每次代码都要用编译器打包 build，可即时查看更改

iOS Android 2 人力变更成 1 人力

发版

• 支持热更新，不用每次发版都发布应用商店
• 发版时间自由控制，支持 iOS 和 Android 两平台同一时间发布