在React Native社區(qū)中，原生動態(tài)導(dǎo)入一直是期待已久的功能。在React Native 0.72 版本發(fā)布之前，只能通過第三方庫和其他變通方法實現(xiàn)動態(tài)導(dǎo)入，例如使用 React.lazy() 和 Suspense 函數(shù)?，F(xiàn)在，動態(tài)導(dǎo)入已經(jīng)成為React Native框架的原生部分。

在這篇文章中，我們將比較靜態(tài)和動態(tài)導(dǎo)入，學(xué)習(xí)如何原生地處理動態(tài)導(dǎo)入，以及有效實施的最佳實踐。

靜態(tài)導(dǎo)入 vs. 動態(tài)導(dǎo)入

在深入研究實現(xiàn)細(xì)節(jié)之前，理解什么是動態(tài)導(dǎo)入以及它們與靜態(tài)導(dǎo)入有何不同是至關(guān)重要的，靜態(tài)導(dǎo)入是在JavaScript中包含模塊的更常見方式。

靜態(tài)導(dǎo)入是你在文件頂部使用 import 或 require 語法聲明的導(dǎo)入。這是因為在應(yīng)用程序啟動時，它們可能需要在你的整個應(yīng)用程序中可用。

這是一個例子：

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

靜態(tài)導(dǎo)入是同步的，意味著它們會阻塞主線程，直到模塊完全加載。這種行為可能導(dǎo)致應(yīng)用程序啟動時間變慢，特別是在較大的應(yīng)用程序中。然而，當(dāng)一個庫或模塊在代碼庫的多個時間或多個地方需要時，靜態(tài)導(dǎo)入就會顯得非常有用。

相比之下，動態(tài)導(dǎo)入賦予開發(fā)者在需要時即時導(dǎo)入模塊的能力，引領(lǐng)了一個異步范式。這意味著代碼是按需加載的。

總的來說，靜態(tài)導(dǎo)入和動態(tài)導(dǎo)入的主要區(qū)別在于，靜態(tài)導(dǎo)入在編譯時解析，而動態(tài)導(dǎo)入在運(yùn)行時解析。

在 React Native v0.72 版本之前，動態(tài)導(dǎo)入并不是開箱即用的支持，因為它們與 Metro 打包器不兼容，Metro 打包器負(fù)責(zé)在 React Native 應(yīng)用程序中打包 JavaScript 代碼和資產(chǎn)。

Metro 打包器不允許任何運(yùn)行時更改，并通過移除未使用的模塊并用靜態(tài)引用替換它們來優(yōu)化包大小。這意味著 React Native 開發(fā)者必須依賴第三方庫或自定義解決方案來在他們的應(yīng)用中實現(xiàn)動態(tài)導(dǎo)入。我們將在本文后面探討這些。

如何在React Native中原生實現(xiàn)動態(tài)導(dǎo)入

要在 React Native中 使用原生動態(tài)導(dǎo)入，你需要安裝0.72或更高版本的React Native。你可以通過在終端運(yùn)行 npx react-native --version 來檢查你的React Native版本。你還需要在你的項目中配置0.66或更高版本的Metro打包器。

React Native 中使用原生動態(tài)導(dǎo)入有兩種方式：使用 import() 語法或使用 require.context() 方法。

使用 import() 語法

根據(jù)Metro Bundler官方文檔：

import() 調(diào)用在開箱即用的情況下得到支持。在React Native中，使用 import() 會自動分割你的應(yīng)用程序代碼，使其在開發(fā)過程中加載速度更快，而不影響發(fā)布構(gòu)建。

import() 語法與靜態(tài) import 關(guān)鍵字相似，但你可以在代碼的任何地方使用它，只要你處理好 promise 的解決和拒絕。

例如，假設(shè)你有一個名為 SomeComponent 的組件，你希望根據(jù)某些條件動態(tài)加載它。你可以像這樣使用 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 函數(shù)內(nèi)使用 await 關(guān)鍵字來等待promise 的解決?；蛘撸憧梢允褂?.then() 和 .catch() 方法來處理 promise 的解決和拒絕。

使用 require.context() 方法

require.context() 方法現(xiàn)在是 Metro 打包器的一個支持特性，允許你為動態(tài)導(dǎo)入創(chuàng)建一個上下文。這個特性是由 Evan Bacon 添加到Metro庫中的。

context 是一個包含與給定模式匹配的一組模塊或組件信息的對象。你可以使用 require.context() 方法來創(chuàng)建這樣的上下文：

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

require.context() 方法的第一個參數(shù)是你想要查找模塊或組件的基礎(chǔ)目錄。第二個參數(shù)是一個布爾值，表示你是否想要包含子目錄。

有了 require.context ，你現(xiàn)在可以根據(jù)變量或正則表達(dá)式進(jìn)行導(dǎo)入。

這是一個示例，展示了如何使用 require.context 從文件夾中導(dǎo)入所有圖片并將它們顯示在列表中：

// 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 方法支持動態(tài)導(dǎo)入，這與webpack提供的方式類似。

但是 require.context 一直以來都被Expo路由器在后臺使用，以根據(jù)文件目錄結(jié)構(gòu)和你擁有的文件自動創(chuàng)建路由。它使用一個帶有正則表達(dá)式的 require.context 調(diào)用，所有的路由都可以在運(yùn)行時被確定。

例如，如果你有一個名為 app/home.tsx 的文件，它將變成一條路徑為 /home 的路由。如果你有一個名為 app/profile/settings.tsx 的文件，它將變成一條路徑為 /profile/settings 的路由。

例如，如果你有一個名為 app/home.tsx 的文件，它將成為一個路徑為 /home 的路由。如果你有一個名為 app/profile/settings.tsx 的文件，它將成為一個路徑為 /profile/settings 的路由。

因此，你無需手動定義或?qū)肽愕穆酚?mdash;—Expo Router會為你完成！

實現(xiàn)動態(tài)導(dǎo)入的第三方解決方案

使用 React.lazy() 和 Suspense

React.lazy() 和 Suspense 是React的特性，允許你懶加載組件，也就是說，只有當(dāng)它們被渲染時才會加載。你可以使用 React.lazy() 函數(shù)來創(chuàng)建一個包裝動態(tài)導(dǎo)入的組件，你可以使用 Suspense 來顯示一個備用組件，而動態(tài)導(dǎo)入正在加載。

這是一個例子：

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應(yīng)用程序中，使用 React.lazy() 和 Suspense 是實現(xiàn)動態(tài)導(dǎo)入的好方法。然而，需要注意的是 React.lazy() 是專門為 React 組件的代碼分割設(shè)計的。如果你需要動態(tài)導(dǎo)入非組件的 JavaScript 模塊，你可能需要考慮其他方法。

可加載組件

Loadable Components是一種將你的React Native代碼分割成可以按需加載的小塊的方法。在React Native中，你可以使用react-loadable庫來動態(tài)加載和渲染組件。

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 庫中導(dǎo)入 Loadable 函數(shù)
• 定義一個加載組件（例如，一個 ActivityIndicator ），在目標(biāo)組件加載時將會顯示。
• 使用 Loadable 函數(shù)創(chuàng)建一個動態(tài)組件。為 loader 屬性提供一個導(dǎo)入目標(biāo)組件的函數(shù)（將 './YourComponent' 替換為組件的實際路徑），并指定 loading 屬性以在加載過程中顯示加載組件。
• 最后，在你的應(yīng)用的用戶界面中使用 DynamicComponent 。它將動態(tài)加載目標(biāo)組件，并在準(zhǔn)備就緒后顯示它，同時顯示加載組件。

這個庫最初是為React網(wǎng)頁應(yīng)用設(shè)計的，所以它可能并不總是在React Native中運(yùn)行得很好。

React Native中動態(tài)導(dǎo)入的好處

動態(tài)導(dǎo)入為開發(fā)者提供了幾個優(yōu)勢：

• 更快的啟動時間：通過只按需加載所需的代碼，動態(tài)導(dǎo)入可以顯著減少你的應(yīng)用啟動所需的時間。這對于提供流暢的用戶體驗至關(guān)重要，尤其是在設(shè)備或網(wǎng)絡(luò)較慢的情況下。
• 提高代碼可維護(hù)性：動態(tài)導(dǎo)入可以通過讓你將不常用的組件或庫分離到單獨(dú)的模塊中，更有效地組織你的代碼庫。這可以提高代碼的可維護(hù)性，使得在你的應(yīng)用的特定部分工作變得更容易。
• 漸進(jìn)式加載：動態(tài)導(dǎo)入支持漸進(jìn)式加載。你可以優(yōu)先加載關(guān)鍵組件，而不是強(qiáng)迫用戶等待整個應(yīng)用程序的加載，同時在后臺加載次要功能。這確保了用戶的初始體驗無縫，同時你的應(yīng)用程序的不太重要的部分在后臺加載，保持用戶的參與度。
• 優(yōu)化的包：動態(tài)導(dǎo)入允許你通過將它們分割成更小、更易管理的塊來優(yōu)化你的JavaScript包。這可以導(dǎo)致包大小的減小，從而減少應(yīng)用程序的內(nèi)存占用并加速加載過程。

使用動態(tài)導(dǎo)入的最佳實踐

• 謹(jǐn)慎使用動態(tài)導(dǎo)入：動態(tài)導(dǎo)入并非能解決你所有性能和用戶體驗問題的靈丹妙藥。它們帶來了一些權(quán)衡，如增加的復(fù)雜性，潛在的錯誤，以及對網(wǎng)絡(luò)連接的依賴。因此，你應(yīng)該只在必要時使用它們，而不是過度使用它們。
• 使用加載指示器和占位符：加載指示器可以向用戶顯示應(yīng)用正在動態(tài)加載一些模塊以及需要多長時間。占位符可以向用戶展示當(dāng)模塊加載完成后應(yīng)用會是什么樣子，并防止布局變動或空白空間。你可以使用像 ActivityIndicator 或 Skeleton 這樣的React Native內(nèi)置組件，或者像 react-native-loading-spinner-overlay 或 react-native-skeleton-placeholder 這樣的第三方庫來實現(xiàn)這個目的。
• 使用錯誤邊界和回退：在使用動態(tài)導(dǎo)入時，你應(yīng)該使用錯誤邊界和回退來處理錯誤和失敗。錯誤邊界是可以捕獲并處理其子組件中的錯誤的組件?；赝耸窃谠冀M件無法加載或渲染時可以渲染的組件。你可以使用像React中的 ErrorBoundary 這樣的內(nèi)置組件，或者像 react-error-boundary 或 react-native-error-boundary 這樣的第三方庫來實現(xiàn)這個目的。

總結(jié)

在這篇文章中，我們學(xué)習(xí)了如何在React Native中使用原生動態(tài)導(dǎo)入。有了動態(tài)導(dǎo)入這個強(qiáng)大的工具，你可以使你的React Native應(yīng)用更高效、響應(yīng)更快、用戶體驗更友好。謹(jǐn)慎使用動態(tài)導(dǎo)入并遵循最佳實踐以確保無縫的用戶體驗是至關(guān)重要的。

到此這篇關(guān)于React Native中原生實現(xiàn)動態(tài)導(dǎo)入的示例詳解的文章就介紹到這了,更多相關(guān)React Native動態(tài)導(dǎo)入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！