[ReactNative翻译]为什么值得使用 "自动链接 "来自动管理依赖关系?

369 阅读8分钟

本文由 简悦 SimpRead转码,原文地址 www.callstack.com

当您自动进行依赖关系管理时,您就可以全神贯注地开发应用程序。了解更多......

以下文章是React Native 优化终极指南的一部分,介绍了如何通过自动链接实现依赖关系管理自动化。

自我们的性能优化指南首次发布以来,这篇文章经历了重大更新,现在,您正在阅读的是其旧版本。要访问最新更新的内容,请下载我们的性能优化指南并查看 避免未使用的本地依赖关系 章节。

为什么这很重要?

有时,向 React Native 应用程序添加新包可能会导致本机代码出现问题。此外,这一过程可能比您之前估计的更耗时。这就是为什么您可能想了解如何使用自动链接来自动化依赖关系管理,从而使这一过程更快、更高效,并且对应用程序的本机代码无害。

在基于《React Native 优化终极指南》的其他博文中,我们将讨论以下与性能相关的主题:

请务必查看这些内容。现在,让我们进入正题。

使用自动链接自动管理依赖关系

问题: 手动添加库或使用过时的 react-native 链接

与 npm 上的大多数软件包不同,React Native 库通常不仅仅由 JavaScript 代码组成。根据所提供功能的类型,它们可能包含用于 Android 和 iOS 平台的额外本地代码。

例如,react-native-fbads 是一个 React Native 模块,用于与底层的 Facebook SDK 交互,顾名思义,就是在应用程序中显示广告。为此,该模块提供了 JavaScript 代码,允许您从 React Native 领域调用 SDK。此外,它还提供了 Objective-C(iOS)和 Java(Android)原生模块,可将 JavaScript 调用代理到适当的 Facebook SDK 部分。它还要求 Facebook SDK 必须存在于您的应用程序中。换句话说,它让您自行安装。

从历史上看,React Native 并没有为类似情况提供开箱即用的解决方案。我们鼓励开发者遵循特定平台的最佳实践。

在 Android 上,建议使用 Gradle,这已经是 Android 社区的首选平台。React Native 使用 Gradle 构建源代码并拉取自己的依赖关系,这自然会促使所有社区软件包遵循相同的策略。

而在 iOS 上,情况则要复杂一些。默认情况下,React Native 项目并不使用任何复杂的工具来管理依赖关系,而是由你自己拉取依赖关系。一些社区模块开始使用 CocoaPods,它类似于 Gradle,因为它能构建项目并提供适当的依赖关系管理。遗憾的是,CocoaPods 与所有 React Native 项目默认的依赖关系管理方式并不兼容。

React Native 试图通过引入 react-native link 来部分解决这个问题,这是一个 CLI 命令,一旦运行,就会尝试为你执行所有必要的步骤。它会在配置文件中进行天真的查找和替换,并尝试添加所需的软件包。

不幸的是,总是有可能遇到与你管理依赖关系的方式不兼容的依赖关系。在这种情况下,唯一的解决办法就是迁移到一个能正常工作的系统。光是这项任务就不容易--它需要大量与本地相关的知识和对构建系统的了解。如果您曾经升级到引入了某些原生变更的 React Native 版本,您就会完全明白我们在说什么。

随着时间的推移,CocoaPods 开始在社区中越来越流行。最终,React Native 决定改用 CocoaPods,并将其作为管理 iOS 外部依赖关系的默认方式。

因此,iOS 和 Android 现在都有了功能齐全的依赖关系管理解决方案。得益于此,开发人员可以使用类似 npm 的工具来提取依赖关系,而不用手动下载文件并将其放在磁盘上的某个地方。

虽然这有助于解决添加外部原生依赖关系时的混乱问题,但在简单的 yarn add 之后,仍然需要运行额外的步骤。

由于 Gradle 和 CocoaPods 都有公共 API 可以用来操作项目,React Native 团队很快就发布了一项名为自动链接(autolinking)的功能。它能自动执行上述所有步骤,并消除 React Native 包和 JavaScript 包之间的差异。

$ yarn add react-native-fbads

安装 React Native 软件包应该与安装普通 JavaScript 库没什么区别

长话短说,如果你在安装 React Native 模块后还需要执行额外的步骤,那么你应该继续读下去!

代码库更难升级和维护,你需要花费更多时间添加额外的包

如果您仍在按照上述 "传统方式 "管理依赖关系,那么您就会错过构建改进和自动化。因此,尝试新的依赖关系变得更具挑战性,而且需要更长的时间来设置它们。当开发人员将某些库迁移到新的构建系统时,它们甚至会停止工作。

此外,您还需要花更多时间升级到较新的 React Native 版本,因为有大量原生依赖项和原生代码需要修改和升级。

新系统基于专用的原生构建工具,如 CocoaPods 和 Gradle。正因为如此,它能为你处理许多细致的步骤。

解决方案: 改用自动链接(基于 CocoaPods/Gradle)

自动链接(Autolinking)是一种管理本地依赖关系的新方法,它的设计完全透明,无需任何额外工作。它非常容易集成,并能钩住您必须自己处理的地方。

它对 iOS 和 Android 的工作原理相同。本节将重点讨论 Android。

在这里,我们将重点讨论 Android。

app/settings.gradle

之前

rootProject.name = 'HelloWorld'
 
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
 
include ':app'

之后

rootProject.name = 'HelloWorld'
 
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); 
applyNativeModulesSettingsGradle(settings);
 
include ':app'

app/build.gradle

之前

dependencies {
    compile project(':react-native-fs')
 
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

之后

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}
 
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesAppBuildGradle(project)

MainApplication.java

之前

import com.rnfs.RNFSPackage;
 
...
 
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new RNFSPackage()
  );
}

之后

import com.facebook.react.PackageList;
 
...
 
@Override
protected List<ReactPackage> getPackages() {
  return new PackageList(this).getPackages();
}

与其让 Gradle 知道你正在使用的每个软件包的详细信息,不如用一行调用 React Native CLI 的代码来代替软件包列表。这个小助手会检查 package.json 中可能存在的 React Native 包,并自动执行必要的操作。

下面是一个例子: 在 build.gradle 中,调用 React Native CLI 会生成一个包数组,然后将其注册到管道中。值得注意的是,路径是根据源文件的位置动态计算的。因此,现在默认支持所有不同的非标准架构,包括流行的 monorepos。

autolinking 的另一大特点是,它会为你生成安卓系统上的软件包列表。有了它,所有由外部依赖关系定义的软件包都会自动注册,而无需打开 Android Studio 学习如何在 Java 中导入软件包。

这里的原理很简单--你不必知道正在下载的库包括哪些内容。对于最好奇的开发人员来说,探索这些细节的可能性应该是一个选项。

优点:可以快速添加新软件包,无需担心本地代码问题

总之,按照我们在这里描述的方式自动进行依赖关系管理对移动应用程序的开发过程有着巨大的积极影响。有了自动链接,您就可以忘掉普通 JavaScript 包和 React Native 包之间的所有差异,专注于构建应用程序。

您不必再担心外部依赖关系或额外的构建步骤,包括拉取 SDK 或链接资产。

从长远来看,这种方法易于维护且升级速度快,因此您会非常喜欢。CocoaPodsGradleReact Native CLI帮助程序可确保设置 autolinking 和在应用程序中使用它所需的知识尽可能基础,并确保 JavaScript 开发人员易于掌握。

摘要

总之,按照我们在这里介绍的方法自动进行依赖关系管理对移动应用程序开发过程有着巨大的积极影响。除了编码之外,它还能让维护工作变得更容易,并提高升级速度。此外,这种解决方案还能让开发人员的工作更加省时高效,因为他们只需关注应用程序的构建过程。

在本指南的下一部分,我们将告诉你如何使用 Hermes 优化安卓应用程序的启动时间。

需要性能方面的帮助?请联系我们!

如果你正在为提高应用程序性能而苦恼, 与我们联系.

我们是 Meta 和 Vercel 的官方合作伙伴,也是社区的积极贡献者。我们已经为从初创公司到企业的数十家国际客户提供了高质量的解决方案。如果您有任何 React Native 开发 需求,我们都能满足您。