要求远程控制数据库的四种方式：1、直接从React部件内进行HTTP启用并处理回应；2、创建一个文件夹，把开展HTTP调用的函数公式都装进去，集中化请求数据并处理回应；3、自定Hook来请求数据；4、应用“react-query”或swr来请求数据。
本实例教程作业环境：Windows7系统软件、react17.0.1版、Dell G3计算机。
React 中要求远程控制数据库的四种方式
React 是一个专心的组件库。因而，它就如何要求远程控制数据信息并没有什么建议。如果想根据 HTTP 请求数据并把它发送至 Web API，可以选择下边四种方式。
内联书写
规范化管理
自定
Hookreact-query/swr
留意：在本文中，我们将应用 fetch 开展 HTTP 启用，不过这些方式同样适用于 Axios 什么的替代方法。此外，假如你采用的是 GraphQ L，还能够考虑使用 Apollo 什么的别的好的选择。本文假如你已经启用传统 REST API。
方法1：内联
这是一种比较，最直观的挑选。在 React 部件内进行 HTTP 启用并处理回应。
fetch("/users").then(response => response.json());看上去很简易。但这个实例忽视了载入情况，异常处理，申明和设定有关情况等。在现实世界中， HTTP 启用看起来更加像这样的。
import React, { useState, useEffect } from "react";
export default function InlineDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
.then(response => {
if (response.ok) return response.json();
throw response;
})
.then(json => {
setUsers(json);
})
.catch(err => {
console.error(err);
setError(err);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) return "Loading...";
if (error) return "Oops!";
return users[0].username;
}针对一个简单的应用程序，只需进行好多个要求，就能正常运转。可是上边状态申明和 useEffect 全是模板。假如我想开展很多 HTTP 启用，我不愿意为每一个启用反复与维护大概 20 行编码。内联启用使你的编码越来越难看。
看一下我们应该处理的一些问题：
申明载入情况
申明不正确情况
将不正确打印出到控制面板
查验回应是否通过回到 200
response.ok假如回应正常的，将回应转换成
json并回到promise假如回应有误，抛出去不正确
在
finally中掩藏载入情况，以保证Loading即便出现错误又被掩藏申明一个空的依赖项二维数组，便于
useEffect只运作一次
这只是一个简单实例，它忽视了很多其他相关难题。
方法2：文件夹名称规范化管理
如果我们在一个文件夹中解决全部 HTTP 启用会有什么后果? 应用此方法，大家创建了一个名叫 services 的文件夹名称，并把开展 HTTP 调用的函数公式都装进去。service 是最流行专业术语，我还在下边也探讨了许多好一点的取代名字，如 client 或 api。
关键点是，每一个 HTTP 启用也是通过纯 JavaScript 函数公式处理，存储在一个文件夹中。这是一个密集的 getUsers 函数公式:
export function getUsers() {
return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
response.json()
);
}下边应该是 getUsers 函数的调用：
import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";
export default function CentralDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers()
.then(json => {
setUsers(json);
setLoading(false);
})
.catch(err => {
console.error(err);
setError(err);
});
}, []);
if (loading) return "Loading...";
if (error) return "Oops!";
return users[0].username;
}但这并没太简单化要求启用。关键的好处在于它能够强制性一致地解决 HTTP 启用。其观念是这样子的：当相关函数一起操作时，比较容易一致地解决他们。假如 userService 文件夹名称中充满着开展 HTTP 调用的函数公式，那我能够很容易地保证他们始终如一地这么做。除此之外，假如启用被重复使用，则非常容易从这一集中化部位启用他们。
但是，我们也可以做的更好。
方法3：自定Hook
依靠 React Hooks 的魔法，大家终于能集中统一处理反复的思路。那样如何建立一个自定 useFetch 勾子来简单化我们自己的 HTTP 启用呢？
import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const prevInit = useRef();
const prevUrl = useRef();
useEffect(() => {
// Only refetch if url or init params change.
if (prevUrl.current === url && prevInit.current === init) return;
prevUrl.current = url;
prevInit.current = init;
fetch(process.env.REACT_APP_API_BASE_URL url, init)
.then(response => {
if (response.ok) return response.json();
setError(response);
})
.then(data => setData(data))
.catch(err => {
console.error(err);
setError(err);
})
.finally(() => setLoading(false));
}, [init, url]);
return { data, loading, error };
}你很有可能看上去不一样，但我发现这一基本上使用方法非常有用。这一 Hook 在很大程度上优化了全部启用。看一下使用这种 Hook 要多少编码 :
import React from "react";
import useFetch from "./useFetch";
export default function HookDemo() {
const { data, loading, error } = useFetch("users");
if (loading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}对于很多应用软件，你只需要一个这种自定Hook。但这个Hook早已非常复杂了，并且它规避了诸多问题。
可是还有一些大家没有考虑到一个点：缓存文件？、假如客户端的联接不可信，怎样重新获得？你想要在客户重新规划标识时重新获得新数据吗？怎么消除反复查看？
你能逐步完善这一自定Hook去完成这所有的一切实际操作。可是，您应该只需方法4:
方法4：react-query/swr
应用 react-query或swr，能够为大家解决缓存文件、再试、反复查看这些。我无须维护自己自定Hook了。但是每个 HTTP 启用都要非常少的代码：
import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";
export default function ReactQueryDemo() {
const { data, isLoading, error } = useQuery("users", getUsers);
if (isLoading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}对于大部分应用软件而言，今日这就是我的优选。这也是详细的代码：https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug，也可以自己进行对比。
强烈推荐学习培训：《react视频教程》
以上就是关于react中要求远程控制数据库的四种方法有哪些的具体内容，大量欢迎关注AdminJS其他类似文章！