React 18 引入了并發(fā)功能，從根本上改變了 React 應(yīng)用的渲染方式。本文將探討 Transitions、Suspense 和 React Server Components 等并發(fā)功能如何影響和提高應(yīng)用的性能。

主線程和長(zhǎng)任務(wù)

當(dāng)在瀏覽器中運(yùn)行 JavaScript 時(shí)，JavaScript 引擎在單線程環(huán)境中執(zhí)行代碼，該環(huán)境通常稱為主線程。除了執(zhí)行 JavaScript 代碼之外，主線程還負(fù)責(zé)處理其他任務(wù)，包括管理用戶交互（如單擊）、處理網(wǎng)絡(luò)事件、計(jì)時(shí)器、更新動(dòng)畫(huà)以及管理瀏覽器重排和重繪。

主線程負(fù)責(zé)將任務(wù)一一處理

當(dāng)一個(gè)任務(wù)正在處理時(shí)，所有其他任務(wù)都必須等待。雖然瀏覽器可以順利執(zhí)行小型任務(wù)以提供無(wú)縫的用戶體驗(yàn)，但較長(zhǎng)的任務(wù)可能會(huì)出現(xiàn)問(wèn)題，因?yàn)樗鼈兛赡軙?huì)阻止其他任務(wù)的處理。

任何運(yùn)行時(shí)間超過(guò) 50 毫秒的任務(wù)都被視為“長(zhǎng)任務(wù)”。

圖片

50 毫秒基準(zhǔn)基于以下條件確認(rèn)的：設(shè)備必須每 16 毫秒 (60 fps) 創(chuàng)建一個(gè)新幀才能保持流暢的視覺(jué)體驗(yàn)。然而，設(shè)備還必須執(zhí)行其他任務(wù)，例如響應(yīng)用戶輸入和執(zhí)行 JavaScript。50ms 基準(zhǔn)測(cè)試允許設(shè)備將資源分配給渲染幀和執(zhí)行其他任務(wù)，并為設(shè)備提供約 33.33ms 的額外時(shí)間來(lái)執(zhí)行其他任務(wù)，同時(shí)保持流暢的視覺(jué)體驗(yàn)。

性能指標(biāo)

為了保持最佳性能，盡量減少長(zhǎng)任務(wù)的數(shù)量非常重要。為了衡量網(wǎng)站的性能，有兩個(gè)指標(biāo)可以衡量長(zhǎng)時(shí)間任務(wù)對(duì)應(yīng)用程序性能的影響：總阻塞時(shí)間和下次繪制的交互。

總阻塞時(shí)間 (TBT) 是衡量首次內(nèi)容繪制 (FCP) 和交互時(shí)間 (TTI) 之間時(shí)間的重要指標(biāo)。TBT 是執(zhí)行時(shí)間超過(guò) 50 毫秒的任務(wù)的總和，這會(huì)對(duì)用戶體驗(yàn)產(chǎn)生重大影響。

圖片

上圖的 TBT 為 45ms，因?yàn)橛袃蓚€(gè)任務(wù)在 TTI 之前花費(fèi)了超過(guò) 50ms 的時(shí)間，分別超出了 50ms 閾值 30ms 和 15ms?？傋枞麜r(shí)間是這些值的累加：30ms + 15ms = 45ms。

下次繪制的交互（INP）是一個(gè)新的 Core Web Vitals 指標(biāo)，用于衡量用戶首次與頁(yè)面進(jìn)行交互（例如點(diǎn)擊按鈕）到該交互在屏幕上可見(jiàn)的時(shí)間，也就是下次繪制的時(shí)間。這個(gè)指標(biāo)對(duì)于有很多用戶交互的頁(yè)面特別重要，比如電子商務(wù)網(wǎng)站或社交媒體平臺(tái)。它通過(guò)累積用戶當(dāng)前訪問(wèn)期間的所有 INP 測(cè)量值，并返回最差的得分來(lái)進(jìn)行衡量。

圖片

到下次繪制的交互時(shí)間為 250 毫秒，因?yàn)檫@是測(cè)量到的最高視覺(jué)延遲。

要了解新的 React 更新如何針對(duì)這些測(cè)量進(jìn)行優(yōu)化從而改善用戶體驗(yàn)，首先要了解傳統(tǒng) React 的工作原理。

傳統(tǒng)的 React 渲染

React 中的視覺(jué)更新分為兩個(gè)階段：渲染階段和提交階段。React 中的渲染階段是一個(gè)純粹的計(jì)算階段，其中 React 元素與現(xiàn)有 DOM 進(jìn)行協(xié)調(diào)（即比較）。此階段涉及創(chuàng)建新的 React 元素樹(shù)，也稱為“虛擬 DOM”，它本質(zhì)上是實(shí)際 DOM 的輕量級(jí)內(nèi)存中表示。

在渲染階段，React 計(jì)算當(dāng)前 DOM 和新 React 組件樹(shù)之間的差異并準(zhǔn)備必要的更新。

圖片

渲染階段之后是提交階段。在此階段，React 將渲染階段計(jì)算出的更新應(yīng)用于實(shí)際 DOM。這涉及創(chuàng)建、更新和刪除 DOM 節(jié)點(diǎn)以鏡像新的 React 組件樹(shù)。

在傳統(tǒng)的同步渲染中，React 會(huì)給組件樹(shù)中的所有元素賦予相同的優(yōu)先級(jí)。當(dāng)渲染組件樹(shù)時(shí)，無(wú)論是在初始渲染還是在狀態(tài)更新時(shí)，React 都會(huì)繼續(xù)并在單個(gè)不間斷任務(wù)中渲染該樹(shù)，然后將其提交給 DOM 以直觀地更新屏幕上的組件。

圖片

同步渲染是一種“全有或全無(wú)”的操作，它保證開(kāi)始渲染的組件總是會(huì)完成。根據(jù)組件的復(fù)雜性，渲染階段可能需要一段時(shí)間才能完成。主線程在此期間被阻塞，這意味著嘗試與應(yīng)用交互的用戶會(huì)遇到無(wú)響應(yīng)的 UI，直到 React 完成渲染并將結(jié)果提交到 DOM。

下面來(lái)看一個(gè)例子，有一個(gè)文本輸入字段和一個(gè)很長(zhǎng)的城市列表，根據(jù)文本輸入的當(dāng)前值進(jìn)行過(guò)濾。在同步渲染中，React 將在每次按鍵時(shí)重新渲染CitiesList組件。這是一個(gè)相當(dāng)昂貴的計(jì)算，因?yàn)樵摿斜碛蓴?shù)萬(wàn)個(gè)城市組成，所以在按鍵和在文本輸入中看到反映的之間存在明顯的視覺(jué)反饋延遲。

// APP.js
import React, { useState } from "react";
import CityList from "./CityList";

export default function SearchCities() {
  const [text, setText] = useState("Am");

   return (    
      <main>      
          <h1>Traditional Rendering</h1>      
          <input type="text" onChange={(e) => setText(e.target.value) }   />      
          <CityList searchQuery={text} />    
      </main>  
     );
};

// CityList.js
import cities from "cities-list";
import React, { useEffect, useState } from "react";
const citiesList = Object.keys(cities);

const CityList = React.memo(({ searchQuery }) => {
  const [filteredCities, setCities] = useState([]);

  useEffect(() => {
    if (!searchQuery) return;

    setCities(() =>
      citiesList.filter((x) =>
         x.toLowerCase().startsWith(searchQuery.toLowerCase())
      )
    );
   }, [searchQuery]);

  return (
     <ul>
       {filteredCities.map((city) => (
         <li key={city}>
           {city}
        </li>
       ))}
    </ul>
    )
});

export default CityList;

// index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles.css";

const rootElement = document.getElementById("root");

ReactDOM.render(<StrictMode><App /></StrictMode>,  rootElement);

效果如下：

圖片

在線體驗(yàn)：https://codesandbox.io/s/w4zcct

注意：如果使用的是高端設(shè)備，比如 Macbook，可以將 CPU 限制為慢 4 倍的速度，以模擬低端設(shè)備?？梢栽?Devtools > Performance > ?? > CPU中找到此設(shè)置，如圖所示：

圖片

當(dāng)查看 Performance 選項(xiàng)卡時(shí)，可以看到每次點(diǎn)擊都會(huì)發(fā)生很長(zhǎng)的任務(wù)：

圖片

標(biāo)有紅角的任務(wù)被視為“長(zhǎng)任務(wù)”，注意總阻塞時(shí)間為 4425.40ms。

在這種情況下，React 開(kāi)發(fā)者通常會(huì)使用像"debounce"這樣的方法來(lái)延遲渲染，但沒(méi)有內(nèi)置的解決方案。

React 18 引入了一個(gè)在幕后運(yùn)行的新的并發(fā)渲染器。該渲染器提供了一些將某些渲染標(biāo)記為非緊急的方法。

當(dāng)渲染低優(yōu)先級(jí)組件（粉色）時(shí)，React 返回主線程以檢查更重要的任務(wù)

在這種情況下，React 將每 5 毫秒返回主線程，看看是否有更重要的任務(wù)需要處理，例如用戶輸入，甚至渲染另一個(gè)對(duì)當(dāng)時(shí)的用戶體驗(yàn)更重要的 React 組件。通過(guò)不斷返回主線程，React 能夠使此類(lèi)渲染成為非阻塞并優(yōu)先處理更重要的任務(wù)。

并發(fā)渲染器不是為每個(gè)渲染執(zhí)行一個(gè)不可中斷的任務(wù)，而是在低優(yōu)先級(jí)組件的（重新）渲染期間以 5 毫秒的間隔將控制權(quán)交還給主線程。

此外，并發(fā)渲染器能夠在后臺(tái)“同時(shí)”渲染組件樹(shù)的多個(gè)版本，而無(wú)需立即提交結(jié)果。

同步渲染是一種全有或全無(wú)的計(jì)算，而并發(fā)渲染器允許 React 暫停和恢復(fù)一個(gè)或多個(gè)組件樹(shù)的渲染，以實(shí)現(xiàn)最佳的用戶體驗(yàn)。

React 根據(jù)用戶交互暫停當(dāng)前渲染，迫使其優(yōu)先渲染另一個(gè)更新

使用并發(fā)功能，React 可以根據(jù)外部事件（例如用戶交互）暫停和恢復(fù)組件的渲染。當(dāng)用戶開(kāi)始與 ComponentTwo 交互時(shí)，React 暫停當(dāng)前的渲染，優(yōu)先渲染ComponentTwo，然后恢復(fù)渲染 ComponentOne。

Transitions

可以使用useTransition鉤子提供的startTransition函數(shù)將更新標(biāo)記為非緊急。這是一個(gè)強(qiáng)大的新功能，允許將某些狀態(tài)更新標(biāo)記為“過(guò)渡”，表示它們可能導(dǎo)致視覺(jué)變化，如果同步渲染可能會(huì)對(duì)用戶體驗(yàn)造成干擾。

通過(guò)將狀態(tài)更新包裝在startTransition中，就告訴 React 可以延遲或中斷渲染，以優(yōu)先處理更重要的任務(wù)，以保持當(dāng)前的用戶界面具有交互性。

import { useTransition } from "react";

function Button() {
  const [isPending, startTransition] = useTransition();

  return (
    <button 
      onClick={() => {
        urgentUpdate();
        startTransition(() => {
          nonUrgentUpdate()
        })
      }}
    >...</button>
  )
}

當(dāng)過(guò)渡開(kāi)始時(shí)，并發(fā)渲染器在后臺(tái)準(zhǔn)備新樹(shù)。一旦完成渲染，它會(huì)將結(jié)果保留在內(nèi)存中，直到 React 調(diào)度程序可以高效地更新 DOM 以反映新?tīng)顟B(tài)。這一刻可能是當(dāng)瀏覽器空閑并且更高優(yōu)先級(jí)的任務(wù)（例如用戶交互）沒(méi)有待處理時(shí)。

對(duì)于上面的 CitiesList 例子來(lái)說(shuō)，使用過(guò)渡效果將是完美的?？梢詫⒚總€(gè)按鍵上直接調(diào)用setCities 的操作改為在startTransition中進(jìn)行包裝。這告訴 React 狀態(tài)更新可能會(huì)導(dǎo)致對(duì)用戶造成干擾的視覺(jué)變化，因此 React 應(yīng)該嘗試在后臺(tái)準(zhǔn)備新的狀態(tài)時(shí)保持當(dāng)前界面的交互性，而不立即提交更新。

// CitiesList.js
import cities from "cities-list";
import React, { useEffect, useState, useTransition } from "react";
const citiesList = Object.keys(cities);

const CityList = React.memo(({ searchQuery }) => {
  const [filteredCities, setCities] = useState([]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    if (!searchQuery) return;

    startTransition(() => {
      setCities(() =>
        citiesList.filter((x) =>
           x.toLowerCase().startsWith(searchQuery.toLowerCase())
        )
      );
    });
   }, [searchQuery]);

  return (
     <ul>
       {filteredCities.map((city) => (
         <li key={city} style={isPending ? { opacity: 0.2 } : null}>
           {city}
        </li>
       ))}
    </ul>
    )
});

export default CityList;

在線體驗(yàn)：https://codesandbox.io/s/rgqrky

現(xiàn)在在輸入框中輸入時(shí)，用戶輸入保持平滑，沒(méi)有按鍵之間的視覺(jué)延遲。這是因?yàn)槲谋緺顟B(tài)仍然同步更新，輸入框使用它作為其值。然而，CitiesList組件將其狀態(tài)更新包裝在startTransition中。

在后臺(tái)，React 開(kāi)始在每次擊鍵時(shí)渲染新樹(shù)。但這并不是一個(gè)全有或全無(wú)的同步任務(wù)，React 開(kāi)始在內(nèi)存中準(zhǔn)備組件樹(shù)的新版本，同時(shí)當(dāng)前 UI（顯示“舊”狀態(tài)）仍然響應(yīng)進(jìn)一步的用戶輸入。

查看 Performance 選項(xiàng)卡，相較于未使用過(guò)渡的實(shí)現(xiàn)的性能圖表，將狀態(tài)更新包裝在startTransition中顯著降低了長(zhǎng)任務(wù)的數(shù)量和總阻塞時(shí)間。

過(guò)渡是React渲染模型中的一個(gè)重要變革，使React能夠同時(shí)渲染多個(gè)版本的UI，并管理不同任務(wù)之間的優(yōu)先級(jí)。這可以提供更流暢、響應(yīng)更靈敏的用戶體驗(yàn)，特別是在處理高頻更新或 CPU 密集型渲染任務(wù)時(shí)。

React Server Components

React Server Components 是 React 18 中的一項(xiàng)實(shí)驗(yàn)性功能，但已準(zhǔn)備好供框架采用。

傳統(tǒng)上，React 提供了幾種主要的方式來(lái)渲染應(yīng)用?？梢酝耆诳蛻舳松箱秩舅袃?nèi)容（客戶端渲染），也可以在服務(wù)端將組件樹(shù)渲染為 HTML，并將此靜態(tài) HTML 與 JavaScript 包一起發(fā)送到客戶端，然后在客戶端進(jìn)行組件的水合（服務(wù)端渲染）。

這兩種方法都依賴于一個(gè)事實(shí)：同步 React 渲染器需要使用附帶的 JavaScript 包在客戶端重建組件樹(shù)，即使該組件樹(shù)已經(jīng)在服務(wù)端可用。

React Server Components 允許 React 將實(shí)際的序列化組件樹(shù)發(fā)送到客戶端?？蛻舳?React 渲染器理解這種格式，并使用它來(lái)高效地重建 React 組件樹(shù)，而無(wú)需發(fā)送 HTML 文件或 JavaScript 包。

可以通過(guò)結(jié)合react-dom/server的renderToPipeableStream方法和react-dom/client的createRoot方法來(lái)使用這種新的渲染模式。

// server/index.js
import App from '../src/App.js'
app.get('/rsc', async function(req, res) {  
  const {pipe} = renderToPipeableStream(React.createElement(App));
  return pipe(res);
});

// src/index.js
import { createRoot } from 'react-dom/client';
import { createFromFetch } from 'react-server-dom-webpack/client';
export function Index() {
  ...
  return createFromFetch(fetch('/rsc'));
}
const root = createRoot(document.getElementById('root'));
root.render(<Index />);

在線體驗(yàn)：https://codesandbox.io/p/sandbox/cocky-minsky-m7sgfx

默認(rèn)情況下，React 不會(huì)對(duì) React Server Components 進(jìn)行水合。這些組件不應(yīng)該使用任何客戶端交互，例如訪問(wèn)window對(duì)象或使用像useState或useEffect這樣的hook。

要將組件及其導(dǎo)入添加到 JavaScript 包中，并發(fā)送到客戶端使其具備交互功能，可以在文件頂部使用 use client 指令。這告訴打包工具將該組件及其導(dǎo)入添加到客戶端包，并告知 React 在客戶端進(jìn)行水合以添加交互性，這種組件稱為客戶端組件。

圖片

注意：框架實(shí)現(xiàn)可能有所不同。例如，Next.js 將在服務(wù)端將客戶端組件預(yù)渲染為 HTML，類(lèi)似于傳統(tǒng)的 SSR 方法。然而，默認(rèn)情況下，客戶端組件的渲染方式與 CSR 方法類(lèi)似。

在使用客戶端組件時(shí)，開(kāi)發(fā)人員需要優(yōu)化構(gòu)建包的大小?？梢允褂靡韵路绞剑?/p>

• 確保只有交互組件的最末端節(jié)點(diǎn)定義了 use client指令，這可能需要對(duì)組件進(jìn)行解耦。
• 將組件樹(shù)作為 props 傳遞，而不是直接導(dǎo)入它們。這允許 React 將 children 渲染為 React 服務(wù)端組件，而無(wú)需將它們添加到客戶端包中。

Suspense

另一個(gè)重要的新并發(fā)功能就是Suspense。盡管這并不完全是新的，因?yàn)镾uspense是在React 16 中發(fā)布的，用于與React.lazy進(jìn)行代碼拆分，但 React 18 引入的新功能將Suspense 擴(kuò)展到了數(shù)據(jù)獲取。

使用Suspense 可以延遲組件的渲染，直到滿足某些條件，例如從遠(yuǎn)程源加載數(shù)據(jù)。同時(shí)，我們可以渲染一個(gè)回退組件，指示該組件仍在加載。

通過(guò)聲明性地定義加載狀態(tài)，減少了任何條件渲染邏輯的需求。將Suspense與React Server Components 結(jié)合使用，可以直接訪問(wèn)服務(wù)端的數(shù)據(jù)源，無(wú)需額外的API端點(diǎn)，如數(shù)據(jù)庫(kù)或文件系統(tǒng)。

async function BlogPosts() {
  const posts = await db.posts.findAll();
  return '...';
}
 
export default function Page() {
  return (
    <Suspense fallback={<Skeleton />}>
      <BlogPosts />
    </Suspense>
  )
}

使用 React Server Components 與 Suspense 無(wú)縫協(xié)作，這允許在組件仍在加載時(shí)定義加載狀態(tài)。

Suspense 的真正力量來(lái)自于它與 React 的并發(fā)功能的深度集成。當(dāng)組件被掛起時(shí)，例如因?yàn)樗栽诘却龜?shù)據(jù)加載，React 不會(huì)只是閑置直到組件收到數(shù)據(jù)。相反，它會(huì)暫停暫停組件的渲染并將其焦點(diǎn)轉(zhuǎn)移到其他任務(wù)。

圖片

在此期間，會(huì)告訴 React 渲染一個(gè)后備 UI 以指示該組件仍在加載。一旦等待的數(shù)據(jù)可用，React 就可以以可中斷的方式無(wú)縫地恢復(fù)先前掛起的組件的渲染，就像上面看到的過(guò)渡一樣。

React 還可以根據(jù)用戶交互重新調(diào)整組件的優(yōu)先級(jí)。例如，當(dāng)用戶與當(dāng)前未渲染的掛起組件進(jìn)行交互時(shí)，React 會(huì)掛起正在進(jìn)行的渲染并優(yōu)先考慮用戶正在與之交互的組件。

圖片

一旦準(zhǔn)備就緒，React 會(huì)將其提交到 DOM，并恢復(fù)之前的渲染。這確保了用戶交互的優(yōu)先級(jí)，并且 UI 保持響應(yīng)并根據(jù)用戶輸入保持最新?tīng)顟B(tài)。

Suspense與React Server Component的可流化格式相結(jié)合，允許高優(yōu)先級(jí)更新在準(zhǔn)備好后立即發(fā)送到客戶端，而無(wú)需等待低優(yōu)先級(jí)渲染任務(wù)完成。這使客戶端能夠更快地開(kāi)始處理數(shù)據(jù)，并通過(guò)在內(nèi)容以非阻塞方式到達(dá)時(shí)逐漸顯示內(nèi)容來(lái)提供更流暢的用戶體驗(yàn)。

這種可中斷的渲染機(jī)制與Suspense處理異步操作的能力相結(jié)合，提供了更流暢、更以用戶為中心的體驗(yàn)，特別是在具有大量數(shù)據(jù)獲取需求的復(fù)雜應(yīng)用中。

數(shù)據(jù)獲取

除了渲染更新之外，React 18 還引入了一個(gè)新的 API 來(lái)有效地獲取數(shù)據(jù)并記住結(jié)果。

React 18 有一個(gè) cache 函數(shù)，可以記住包裝函數(shù)調(diào)用的結(jié)果。如果在同一個(gè)渲染過(guò)程中使用相同的參數(shù)調(diào)用相同的函數(shù)，它將使用記憶的值，而無(wú)需再次執(zhí)行該函數(shù)。

import { cache } from 'react'
 
export const getUser = cache(async (id) => {
  const user = await db.user.findUnique({ id })
  return user;
})

getUser(1)
getUser(1) // 在同一渲染過(guò)程中調(diào)用：返回已存儲(chǔ)的結(jié)果。

在fetch調(diào)用中，React 18 現(xiàn)在默認(rèn)包含類(lèi)似的緩存機(jī)制，而無(wú)需使用cache。這有助于減少單個(gè)渲染過(guò)程中的網(wǎng)絡(luò)請(qǐng)求數(shù)量，從而提高應(yīng)用性能并降低 API 成本。

export const fetchPost = (id) => {
  const res = await fetch(`https://.../posts/${id}`);
  const data = await res.json();
  return { post: data.post } 
}

fetchPost(1)
fetchPost(1) // 在同一渲染過(guò)程中調(diào)用：返回已存儲(chǔ)的結(jié)果。

這些功能在使用 React 服務(wù)端組件時(shí)非常有用，因?yàn)樗鼈儫o(wú)法訪問(wèn) Context API。緩存和 fetch 的自動(dòng)緩存行為允許從全局模塊導(dǎo)出單個(gè)函數(shù)并在整個(gè)應(yīng)用中重用它。

圖片

async function fetchBlogPost(id) {
  const res = await fetch(`/api/posts/${id}`);
  return res.json();
} 

async function BlogPostLayout() {
  const post = await fetchBlogPost('123');
  return '...'
}
async function BlogPostContent() {
  const post = await fetchBlogPost('123'); // 返回緩存值
  return '...'
}

export default function Page() {
  return (
    <BlogPostLayout>
      <BlogPostContent />
    </BlogPostLayout>
  )
}

總結(jié)

React 18 中的新功能在很多方面提高了應(yīng)用的性能：

• 并發(fā)模式：渲染過(guò)程可以暫停并稍后恢復(fù)，甚至放棄。這意味著即使正在進(jìn)行大型渲染任務(wù)，UI 也可以立即響應(yīng)用戶輸入。
• Transitions API： 允許在數(shù)據(jù)獲取或屏幕更改期間實(shí)現(xiàn)更平滑的過(guò)渡，而不會(huì)阻止用戶輸入。
• React Server Components： 支持構(gòu)建可在服務(wù)器和客戶端上運(yùn)行的組件，將客戶端應(yīng)用的交互性與傳統(tǒng)服務(wù)端渲染的性能相結(jié)合，而無(wú)需水合成本。
• 擴(kuò)展 Suspense 功能：允許應(yīng)用的某些部分先于其他可能需要更長(zhǎng)時(shí)間獲取數(shù)據(jù)的部分進(jìn)行渲染，從而提高了加載性能。

參考：https://vercel.com/blog/how-react-18-improves-application-performance