React.js 中的 REST API 是什麼？

---

React.js 不僅僅是關於客戶端渲染。它還提供 REST API 用於伺服器端渲染以及 Web 爬蟲、離線資料儲存等用例。

REST 是一種 API 型別，它提供了一種 Web 和移動應用程式相互通訊的方式。它是一個開箱即用的服務，可以用於任何基於 React.js 構建的 Web 應用程式。

對於希望使其 React 應用程式具有可擴充套件性的開發人員來說，它也是一個不錯的選擇，因為它提供高可用性、低延遲，並減少網路頻寬消耗。

本文旨在簡要概述 React.js 中的 REST API 及其在各種應用程式中的使用方法：

什麼是 REST API？

REST API 代表“具象狀態傳輸應用程式程式設計介面”，有時也稱為 RESTful API，它是 React.js 開發人員使用的主要介面，允許應用程式或服務不同部分之間透過網際網路進行 API 連線。

開發人員可以使用 REST API 更高效、更靈活地組合應用程式。此外，它已成為微服務系統最常用的技術。

REST API 的另一個好處是，它對資料在伺服器、瀏覽器、資料庫和其他網路之間如何表示和傳輸沒有限制。

React 中 REST API 的原則

服務或應用程式可以使用 API 訪問位於另一個服務或應用程式中的資訊。與包含資源的程式或服務相比，訪問資料的程式或服務稱為“伺服器”。理論上，REST API 可以用任何計算機語言建立，並涵蓋許多檔案格式。

分層系統

由於分層系統，設計可以是分層的。此限制限制了層外元素的連線。響應和呼叫透過多個層傳遞，因為沒有任何層可以看到任何其他層。此概念允許新增新命令，同時保持現有命令的功能。

標準介面

將 REST 體系結構設計與各種基於網路的設計區分開來的主要特徵是其統一介面。它建立了一個標準契約，禁止在 API 內使用獨立的或多個介面。

無論開發人員在哪裡發出此請求，所有訪問相同資訊的 API 都應具有相同的外觀（冪等）。

無狀態性

這確實是應用於 REST 體系結構原則的另一個限制。它禁止在伺服器上保留資訊，並要求每個“請求”都包含在伺服器和客戶端之間傳送的所有資料。由於它減少了無狀態性的影響，因此必須在伺服器端或客戶端快取資訊。

快取限制會考慮請求響應中內容的非可快取或可快取分類，無論是否顯式或隱式。當響應標記為“可快取”時，允許客戶端快取使用接收到的資料進行後續的相同查詢。

解耦服務

伺服器和客戶端之間的隔離稱為客戶端-伺服器解耦。儘管具有不同的特性並監聽查詢，但伺服器始終會批准或拒絕來自客戶端的請求。透過客戶端-伺服器解耦，可以提高伺服器模組的效能和使用者介面的可移植性。

React 中 REST API 的特性

React 設計為支援單向資料流。使用單向資料繫結時，您可以更好地控制應用程式。ReactJS 基於元件構建，ReactJS 應用程式的元件具有控制元件和邏輯。在處理大型專案時，管理軟體更簡單，因為您可以重用這些元件。

由於 React 將基本的 JavaScript 和 HTML 概念與一些有用的補充相結合，因此易於理解。

React 利用虛擬 DOM 來加快 Web 應用程式的開發。與傳統的 Web 應用程式一樣，虛擬 DOM 會檢查元素的先前配置，然後僅更新已修改的 Real DOM 部分。因為 React 使用 JSX 文件，所以應用程式易於建立和理解。

REST API 的好處

• 據說 REST API 相對容易理解和掌握。

• 任何語言或平臺都可以使用和輕鬆執行 REST API，它不是特定於語言或平臺的。

• 對於外部客戶來說，建立完美的 REST API 相對容易。

• 與競爭對手相比，這些也更容易擴充套件。

• 藉助 REST API，工程師可以將複雜的程式分解為簡單的元件。

使用 React 使用 REST API 的方法

在 React 應用程式中使用 REST API 有多種方法；但是，在本教程中，我們將重點介紹兩種最常見的方法：Fetch API（內建的 Web 瀏覽器 API）和 Axios（基於 promise 的 HTTP 瀏覽器）。

重要說明

您應該熟悉 React hook、React 和 JavaScript，因為它們對於理解本文至關重要。

在瞭解如何在 React 中使用 API 之前，務必瞭解在 React 中使用 API 與在 JavaScript 中使用 API 的方式大相徑庭。這是因為這些請求現在由 React 元件處理。此外，您將在此場景中使用核心元件，因此您必須使用兩個重要的 React hook：

useState Hook

當您執行資料請求時，您需要設定一個上下文，您將在其中儲存資訊直到它被傳遞。您可以將其儲存在上下文物件或 Redux 等狀態管理框架中，並將提供的資訊儲存在 React 的本地狀態中。

const [posts, setPosts] = useState([]);

useEffect Hook

在 React 的此 useEffect() hook 內，進行 API 查詢。安裝應用程式後，它會立即顯示或等待達到特定狀態。您將使用的整體語法如下：

useEffect(() => {
   
   // data fetching here

}, []);

結論

公司使用 JavaScript 開發互動式 Web 應用程式。但是，使用 HTML 字串需要大量編碼才能建立大型線上應用程式。

React 透過更好的效能和更少的程式碼提高了效率，因為它在建立機器可讀程式時為開發人員提供了更大的靈活性。訪問您的 React REST API 可確保前端動態 Web 應用程式快速執行和改進的 UI。