React Native使用什么来允许JavaScript在iOS和Android上以本机方式执行

What does React Native use to allow JavaScript to be executed on iOS and Android natively?

本文关键字：Android iOS 执行 方式 本机 JavaScript Native 什么 React      更新时间：2023-09-26

React Native在与iOS和Android的接口中使用了什么？Cordova使用WebView在本地容器内有效地显示网页；React Native是否使用相同的方法？如果没有，它使用什么方法？

正如您所注意到的，React Native不是基于Cordova的。这不是一个看起来像是一个应用程序塞进WebView的网站。

React Native使用JavaScript运行时，但UI不是HTML，也不使用WebView。您可以使用JSX和React Native特定组件来定义UI。

它提供了本机级别的性能和外观，但有些UI部分必须针对iOS和Android单独配置。例如，工具栏完全不同，但两个操作系统的TextInput可以相同。

有关新的更新，请参阅@f4z3k4s答案

React Native应用程序由两部分组成：Native部分和Javascript部分。

运行Javascript

React Native在Android/iOS模拟器和设备上使用JavaScriptCore（Safari中的JavaScript引擎）。

在Android的情况下，React Native将JavaScriptCore与应用程序捆绑在一起。

在iOS的情况下，React Native使用iOS平台提供的JavaScriptCore。

将Javascript与本机部分进行通信

使用React Native桥接。它是一个负责Native和Javascript线程之间通信的层。它是用C++/Java编写的。

涉及的步骤

开发者运行react-native run-ios或react-native run-android 后

  1. React Native CLI生成一个节点打包器/捆绑器（metro），它将把javascript代码捆绑到一个单独的main.bundle.js文件中
  2. React Native CLI启动React Native应用程序，并首先加载该应用程序的本机入口点
  3. Native线程生成JavascriptCore线程
  4. Native线程现在通过RN桥发送消息来启动Javascript应用程序
  5. Javascript线程开始通过RN桥向Native线程发出指令。指令包括要加载的视图、要从硬件检索的信息等
  6. Native线程将执行这些操作，并将结果发送回Javascript线程，以确保操作已经执行

源

2022更新

由于React Native最近发生了很大变化，而且在不久的将来也会发生很大变化，我认为现在是时候更新这个答案了：

需要了解的新组件：

爱马仕：

React Native团队用C++开发了他们自己的Javascript引擎，名为Hermes。如果启用，Hermes将与您的应用程序一起作为执行Javascript的上下文（而不是JSC），承诺使您的应用捆绑包更小，应用执行更快。

JSI（Javascript接口）：

它是（理论上）任何JavaScript引擎的统一、轻量级、通用层。它在C++中实现，就像引擎一样，但与引擎解耦。这使得在JS线程上保存本地对象的引用成为可能，从而消除了对桥接器的需要，从而无需对所有内容进行字符串化，并使React native更快，因为字符串化是当前的瓶颈。它还使JS引擎之间的切换更加容易。由于JSI是用C++开发的，它使开发人员更容易在Android和iOS之间共享本地代码。例如，您可以用C++开发本地代码，通过JSI的帮助，从Javascript在iOS和Android上调用它。这两个平台都可以执行C++代码，iOS可以通过Objective C非常容易地使用它，因为它是C的超集。Android需要在Android NDK（Native Development Kit）和JNI（Java Native Interface，负责Java<=>C++翻译）的帮助下做更多的工作。

桥梁将分为两部分，阅读更多：

Turbo模块

这是一种与本机端交互的新方式，可与JSI互操作。它允许对包进行惰性初始化，从而缩短具有大量本地依赖关系的应用程序的启动时间。

结构渲染器

UI管理器的重新架构，可与JSI和Turbo模块互操作。Fabric取代了以前用于计算元素布局的Shadow Tree（或Shadow Thread）（它与桥接器相结合），它可以使用新的强大的JSI功能来渲染ui，而无需字符串化任何内容。这将提供真正的原生性能。

附加功能：

代码生成

通过使用类型化的JavaScript（Typescript或Flow）作为真相的来源，我们可以生成Fabric和TurboModules所需的接口文件。

原问题的新答案：

React Native在Javascript端使用React，允许开发人员开发应用程序。React Native使用Fabric作为渲染器，而不是HTML（即React在web上的渲染上下文），它是一个C++渲染器，最终在React Nation应用程序的UI线程（本机）上渲染真正的本机元素。与以前的模型不同，以前的模型使用UI线程和JS线程之间的桥接和字符串化来在两者之间传递数据，实现了一个新的适配器层，称为JSI，这使得在JS中保存C++对象的引用成为可能。因此，React Native应用程序的真相来源将保存在C++世界中，允许Native和JS端在两者之间共享数据，而无需以同步方式字符串化任何内容。

在iOS模拟器和设备上，Android模拟器和设备React Native使用JavaScriptCore，这是为Safari提供动力的JavaScript引擎。源

相关文章：