React Native新架构系列-新架构介绍

news2024/9/9 1:34:08

从今天起，会陆续更新React Native新架构相关的系列内容，本系列基于React Native 0.73.4版本，从一名Android开发者的视角进行介绍。本系列介绍的内容默认读者对React Native有一定的了解，对基础的开发内容不再赘述。

前言

首先介绍一下React Native新架构的演进时间线，所有的内容来源于React Native团队的博客。

  • 2018年6月，在博客State of React Native 2018中首次提出了React Native团队在重新设计新的架构。

  • 2021年8月，在博客React Native in H2 2021中提出新架构准备开源，并且在Facebook内部，在H1已经迁移了1000多个应用页面到新架构。

  • 2022年3月，在博客An update on the New Architecture Rollout中提出2022年将是新架构正式开源的一年。

  • 2022年3月底，在博客Announcing React Native 0.68中介绍了React Native 0.68版本，这个版本算是新架构的第一个正式发布版本，该版本中提供了新架构的应用模板，开发者可以通过简单的开关控制选择开启新架构。

  • 2023年12月，在博客React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more中介绍了最新的React Native 0.73版本，改进了调试相关能力，同时将Kotlin作为Android侧的默认开发语言，也是当前最新的版本。

快速创建一个新架构的App

在最新的版本（0.73.4）中，创建一个React Native App并开启新架构的方式变的非常简单，只需要执行如下2步即可：

1.卸载旧的cli工具并通过npx创建一个React Native App

# 卸载掉旧的cli工具
npm uninstall -g react-native-cli @react-native-community/cli
# 通过npx创建一个项目
npx react-native@latest init ReactNativeSample

如果你需要在iOS模拟器或者真机上运行，可以安装CocoaPods，这里我主要选择不安装。

image-20240211111236653

顺便提一下，从0.71版本开始，React Native默认支持TypeScript。同时，新架构的App还将Hermes引擎作为默认JS引擎。

2.修改<项目根目录>/android/gradle.properties文件

将该文件中的newArchEnabled字段的值为true，便开启了新架构开关。

需要注意的是，0.73版本中，有以下的环境版本要求：

  • Node.js需要18.x
  • JDK 17

如果要运行该App，可以在命令行执行如下命令，前提是你已经按照官方环境变量设置文档配置好了相关的工具和环境变量。

yarn android

命令执行后会打开2个命令行窗口，一个会编译并安装Android App，另一个会启动一个server，支持代码修改后热更新。运行成功后如下：

image-20240211150502658

如果你想查看Android代码，可以使用AndroidStudio打开项目根目录下的android文件夹即可。

新架构带来的升级

对于新架构，主要的变动在于新的模块系统（即我们在React Native代码中调用原生平台API的能力）和新的渲染系统（即我们在React Native代码中使用原生平台UI组件的能力）。

新的JS引擎Hermes并不是新架构引入的特性，在Android React Native 0.60.4版本或者是iOS React Native 0.64版本上即可选择启动新的Hermes引擎。但直到React Native 0.70版本Hermes才作为默认引擎提供，所以我们也将其作为新架构的一部分进行介绍。

除此之外，在React Native的官方文档中还提到了Codegen，它是一个帮助我们生成大量重复代码的工具，并且在我们编译Android或iOS App时自动进行调用，一般无需刻意关注。

下面我结合官方文档对其分别进行简要的介绍，更加详细的介绍将在后续文章中更新。

JavaScriptInterface（JSI）

JSI是一个轻量级 API，本质上是一个Interface，用于约束C++代码和 JavaScript 引擎之间的操作接口，实现具体操作和引擎之间的解耦，下面介绍的API和组件在C++侧的操作都依赖于此，同时这样也方便我们灵活的切换底层JavaScript引擎。虽然JSI是在新架构稳定版本之前就存在，但由于其在新架构过程中扮演着重要的角色，所以这里也一并进行介绍。

新的模块系统Turbo Native Modules

在旧的React Native架构中，我们调用原生平台API的方式是通过Native Modules，我们调用的各种API能力都是通过其从JS侧调用到原生Android或者iOS侧。

例如下面的调用代码打开一个url：

import { Linking } from 'react-native';

Linking.openURL(url).catch(() => {
  // 跳转失败
});

实际上调用的是NativeModules这个对象上挂载的特定的方法，如下：

NativeModules['IntentAndroid'].openURL

新架构中提出的Turbo Native Modules是Native Module的升级版本，提供了一些额外的好处：

  • 跨平台一致的强类型接口。我们可以使用TypeScript来定义接口类型约束。
  • 允许使用C++编写代码，可以避免跨平台过程中的重复实现（例如：具体API实现可以全部使用C++代码编写来实现跨平台）。
  • 支持延迟加载模块，从而加快应用程序启动速度。
  • 使用JSI（JavaScript Interface）来使API调用通信更加高效。避免了之前的桥通信过程中的json字符串的序列化和反序列化操作。

新老架构在这部分的变动，对上层应用开发没有影响，几乎是无感知的，但对于开发自定义的API能力暴露给React Native侧调用，这部分变化较大，具体内容会在后面的文章中单独介绍。

新的渲染系统Fabric

在旧的React Native架构中，跟渲染系统相关的是UIManager，它负责来将我们在业务代码中写的标签映射到对应的原生组件实现，并管理其更新、移除等行为。一个具体的组件在原生侧都包含一个对应的具体组件以及一个Manager，例如下面使用Text组件：

import React from 'react';
import { Text } from 'react-native';

export function SampleText(): React.JSX.Element {
  return <Text>Sample</Text>;
}

对应到Android侧为RCTText和RCTTextManager这2个类分别负责Text组件的具体实现和管理。

新架构中提出的Fabric Native Component使用Fabric Render进行渲染处理，是传统Native Component的升级版本，提供了一些额外的好处：

  • 跨平台一致的强类型接口。我们可以使用TypeScript来定义组件类型约束。
  • 允许使用C++编写代码，可以避免跨平台过程中的重复实现。
  • 使用JSI（JavaScript Interface）来使组件通信调用更加高效，避免了之前的通信过程中的json字符串的序列化和反序列化操作。
  • 新的渲染系统支持对组件的同步测量和渲染（旧架构中这部分是异步进行的）。

新老架构在这部分的变动，对上层应用开发没有影响，几乎是无感知的，但对于开发自定义的组件暴露给React Native侧调用，这部分变化较大，具体内容会在后面的文章中单独介绍。

新的JS引擎Hermes

Hermes 是一个针对 React Native 优化的开源 JavaScript 引擎。与之前的 JavaScriptCore 相比，使用 Hermes 将缩短启动时间、减少内存使用量并减小应用程序大小。在React Native 0.70版本中，Hermes被作为默认引擎，无需额外配置即可启用它。

当然，你也可以选择在新架构中不启用Hermes，在Android侧，只需要在**<项目根目录>/android/gradle.properties**文件中修改如下一行配置：

hermesEnabled=false

由于有了之前介绍的JSI的存在，这种引擎切换对我们上层是无感知的。

你可以在运行时，通过下面的代码来判断Hermes引擎是否被启用：

const isHermes = () => !!global.HermesInternal;

需要注意的是，也正因为JSI的存在，JSI和Hermes接口之间是有耦合的。因为JSI定义的接口，对应到具体的引擎（例如Hermes）都需要进行实现，所以我们创建的React Native程序都会绑定一个特定版本的Hermes版本。最新的版本中，hermes引擎已经被作为一个aar包发布在maven仓库中。

虽然我们在**<项目根目录>/android/app/build.gradle**中依赖hermes时并没有指定具体aar包的版本，如下图：

image-20240213121453266

但它的版本会在React Native Gradle Plugin中被指定为特定的版本，以保证跟当前的React Native工程版本匹配。

关键代码在**<项目根目录>/node_modules/@react-native/gradle-plugin/src/main/kotlin/com/facebook/react/utils/DependencyUtils.kt**中，会读取特定的版本配置在依赖解析阶段进行解析配置，如下图：

image-20240213121928136

Codegen

Codegen是一个工具，当我们在开发自定义的Turbo Native Modules或者Fabric Native Component时，需要按照约定生成一些模板代码，就是由它来生成的。一般情况下它是被我们的编译构建工具（例如：Gradle）在编译时自动调用的，所以我们一般无需关心，具体的使用，我们在后续的文章中再进行更加详细的介绍。

总结

本文对React Native的新架构进行了简要的介绍，从创建一个新架构的App，到介绍新架构中涉及到的几个主要的升级，让大家对这部分内容有一个大致的了解，更加详细的内容会在后续的文章中陆续介绍。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1959138.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI绘画3分钟解决英文恐惧症，comfyui汉化插件

AI绘画3分钟解决英文恐惧症，comfyui汉化插件

前言 全面解析&#xff1a;Comfy UI汉化插件的安装与配置指南 本文涉及的工作流和插件&#xff0c;需要的朋友请扫描免费获取哦 引言 本文图片来源网络&#xff0c;侵权联删除。 在全球化的今天&#xff0c;软件界面的本地化是提升用户体验的重要一环。对于许多非英语母语的…
阅读更多...
辅听耳机芯片型号介绍—云信通讯

辅听耳机芯片型号介绍—云信通讯

辅听耳机系列芯片介绍&#xff1a; 杰理芯片型号&#xff1a; AC7003D / AC7006F 芯片特点&#xff1a; 1.内置啸叫抑制算法 2.内置辅听专用动态多段增益调节 3.内置人声增强和环境噪声压制算法 4.公版手机app开放定制服务&#xff0c;支持听力测试和个性化增益配置 5.支…
阅读更多...
WAAP替代传统WAF已成趋势

WAAP替代传统WAF已成趋势

数字化时代&#xff0c;Web应用和API已成为企业运营的核心。然而&#xff0c;随着网络攻击手段的不断进化&#xff0c;自动化攻击愈发频繁&#xff0c;传统的Web应用防火墙&#xff08;WAF&#xff09;已难以满足现代企业的安全需求。WAAP&#xff08;Web Application and API …
阅读更多...
Springboot手工艺品交易平台—计算机毕业设计源码11541

Springboot手工艺品交易平台—计算机毕业设计源码11541

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对手工艺品交易平台等问题&#xff0c;对手工…
阅读更多...
办公人导航-一个资源丰富的网站

办公人导航-一个资源丰富的网站

办公人导航是一个资源丰富的网站&#xff0c;旨在为办公人员提供各种优质资源和工具&#xff0c;以提高工作效率和生活质量。 ★★★★★办公人导航&#xff1a;https://www.bgrdh.com/ 这个网站涵盖了以下几个方面&#xff1a; 综合性的导航平台&#xff1a;办公人导航集成了…
阅读更多...
机械学习—零基础学习日志（高数15——函数极限性质）

机械学习—零基础学习日志（高数15——函数极限性质）

零基础为了学人工智能&#xff0c;真的开始复习高数 这里我们将会学习函数极限的性质。 唯一性 来一个练习题&#xff1a; 再来一个练习&#xff1a; 这里我问了一下ChatGPT&#xff0c;如果一个值两侧分别趋近于正无穷&#xff0c;以及负无穷。理论上这个极限值应该说是不存…
阅读更多...
虹科技术前沿 | TSN网络中时间感知整形器的性能验证实测

虹科技术前沿 | TSN网络中时间感知整形器的性能验证实测

来源&#xff1a;虹科技术前沿 | TSN网络中时间感知整形器的性能验证实测 原文链接&#xff1a;https://mp.weixin.qq.com/s/h3hTRAAEVN42DjDRifGxnA 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #时间敏感网络 #TSN #时间感知整形器 导读 本文旨在验证时间敏感…
阅读更多...
vscode搭建rust开发环境

vscode搭建rust开发环境

由于rustrover不是免费的&#xff0c;此处教学搭建一套基于vscode的rust开发环境&#xff0c;可运行&#xff0c;可调式 1.下载vscode1.91.1 Download Visual Studio Code - Mac, Linux, Windows 2.下载插件 打开网站下载插件 rust-analyzer-0.4.2049、vscode-lldb-1.10.0、…
阅读更多...
SQL数据库如何修改表中栏位的长度

SQL数据库如何修改表中栏位的长度

1.问题 已经建立的表中MEMO 栏位原来长度是20&#xff0c;随着使用需要将MEMO长度调整为200&#xff1b; 即 MEMO VARCHAR&#xff08;20&#xff09; → MEMO VARCHAR(200&#xff09; 2.修改办法 -- ALTER TABLE 表名 ALTER COLUMN 栏位名字 类型(长度);ALTER T…
阅读更多...
java通过poi解析word入门

java通过poi解析word入门

文章目录 介绍一、了解word docx文档的结构二、引入POI的依赖三、解析Word文档常用API加载Word文档获取文档整体结构获取文档中的段落获取文档中的表格获取文档中的脚注 四、解析Word中的段落示例五、读取Word文档并遍历图片六、解析Word中的图片示例 介绍 Apache POI 是一个处…
阅读更多...
6. 运行时数据区-程序计数器和栈帧

6. 运行时数据区-程序计数器和栈帧

运行时数据区分类 Java虚拟机在运行Java程序过程中管理的内存区域&#xff0c;称之为运行时数据区。运行时数据区分为两大类&#xff0c;线程共享和线程不共享&#xff0c;线程共享的有&#xff1a; 方法区堆 线程不共享的有&#xff1a; 程序计数器Java虚拟机栈本地方法栈…
阅读更多...
收银系统源码-会员营销

收银系统源码-会员营销

系统概况 专门为零售行业的连锁店量身打造的收银系统&#xff0c;适用于常规超市、生鲜超市、水果店、便利店、零食专卖店、服装店、母婴用品、农贸市场等类型的门店使用。同时线上线下数据打通&#xff0c;线下收银的数据与小程序私域商城中的数据完全同步&#xff0c;如商品…
阅读更多...
Luma AI发布文生视频大模型Dream Machine——可免费在线试玩

Luma AI发布文生视频大模型Dream Machine——可免费在线试玩

Sora模型的文生视频能力&#xff0c;想必一定惊艳过你。虽然Sora模型很惊艳&#xff0c;但是并没有开放给普通大众。Luma AI发布文生视频大模型Dream Machine模型&#xff0c;可以免费供大家使用&#xff0c;任何人只要到Luma AI的官方网站&#xff0c;就可体验Luma AI的文生视…
阅读更多...
vue3前端开发-小兔鲜项目-sku的实现

vue3前端开发-小兔鲜项目-sku的实现

vue3前端开发-小兔鲜项目-sku的实现&#xff01;这是一个会计学的特殊专业名词&#xff0c;可以理解为产品的型号&#xff0c;规格的货品计量单位。 它是一组数据的混合体。比如&#xff1a;尺寸&#xff0c;材料&#xff0c;品质&#xff0c;等等。组合在一起形成的一个混合数…
阅读更多...
Java——多态（Polymorphism）

Java——多态（Polymorphism）

一、多态 1、什么是多态 多态&#xff08;Polymorphism&#xff09;是面向对象编程的三大核心特性之一&#xff08;另外两个是封装和继承&#xff09;。多态性允许一个接口或基类的不同实现或子类以统一的方式处理。 二、方法多态 方法的多态性主要通过方法重载&#xff08…
阅读更多...
Git原理与用法系统总结

Git原理与用法系统总结

目录 Reference前言版本控制系统Git的诞生配置Git配置用户名和邮件配置颜色配置.gitignore文件 Git的基础用法初始化仓库克隆现有的仓库添加暂存文件提交变动到仓库比较变动查看日志Git回退Git重置暂存区 Git版本管理重新提交取消暂存撤销对文件的修改 Git分支Git分支的优势Git…
阅读更多...
2024年中小企业为何更需要找百度竞价托管代运营公司

2024年中小企业为何更需要找百度竞价托管代运营公司

企业间的竞争日益激烈&#xff0c;网络营销已成为企业获取市场份额、提升品牌知名度的关键途径。而在众多网络营销手段中&#xff0c;百度竞价推广因其高效、精准的特点&#xff0c;成为众多企业的首选。然而&#xff0c;随着市场竞争的加剧和百度竞价规则的不断调整&#xff0…
阅读更多...
值得细读的8个视觉大模型生成式预训练方法

值得细读的8个视觉大模型生成式预训练方法

大语言模型的进展催生出了ChatGPT这样的应用&#xff0c;让大家对“第四次工业革命”和“AGI”的来临有了一些期待&#xff0c;也作为部分原因共同造就了美股2023年的繁荣。LLM和视觉的结合也越来越多&#xff1a;比如把LLM作为一种通用的接口&#xff0c;把视觉特征序列作为文…
阅读更多...
年化27.9%，最大回撤-13.6%的可转债因子策略，结合机器学习特征筛选（附python代码）

年化27.9%，最大回撤-13.6%的可转债因子策略，结合机器学习特征筛选（附python代码）

原创文章第603篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 我们重新更新了可转债的全量数据&#xff0c;包含全量已经退市的转债。 ——这是与股票市场不一样的地方&#xff0c;股票退市相对少&#xff0c;而转债本身就有退出周期。 因此&…
阅读更多...
喝奶 (全脂 抵脂肪 脱脂 )

喝奶 (全脂 抵脂肪 脱脂 )

鲜牛奶就是全脂的. 婴儿配方奶粉, 脂肪含量就高 全脂牛奶通常口感更浓郁&#xff0c;适合许多人的口味偏好, 全脂牛奶含有较高的脂肪含量&#xff0c;这有助于提供能量和饱腹感,从而减少总体热量的摄入, 有研究指出&#xff0c;喝全脂牛奶的儿童超重或肥胖的风险可能比喝低脂…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023