关于新 React Native 架构的一切 2023 更新

yanding 2023-05-31 317

在我们开始新的React Native 架构之前,让我们了解一下 React Native 的现有架构。我们知道 React Native 的单线程性,它的主要 3 个线程,即 Javascript 线程、主线程和影子线程之间没有直接通信,它们主要通过异步 JSON 线程通过桥。

现在,Bridge 在线程之间的这种通信中起着至关重要的作用,因此存在依赖性、不确定性和延迟。为了克服这种依赖性,需要 React Native 新架构。

关于新 React Native 架构的一切 2023 更新

让我们看看采用新的React Native 架构的累积原因。当前 React Native 架构的缺点是

  • React Native 应用程序中线程间通信桥的依赖性。

  • 可序列化的桥需要额外的复制,而不是在应用程序线程之间共享内存。

  • 异步模型不能确保消息在目的地的传递时间。

  • 数据传输异常缓慢。

  • 由于异步 UI 更新导致意外的页面跳转。

2018年第二季度开始,由于RN刚上线,react native的重构正在规划中。

关于新 React Native 架构的一切

为了增强和克服 React Native 旧架构的缺点,新架构 React Native V 0.70 最近于 2022 年 10 月推出,增加了框架的性能和灵活性。

新架构中保持不变的一件事是 Javascript 引擎 Hermes,它针对React Native 应用程序变得更加优化。


随着重新设计的 React Native 架构继续发展,越来越多的信息变得容易访问和公开。从根本上说,这个备受期待的新设计旨在提高性能,使其更接近原生应用程序,并促进 React Native 框架与基于 Javascript 的混合框架的集成。

想要利用 New React Native Architecture 的高级功能?
聘请我们的 React Native 开发人员,他们将带来最好的 React 生态系统,让您的跨平台移动应用程序脱颖而出。

以下是 React Native 重构中的关键元素,我们称它们为支柱元素。

关于新 React Native 架构的一切 2023 更新

织物

Fabric 是一个误称,经常被用来指代整个新的 React Native 架构。实际上,Fabric 只说明了整个结构中的一层,即UI 层。

一开始,Fabric 可以在 UIManager 的帮助下在 C++ 中直接创建 Shadow 树,从而通过消除在线程之间移动的必要性来增强 UI 交互性。

此外,Fabric 利用 JSI 向 Javascript 端公开 UI 功能。这导致两端直接交互,而不是通过 Bridge 与 Javascript 端连接。Javascript 端可以优先处理时间敏感的 UI 任务,并在任何其他任务之前同时执行它们。所有功劳都归功于此控件,它为 UI 端启用了优先队列。

涡轮模块

本质上,Turbomodules 是具有新实现和行为的旧 Native 模块。

Turbomodules 的最佳特性是它们是延迟加载的。换句话说,这意味着 Javascript 代码只会根据需要加载每个模块并维护对它的显式引用。对于具有大量本机模块的程序,这可以大大减少启动时间。

代码生成器

Codegen 是新 React 设计的另一个实用组件。RN 程序将自动检查 Javascript 和 Native 线程之间的同步和互操作性。在此,与运行时相比,在构建时将生成更多本机代码。

Turbomodules 和 Fabric 使用的接口组件将由 Codegen 定义。所有这一切都是为了消除重复代码的需要,并且能够毫无疑问地更快地传输数据,因为不再需要在每次迭代时进行数据验证。

无桥

现在,我们想知道在我们对新建筑的初步印象之后,这座桥发生了什么。使用重新设计的 Javascript 接口 (JSI) 组件逐步替换 Bridge 是新架构的主要目标之一。

虽然很清楚为什么要从新的 React Native 中完全删除 Bridge,但主要原因是它造成了不必要的问题和对是否接收到数据和/或相当大的延迟的怀疑。

将完全取代 Bridge 的层称为 React Native JSI 或 Javascript 接口。主要目标是在不需要 Bridge 作为中间步骤的情况下实现 Javascript 和 Native 端之间的通信。

JS 包与 JSC 的独立性是 JSI(Javascript 核心)使之成为可能的一种修改。这意味着不同的 Javascript 引擎,如 Chrome 引擎 V8,最终可能会取代 JSC 引擎。

此外,通过使用 JSI,Javascript 将能够通过保存对 C++ 主机对象的引用并调用它们的方法来显式识别 Native 组件并与之连接。

想要开发令用户惊叹的业务应用程序?
我们的 React Native 开发人员利用新的架构模式通过快速开发实现您的目标。我们是实现您的业务目标的理想React Native 应用程序开发公司。

好吧,在我们考虑迁移之前,这里是新架构的出现方式。

关于新 React Native 架构的一切 2023 更新

如何迁移到新的 React Native 架构?

要将 React Native 应用程序更新到最新版本,您可能需要迁移到新的 React Native 架构。让我们从最初的优先事项开始。

您需要特定版本的 React Native 应用程序才能更轻松地进行更新。您需要一个 React nightly 版本来访问最新的更改,并且您最终必须升级到最新的 React Native 稳定版本 (0.67.2)。

接下来,找到最新的 React Native 并安装它。稍后我们可以继续进行特定于操作系统的改进。

对于 Android,您可以在更新到最新的 Gradle 版本后安装最新的 React Gradle 插件。现在,问题是如何?这很简单!直接使用 React Native 参考指南中的代码。对于 iOS,在 iOS 构建选项中打开 C++ 语言功能支持。

仅此而已。接下来,问题来了,React Native Applications到底是怎么迁移的呢?

有很多,但有两种主要的迁移方法,或者我们只说两个存储库。

在一种情况下,您只需要从前者过渡到更新者。而在另一种情况下,除了确保旧的仍然可以使用之外,您还可以从创建新的开始。让我们一起看看他们两个。

1.RNNewArchitectureApp

这是第一个。它涉及从旧的过渡到新的。您需要做的就是从最新的 React Native 0.67 版本中获取原生组件,并将它们应用到新的 React Native 架构中。

每个提交都经过单独的迁移过程。每个分支都演示了不同 React Native 版本之间的转换。这些部分在主分支中通读。

2.RNNewArchitectureLibraries

此方法逐步演示了 TurboModule 和 Fabric 组件的创建。与第一种方法不同,这些分支主要用于创建,而不是用于转换。

那么,一旦建立了新的库和模块,会发生什么呢?一般来说,它最终归结为保持与早期版本的 React Native 部件的兼容性。

结论

事实证明,React Native 是跨平台现代商业应用程序的绝佳选择。新的 React Native 架构只会增加框架的优势。添加到使用 React Native 构建的超过 34,000 个应用程序的列表中,并在市场上对您的业务进行排名。

言鼎科技)专做软件开发,微信小程序,网站开发,软件外包,手机APP开发,欢迎资讯!

The End