了解 React 中遺留的 Promise 拋出行為

React 是一個強大且多功能的 JavaScript 函式庫，用於建立使用者介面。 Suspense 是其現代功能之一，可讓元件優雅地處理非同步資料。然而，React 中「遺留 Promise 拋出行為」的概念經常引起開發人員的困惑。這篇部落格文章旨在分解這種行為的含義、它如何適應 React 的渲染過程，以及為什麼在使用並發功能時理解這一點很重要。

什麼是遺留承諾拋出行為？

遺留 Promise 拋出行為是指 React 元件在渲染期間「拋出」promise 的機制。這告訴 React 元件正在等待一些非同步資料被解析，然後才能完全渲染。

當拋出 Promise 時，React 會暫停元件樹該部分的渲染，並使用 Suspense 渲染後備 UI（如果已定義）。一旦 Promise 解析，React 就會使用解析後的資料重新渲染元件。

遺留承諾拋出的主要特點：

1. 在渲染期間拋出 Promise：元件可以透過拋出 Promise 來指示它們正在等待資料。
2. 與 Suspense 整合：此行為與 Suspense 無縫配合以顯示後備內容。
3. 非同步資料處理：它提供了一種聲明式方式來處理 React 渲染生命週期內的非同步資料擷取。

它是如何運作的？

讓我們一步一步看看這個行為是如何運作的：

1. 元件拋出 Promise：在渲染過程中，元件遇到 Promise 並拋出它。
2. 渲染暫停：React 暫停元件樹該分支的渲染。
3. 後備 UI：如果存在 Suspense 邊界，React 會渲染後備 UI。
4. Promise 解決：一旦 Promise 解決，React 就會恢復渲染並整合已解決的資料。

遺留 Promise 拋出的範例

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

export default App;

說明：

1. 取得資料：useData 鉤子使用 fetchData 函數非同步取得資料。
2. 拋出 Promise：如果資料尚不可用，則拋出 Promise。
3. Suspense Fallback：Suspense 元件顯示“正在載入...”，直到承諾解決。
4. 已解析資料：一旦 Promise 解析，AsyncComponent 就會渲染載入的資料。

現代 React 和並發特性

React 18 引入了並發渲染，它改進了 Promise 拋出的工作方式。主要改進包括：

1. 時間切片：React 的並發渲染將工作分割成更小的區塊，即使在等待非同步資料時也能保持 UI 回應。
2. 受控的懸念邊界：懸念邊界更優雅地處理承諾拋出。
3. 改進的錯誤處理：針對無法取得資料的元件提供更好的錯誤邊界。

最佳實踐

雖然傳統的 Promise Throwing 是 Suspense 的基礎，但開發人員應該使用現代庫和模式以獲得更好的體驗：

使用 React Query 或 SWR

React Query 和 SWR 等函式庫為資料擷取、快取和同步提供了強大的解決方案，無需手動拋出 Promise。

利用 Hook（React 18）

React 18 引入了 use hook（實驗性），用於以更簡潔、聲明性的方式處理 Promise。

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

export default App;

避免直接拋出 Promise

手動拋出 Promise 可能會導致意外問題，尤其是在非並發環境中。相反，依靠抽象這些複雜性的函式庫或實用程式。

包裹懸念以實現可重複使用性

將 Suspense 邏輯封裝在可重複使用元件中，以獲得更清晰的程式碼：

function AsyncComponent() {
  const data = use(fetchData());
  return <div>{data}</div>;
}

結論

遺留的 Promise 拋出行為是 React Suspense 功能的基石，可在渲染過程中無縫處理非同步資料。然而，隨著 React 的發展，管理非同步操作的工具和模式也在不斷發展。透過理解這種行為並利用現代實踐，開發人員可以創建高效、響應迅速且可維護的應用程式。

以上是了解 React 中遺留的 Promise 拋出行為的詳細內容。更多資訊請關注PHP中文網其他相關文章！