什么是新的 ReactJS Suspense API，什么時候應(yīng)該使用它？

何時使用：當(dāng)組件開始變大并且您在同一頁面上有許多組件時，您可能希望開始優(yōu)化下載到客戶端瀏覽器的方式和時間。

為此，React 為您提供了lazyAPI，它允許您將組件標(biāo)記為lazy，這意味著被lazy包裹的組件，將會在第一次真正使用時被加載，而不是頁面初始化的時候。

懶加載優(yōu)化是減少“首屏渲染時間”和其他指標(biāo)的絕妙方法，這些指標(biāo)主要是用于衡量應(yīng)用程序首次渲染所需的時間以及“準(zhǔn)備好”交互所需的時間。

但是當(dāng)你使用這種優(yōu)化時，你會遇到一個問題：如果組件下載時間過長會發(fā)生什么？尤其是在網(wǎng)速較慢的情況下。在這種情況下，界面應(yīng)該展示什么？即使用戶看不到，我們該如何讓用戶知道當(dāng)前界面正在發(fā)生的事情呢？

這就是 Suspense API 發(fā)揮作用的地方，讓我們來看看吧！

什么是Suspense API？

Suspense API 與“lazy”組件結(jié)合使用時，可以讓用戶知道，此時當(dāng)前界面正在后臺加載某些內(nèi)容。 當(dāng)瀏覽器在下載需要懶加載的這個組件的過程中，提供替代可視化（不同的組件）來做到這一點。

這里的前提是，這個替代組件（一般loading組件）是一個較低的較小的，并且很可能可以在許多不同的地方重復(fù)使用的組件。這樣話，權(quán)衡是有意義的。

對于本文，我創(chuàng)建了一個 Github 存儲庫，在分支react18-suspense中！

使用時，需要你簡單地用 Suspense 包裝你的lazy組件，同時指定 fallback 屬性。像這樣：

import React, { Suspense, useState } from "react";
import Waiting from "./waiting";
const Text = React.lazy(() => import("./text"));
const Buttons = React.lazy(() => import("./buttons"));
export default function Tabs() {
  const [tab, setTab] = useState("text");
  return (
    <Suspense fallback={<Waiting />}>
        <div style={{ minWidth: "40vw" }}>
        <p>
          <a
            href="#" rel="external nofollow"  rel="external nofollow" 
            onClick={(_) => {
              if (tab == "text") setTab("buttons");
              else setTab("text");
            }}
          >
            Toggle to {tab === "text" ? "buttons" : "text"}
          </a>
        </p>
        <div style={{ minWidth: "40vw" }}>
          {tab === "text" ? <Text /> : <Buttons />}
        </div>
      </div>
    </Suspense>
  );
}

從以上代碼中可以看出，Text 和 Buttons 組件都是會懶加載的，加載它們中的任何一個都需要向服務(wù)器發(fā)出請求。點擊 “Toggle”，可以在兩者之間交替。

現(xiàn)在有趣的是，Suspense 組件不必直接包裝懶加載的組件。它們可以在樹的多個層次上，無論如何都會顯示fallback。所以你不必?fù)?dān)心用它包裝每一個組件，你可以包裝你的組件樹的整個部分，并讓它們都使用相同的fallback。

看上面的 GIF圖，它以白屏開始，因為它下載初始頁面的速度很慢（請注意“網(wǎng)絡(luò)”選項卡上的“slow 3G”設(shè)置）。緊接著，我們會看到“Waiting...”消息，這就是 Waiting fallback。

然后它被一條文本消息替換，即加載的文本組件。我們在這里看到了 Suspense API 的實際應(yīng)用。

然后，當(dāng)我單擊“切換”鏈接時，將再次看到“waiting...”消息幾秒鐘，而瀏覽器正在第一次下載按鈕組件。

在此之后，組件之間的切換是立即執(zhí)行的，因為它們已經(jīng)加載，并且不再需要 Suspense API。

如果你想了解更多關(guān)于 Suspense 的信息，我建議你閱讀此處的 RFC，因為它為你提供了理解該功能所需的所有上下文。

什么是 transition API?

有興趣的可以移步這篇介紹useTransition的文章！

作為 React 18 的一部分，Suspense API 增加了一個，它允許您以在某些情況下可能對用戶更友好的方式在組件之間進(jìn)行轉(zhuǎn)換。

如果你回到我們的示例，會注意到，每次單擊“Toggle”時，點擊之前的舊組件消失了，取而代之的是界面上要么顯示最新組件，要么顯示“waiting...”，這樣的交互，可能對用戶來說變化太大了，因此我們可能希望保持點擊之前，依然保持舊組件可見，并讓用戶可以與舊組件進(jìn)行交互，同時 React在后臺加載新組件。只有在新組件準(zhǔn)備好后，它才會用它替換舊組件。

現(xiàn)在，您可以在 React 18 中使用 useTransition API 執(zhí)行此操作，如下所示：

import React, { Suspense, useState, useTransition } from "react";
import Waiting from "./waiting";
const Text = React.lazy(() => import("./text"));
const Buttons = React.lazy(() => import("./buttons"));
export default function Tabs() {
  const [tab, setTab] = useState("text");
  const [isPending, startTransition] = useTransition();
  return (
    <Suspense fallback={<Waiting />}>
      <div style={{ minWidth: "40vw" }}>
        <p>
          <a
            href="#" rel="external nofollow"  rel="external nofollow" 
            onClick={(_) => {
              startTransition(() => {
                if (tab == "text") setTab("buttons");
                else setTab("text");
              });
            }}
          >
            My Toggle to {tab === "text" ? "buttons" : "text"}
          </a>
        </p>
        <div style={{ opacity: isPending ? 0.1 : 1, minWidth: "40vw" }}>
          {tab === "text" ? <Text /> : <Buttons />}
        </div>
      </div>
    </Suspense>
  );
}

這是完全相同的代碼，但是現(xiàn)在當(dāng)我們單擊“Toggle”時，我們調(diào)用 startTransition 來切換tab，這樣告訴 React 只有在加載完成后才替換組件。

因為缺少了loading狀態(tài)，可能會讓用戶有點困惑，所以我們可以從 useTransition 鉤子返回的 isPending 中獲取。這個isPending可以用來表示當(dāng)前組件正在發(fā)生一些事情，而不會完全破壞用戶的體驗。在我的例子中，我將“舊”組件的不透明度設(shè)置為“0.1”，同時加載“新”組件。

現(xiàn)在，如果要運行此示例，你將看到第一次刷新頁面的時候觸發(fā)了fallback，然后每當(dāng)用戶手動單擊“Toggle”時，都會調(diào)用startTransition。這為用戶提供了更好的體驗，并且仍然盡可能優(yōu)化。

最后

Suspense API 并不復(fù)雜，也不會給你現(xiàn)有的項目添加太多代碼。但是，如果你的應(yīng)用程序不夠復(fù)雜，你可能不需要使用它。

要確定代碼中是否應(yīng)該使用，我們應(yīng)該問自己的第一個問題是：我在每個頁面上渲染了多少個組件，以及為此加載了多少個組件？要分析我們的應(yīng)用程序的性能，并確定這些組件是否確實導(dǎo)致了一些初始加載時間問題。如果是這樣，那么行的，開始代碼拆分并引入吧！否則，你可以不使用也沒事。

以上就是React18 中的 Suspense API使用實例詳解的詳細(xì)內(nèi)容，更多關(guān)于React18 Suspense API的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論