[ReactNative翻译]使用移动专用库优化 React Native 应用程序的电池损耗

Sunbreak
114 阅读5分钟

以下文章是《React Native 优化终极指南》的一部分，介绍了使用移动专用库的影响。

为什么这很重要？

React Native 可让您完全控制并自由选择构建应用程序的方式。它允许您使用 JavaScript 编写代码，重用当前的 React 组件并使用各种库。但您需要记住的是，并非每个库都针对移动进行了优化。使用未经优化的库可能会导致一些严重的性能和用户体验问题，从而对项目的业务产生负面影响。在本文中，我们将告诉您如何避免此类问题，并为您的应用程序选择正确的库。

在基于《React Native 优化终极指南》的其他博文中，我们将讨论以下与通过了解 React Native 实现细节来提高性能相关的主题：

为您的应用程序选择正确的外部库 在原生和 JavaScript 之间找到平衡 以 60FPS 制作动画 使用高阶组件提高 React Native 性能 优化 React Native 应用程序的 JavaScript 捆绑程序

请务必查看这些内容。现在，让我们深入了解选择移动专用库的最佳实践。

为什么网络库对移动应用程序没有好处？

React Native 最棒的一点是，您可以使用 JavaScript 编写移动应用程序，重用您的一些 React 组件，并使用您最喜欢的状态管理库来完成业务逻辑。

虽然 React Native 提供了与网络类似的功能，以实现与网络的兼容性，但重要的是要明白它与网络环境不同。它有自己的一套最佳实践、速赢和限制。

例如，在开发网络应用程序时，我们不必过于担心应用程序所需的总体 CPU 资源。毕竟，大多数网站都是在插入网络或配备大容量电池的设备上运行的。

不难想象，移动设备则不同。各种不同的设备拥有不同的架构和资源。大多数情况下，它们都是使用电池运行的，而应用程序造成的耗电量可能是许多开发人员的决定性因素。

image.png

换句话说，如何优化前台和后台的电池消耗会产生很大的影响。

不使用移动优化库会导致电池耗尽并减慢应用程序的运行速度

虽然 React Native 可以在移动设备上运行与浏览器相同的 JavaScript，但这并不意味着您每次都应该这样做。任何规则都有例外。

如果库在很大程度上依赖于网络，例如实时消息，或者能够渲染高级图形（三维结构、图表），那么您很可能最好使用专用的移动库。

移动程序库首先是在网络环境下开发的，假定了浏览器的功能和限制。使用网络版的流行 SDK 很可能会导致额外的 CPU 和内存消耗。

众所周知，某些操作系统（如 iOS）会不断分析应用程序消耗的资源，以优化电池寿命。如果您的应用程序注册执行后台活动，而这些活动占用了太多资源，那么您的应用程序的运行间隔可能会被调整，从而降低您最初注册的后台更新频率。

使用专用的特定平台版本库来优化 React Native 应用程序

让我们以 Firebase 为例。Firebase 是 Google 推出的一个移动平台，可以让您更快地构建应用程序。它是一个工具和库的集合，可以在您的应用程序中即时启用某些功能。

Firebase 包含分别用于网络和移动（iOS 和 Android）的 SDK。每个 SDK 都支持实时数据库。

image.png

得益于 React Native，您可以顺利运行其网络版：

import { getDatabase, onValue, ref } from "firebase/database";

const database = getDatabase();

onValue(ref(database, "/users/123"), (snapshot) => {
  console.log(snapshot.val());
});

‍ 在 RN 中从 Firebase 实时数据库读取数据的示例

然而，您不应该这样做。虽然上述示例可以正常运行，但其性能却无法与移动版相提并论。SDK 本身包含的功能也较少。这并不奇怪，网络是不同的，Firebase.js 没有理由提供对移动功能的支持。

在这个特殊的例子中，最好使用专用的 Firebase 库，它可以在专用的本地 SDK 上提供一个薄层，并提供与其他本地应用程序相同的性能和稳定性。

image.png

下面是上述示例的样子：

import database from "@react-native-firebase/database";

database()
  .ref("/users/123")
  .on("value", (snapshot) => {
    console.log(snapshot.val());
  });

‍ 从 RN 中的 Firebase 实时数据库读取数据的示例

正如你所看到的，差异微乎其微，只是导入语句不同而已。在这种情况下，库作者很好地模仿了 API，减少了在网页和移动上下文之间来回切换时可能产生的混乱。

仔细挑选库，在不影响电池寿命的情况下提供性能最强的支持

React Native 的核心是让您可以控制并自由选择如何构建应用程序。对于简单的事情和最大程度的可重用性，您可以选择使用 Web 版本的库。这将使您以相对较低的成本获得与浏览器相同的功能。

对于高级用例，您可以通过本地功能轻松扩展 React Native，并直接与移动 SDK 对话。React Native 之所以具有极高的通用性和企业就绪性，就在于它的这种 "逃生门"。

它能让你在不影响性能和用户体验的情况下，同时在多个平台上更快地构建功能，而这正是其他混合框架需要权衡的标准。

在性能方面需要帮助？请联系我们！

如果您正在为提高应用程序性能而苦恼，请联系我们。

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

www.deepl.com 翻译

avatar
文章
阅读
粉丝