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。