likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 30

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

前言

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

快速创建一个新架构的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，这里我主要选择不安装。

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

顺便提一下，从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，支持代码修改后热更新。运行成功后如下：

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

如果你想查看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包的版本，如下图：

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

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

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

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

Codegen

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

总结

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

转载自:https://juejin.cn/post/7397013935105310771
评论
请登录