[译] 实战 React 18 中的 Suspense
共 4613字，需浏览 10分钟
·
2023-05-05 22:22
> 原文：https://dev.to/darkmavis1980/a-practical-example-of-suspense-in-react-18-3lln
React 18 带来了很多变化，它不会破坏你已经编写过的代码，并且有很多改进和一些新概念。
它也让很多开发人员，包括我，意识到我们错误地使用了useEffect hook。但话说回来，我们被其名称所误导了，因为实际上useEffect并不应该被用于副作用。
在 React 18 中，虽然仍然可以使用useEffect来完成一些事情，如使用 API 接口读取的数据填充状态，但实际上不应该将其用于此类目的。如果你在应用程序中启用StrictMode，在开发模式下，你将发现使用useEffect会被调用两次，因为现在React会mount 组件、卸载它，然后再次 mount 它，以检查代码是否运行正常。
Suspense 来了
我们应该用来取而代之的，是新的Suspense组件（虽然它已经存在于 React 17 中，但现在是推荐的方法），此组件将会按照以下方式工作：
<Suspense fallback={<p>Loading...</p>}>
<MyComponent />
</Suspense>
上面的代码将会包裹一个组件，这个组件从某些数据源中加载数据，并在完成数据获取之前显示fallback。
Suspense 是什么
简而言之，可能和你想的不同，Suspense 并不是一个新的用于获取数据的接口，因为该工作仍然由诸如“fetch”或“axios”等库委派执行，而它实际上允许你将这些库与 React 集成，并且它的真正工作只是“在加载时显示这段代码，而在完成后显示那段代码”，仅此而已。
Suspense 如何工作
首先，你需要了解 Promise 的工作原理以及它的状态。无论使用传统方式new Promise()还是新的async/await语法来使用promise，在任何情况下，promise始终具有以下这三种状态：
-
pending-> 它仍在处理请求 -
resolved-> 请求已返回某些数据，我们获得了200 OK状态 -
rejected-> 出现了错误，获得了一个错误
Suspense使用的逻辑与ErrorBoundary完全相反，因此如果代码引发异常（因为它仍处于加载状态或者由于加载失败），则显示fallback；如果成功解析，则显示子组件。
举个例子
来看一个简单的例子，我们只需创建一个组件来获取API中的某些数据，并且希望在准备好后渲染该组件。
注意
为了简化，这里不会提到如何使用“startTransition”，添加错误边界，甚至不会涉及各种策略之间的区别，例如“fetch-on-render”、“fetch-then-render”等等...
包装 fetch 逻辑
如上所述，当我们的组件正在加载数据或失败时，需要抛出异常，但是一旦成功解决了Promise，就可以简单地返回响应。
为此，我们需要使用以下函数包装我们的请求：
// wrapPromise.js
/**
* 将promise包装，以便可以与React Suspense一起使用
* @param {Promise} 要处理的promise
* @returns {Object} 与Suspense兼容的响应对象
*/
function wrapPromise(promise) {
let status = 'pending';
let response;
const suspender = promise.then(
res => {
status = 'success';
response = res;
},
err => {
status = 'error';
response = err;
},
);
const handler = {
pending: () => {
throw suspender;
},
error: () => {
throw response;
},
default: () => response,
};
const read = () => {
const result = handler[status] ? handler[status]() : handler.default();
return result;
};
return { read };
}
export default wrapPromise;
因此，上面的代码将检查我们Promise的状态，然后返回一个名为“read”的函数，稍后我们将在组件中调用它。
现在，我们需要使用它包装接口请求库（例子中是axios），创建一个非常简单的函数:
//fetchData.js
import axios from 'axios';
import wrapPromise from './wrapPromise';
/**
* 用wrapPromise函数包装Axios请求
* @param {string} 要获取的URL
* @returns {Promise} 包装的promise
*/
function fetchData(url) {
const promise = axios.get(url).then(({data}) => data);
return wrapPromise(promise);
}
export default fetchData;
这只是以接口请求库表现的一种抽象，我想强调这只是一种非常简单的实现，您可以将上面的所有代码扩展到任何需要做的工作中。在这里我使用了axios，但你可以根据自己的需要使用任何东西。
在组件中读取数据
当获取方面的所有内容都准备好后，我们来在组件中使用它。假设有一个简单的组件，只需从某个接口读取名称列表并打印。不同于习惯中在组件中通过useEffect钩子调用 fetch 的做法，这一次我们要直接在组件开始时（放在任何 hooks 之外），使用我们在包装器中导出的read方法来调用请求，因此我们的Names组件大概是这个样子的：
// names.jsx
import React from 'react';
import fetchData from '../../api/fetchData.js';
const resource = fetchData('/sample.json');
const Names = () => {
const namesList = resource.read();
// rest of the code
}
这里所做的是，当调用组件时，read()函数将开始抛出异常，直到完全解析完成；其后，会继续执行其余代码，在此例中也就是继续 render。所以该组件的全部代码如下：
// names.jsx
import React from 'react';
import fetchData from '../../api/fetchData.js';
const resource = fetchData('/sample.json');
const Names = () => {
const namesList = resource.read();
return (
<div>
<h2>List of names</h2>
<ul>
{namesList.map(item => (
<li key={item.id}>
{item.name}
</li>))}
</ul>
</div>
);
};
export default Names;
父组件
现在 Suspense 将要发挥作用了，首先需要在父组件中导入它：
// parent.jsx
import React, { Suspense } from 'react';
import Names from './names';
const Home = () => (
<div>
<Suspense fallback={<p>Loading...</p>}>
<Names />
</Suspense>
</div>
);
export default Home;
到底肿么了？
我们将Suspense作为React组件导入，然后使用它来包装获取数据的组件，在这些数据被 resolve 之前，它将只会渲染“fallback”组件，因此只是<p>Loading...</p>或其他什么你需要的自定义组件。
结论
长时间使用useEffect以实现相同的结果后，当我第一次看到 Suspanse 这种用法时，我对这种新方法有些怀疑。包装获取库的整个过程有点让人生疑。但是现在，我可以看到它的好处，它非常容易处理加载状态，它抽象掉了一些代码，使其易于重用，并通过消除（好吧，至少在大多数情况下）组件本身的“useEffect”钩子简化了组件的代码，这在以前可是个让人头疼的事情。