在 React Native 中原生实现动态导入

前端小智@大迁世界

发布于 2024-02-21 11:04:05

1670

发布于 2024-02-21 11:04:05

在React Native社区中，原生动态导入一直是期待已久的功能。在React Native 0.72 版本发布之前，只能通过第三方库和其他变通方法实现动态导入，例如使用 React.lazy() 和 Suspense 函数。现在，动态导入已经成为React Native框架的原生部分。

在这篇文章中，我们将比较静态和动态导入，学习如何原生地处理动态导入，以及有效实施的最佳实践。

静态导入 vs. 动态导入

在深入研究实现细节之前，理解什么是动态导入以及它们与静态导入有何不同是至关重要的，静态导入是在JavaScript中包含模块的更常见方式。

静态导入是你在文件顶部使用 import 或 require 语法声明的导入。这是因为在应用程序启动时，它们可能需要在你的整个应用程序中可用。

这是一个例子：

import React from 'react';
import {View, Text} from 'react-native';
const MyComponent = require('./MyComponent');

静态导入是同步的，意味着它们会阻塞主线程，直到模块完全加载。这种行为可能导致应用程序启动时间变慢，特别是在较大的应用程序中。然而，当一个库或模块在代码库的多个时间或多个地方需要时，静态导入就会显得非常有用。

相比之下，动态导入赋予开发者在需要时即时导入模块的能力，引领了一个异步范式。这意味着代码是按需加载的。

总的来说，静态导入和动态导入的主要区别在于，静态导入在编译时解析，而动态导入在运行时解析。

在 React Native v0.72 版本之前，动态导入并不是开箱即用的支持，因为它们与 Metro 打包器不兼容，Metro 打包器负责在 React Native 应用程序中打包 JavaScript 代码和资产。

Metro 打包器不允许任何运行时更改，并通过移除未使用的模块并用静态引用替换它们来优化包大小。这意味着 React Native 开发者必须依赖第三方库或自定义解决方案来在他们的应用中实现动态导入。我们将在本文后面探讨这些。

如何在React Native中原生实现动态导入

要在 React Native中使用原生动态导入，你需要安装0.72或更高版本的React Native。你可以通过在终端运行 npx react-native --version 来检查你的React Native版本。你还需要在你的项目中配置0.66或更高版本的Metro打包器。

React Native 中使用原生动态导入有两种方式：使用 import() 语法或使用 require.context() 方法。

使用 import() 语法

根据Metro Bundler官方文档：

import() 调用在开箱即用的情况下得到支持。在React Native中，使用 import() 会自动分割你的应用程序代码，使其在开发过程中加载速度更快，而不影响发布构建。

import() 语法与静态 import 关键字相似，但你可以在代码的任何地方使用它，只要你处理好 promise 的解决和拒绝。

例如，假设你有一个名为 SomeComponent 的组件，你希望根据某些条件动态加载它。你可以像这样使用 import() 语法：

const loadSomeComponent = async () => {
  try {
    const SomeComponent = await import('./SomeComponent');
    // Do something with SomeComponent
  } catch (error) {
    // Handle error
  }
};

// Use SomeComponent conditionally
if (someCondition) {
  loadSomeComponent();
}

注意：你需要在 async 函数内使用 await 关键字来等待promise 的解决。或者，你可以使用 .then() 和 .catch() 方法来处理 promise 的解决和拒绝。

使用 require.context() 方法

require.context() 方法现在是 Metro 打包器的一个支持特性，允许你为动态导入创建一个上下文。这个特性是由 Evan Bacon 添加到Metro库中的。

context 是一个包含与给定模式匹配的一组模块或组件信息的对象。你可以使用 require.context() 方法来创建这样的上下文：

// Create a context for all components in the ./components folder
const context = require.context('./components', true);

require.context() 方法的第一个参数是你想要查找模块或组件的基础目录。第二个参数是一个布尔值，表示你是否想要包含子目录。

有了 require.context ，你现在可以根据变量或正则表达式进行导入。

这是一个示例，展示了如何使用 require.context 从文件夹中导入所有图片并将它们显示在列表中：

// App.js
import React from 'react';
import {FlatList, Image, StyleSheet} from 'react-native';

// Import all the images from the assets/images folder
const images = require.context('./assets/images', true, /\.png$/);

// Create an array of image sources
const imageSources = images.keys().map((key) => images(key));

const App = () => {
  // Render each image in a flat list
  return (
    <FlatList
      data={imageSources}
      keyExtractor={(item) => item}
      renderItem={({item}) => <Image style={styles.image} source={item} />}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
    margin: 10,
  },
});

export default App;

React Native v0.72引入了通过 require.context 方法支持动态导入，这与webpack提供的方式类似。

但是 require.context 一直以来都被Expo路由器在后台使用，以根据文件目录结构和你拥有的文件自动创建路由。它使用一个带有正则表达式的 require.context 调用，所有的路由都可以在运行时被确定。

例如，如果你有一个名为 app/home.tsx 的文件，它将变成一条路径为 /home 的路由。如果你有一个名为 app/profile/settings.tsx 的文件，它将变成一条路径为 /profile/settings 的路由。

例如，如果你有一个名为 app/home.tsx 的文件，它将成为一个路径为 /home 的路由。如果你有一个名为 app/profile/settings.tsx 的文件，它将成为一个路径为 /profile/settings 的路由。

因此，你无需手动定义或导入你的路由——Expo Router会为你完成！

实现动态导入的第三方解决方案

使用 React.lazy() 和 Suspense

React.lazy() 和 Suspense 是React的特性，允许你懒加载组件，也就是说，只有当它们被渲染时才会加载。你可以使用 React.lazy() 函数来创建一个包装动态导入的组件，你可以使用 Suspense 来显示一个备用组件，而动态导入正在加载。

这是一个例子：

import React, { lazy, Suspense } from "react";
import { Text, View } from "react-native";
import { styles } from "./styles";

const DynamicComponent = lazy(() => import("./DynamicComponent"));

function App() {
  return (
    <View style={styles.container}>
      <Suspense fallback={() => <Text>Loading ....</Text>}>
        <DynamicComponent />
      </Suspense>
    </View>
  );
}
export default App;

在你的React Native应用程序中，使用 React.lazy() 和 Suspense 是实现动态导入的好方法。然而，需要注意的是 React.lazy() 是专门为 React 组件的代码分割设计的。如果你需要动态导入非组件的 JavaScript 模块，你可能需要考虑其他方法。

可加载组件

Loadable Components是一种将你的React Native代码分割成可以按需加载的小块的方法。在React Native中，你可以使用react-loadable库来动态加载和渲染组件。

import Loadable from 'react-loadable';

// Define a loading component while the target component is being loaded
const LoadingComponent = () => <ActivityIndicator size="large" color="#0000ff" />;

// Create a dynamic loader for the target component
const DynamicComponent = Loadable({
  loader: () => import('./YourComponent'), // Specify the target component path
  loading: LoadingComponent, // Use the loading component while loading
});

// Use the dynamic component in your application
function App() {
  return (
    <View>
      <DynamicComponent />
    </View>
  );
}

在这段代码中：

从 react-loadable 库中导入 Loadable 函数
定义一个加载组件（例如，一个 ActivityIndicator ），在目标组件加载时将会显示。
使用 Loadable 函数创建一个动态组件。为 loader 属性提供一个导入目标组件的函数（将 './YourComponent' 替换为组件的实际路径），并指定 loading 属性以在加载过程中显示加载组件。
最后，在你的应用的用户界面中使用 DynamicComponent 。它将动态加载目标组件，并在准备就绪后显示它，同时显示加载组件。

这个库最初是为React网页应用设计的，所以它可能并不总是在React Native中运行得很好。

React Native中动态导入的好处

动态导入为开发者提供了几个优势：

更快的启动时间：通过只按需加载所需的代码，动态导入可以显著减少你的应用启动所需的时间。这对于提供流畅的用户体验至关重要，尤其是在设备或网络较慢的情况下。
提高代码可维护性：动态导入可以通过让你将不常用的组件或库分离到单独的模块中，更有效地组织你的代码库。这可以提高代码的可维护性，使得在你的应用的特定部分工作变得更容易。
渐进式加载：动态导入支持渐进式加载。你可以优先加载关键组件，而不是强迫用户等待整个应用程序的加载，同时在后台加载次要功能。这确保了用户的初始体验无缝，同时你的应用程序的不太重要的部分在后台加载，保持用户的参与度。
优化的包：动态导入允许你通过将它们分割成更小、更易管理的块来优化你的JavaScript包。这可以导致包大小的减小，从而减少应用程序的内存占用并加速加载过程。

使用动态导入的最佳实践

谨慎使用动态导入：动态导入并非能解决你所有性能和用户体验问题的灵丹妙药。它们带来了一些权衡，如增加的复杂性，潜在的错误，以及对网络连接的依赖。因此，你应该只在必要时使用它们，而不是过度使用它们。
使用加载指示器和占位符：加载指示器可以向用户显示应用正在动态加载一些模块以及需要多长时间。占位符可以向用户展示当模块加载完成后应用会是什么样子，并防止布局变动或空白空间。你可以使用像 ActivityIndicator 或 Skeleton 这样的React Native内置组件，或者像 react-native-loading-spinner-overlay 或 react-native-skeleton-placeholder 这样的第三方库来实现这个目的。
使用错误边界和回退：在使用动态导入时，你应该使用错误边界和回退来处理错误和失败。错误边界是可以捕获并处理其子组件中的错误的组件。回退是在原始组件无法加载或渲染时可以渲染的组件。你可以使用像React中的 ErrorBoundary 这样的内置组件，或者像 react-error-boundary 或 react-native-error-boundary 这样的第三方库来实现这个目的。