Vue3 Native

因为 React Native 的产物是 bundle 文件,其实本质上就是 JS 代码, 在 App 启动的时候就会去服务器上获取 bundle 文件,我们只需要更新 bundle 文件, 从而使得 App 不需要重新前往商店下载包体就可以进行版本更新,开发者可以在用户无感知的情况下进行功能迭代或者 bug 修复。 但是值得注意的是,AppStore 禁止热更新的功能中有调用私有 API、篡改原生代码和改变 App 的行为。

JavaScriptCore 是 JavaScript 引擎,通常会被叫做虚拟机,专门设计来解释和执行 JavaScript 代码。 在 React Native 里面,JavaScriptCore 负责 bundle 产出的 JS 代码的解析和执行。

React Native 需要一个 JS 的运行环境,因为 React Native 会把应用的 JS 代码编译成一个 JS 文件(x x.bundle), React Native 框架的目标就是解释运行这个 JS 脚本文件,如果是 Native 拓展的 API, 则直接通过 bridge 调用 Native 方法,最基础的比如绘制 UI 界面,映射 Virtual DOM 到真实的 UI 组件中。

业务代码-react代码-js虚拟机-原生桥-原生

JavaScript 代码只要将变量暴露在 JS 上下文全局,Native 就能获取到,并运行 JS 的代码。

JavaScript 调用 Native,首先需要在 Native 端,将一个变量暴露在 JS 上下文全局,在 JavaScript 全局变量里面就能获取到并执行这个方法。

JS 不会直接引用 Native 层的对象实例,Native 也不会直接引用 JS 层的对象实例(在 React Native 里所有 Native 和 JS 互调都是通过 Bridge 层的几个最基础的方法衔接的)。

理论上,任何原生代码能实现的效果都可以通过 Bridge 封装成 JS 可以调用的组件和方法, 以 JS 模块的形式提供给 RN 使用。

Hermes 是 Facebook 在 2019 年发布的新一代 JS Engine。

原生项目如果想用 React Native,那么就需要用到 RCTRootView,它是 React Native 加载的地方,可以把它看作是一个容器。

Native 可以把原生方法暴露到全局,同样的 JS 也可以把方法暴露给 Native,但是 React Native 并没有这样做, 原因之一是这样会导致大量的全局变量污染,所以为了规范这个通信过程,React Native 自己实现了 Bridge。