React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > 在Suspense中请求数据

React之如何在Suspense中优雅地请求数据

作者：LunaSeki

Suspense 是 React 中的一个组件，直译过来有悬挂的意思，能够将其包裹的异步组件挂起，直到组件加载完成后再渲染，本文详细介绍了如何在Suspense中请求数据，感兴趣的小伙伴可以参考阅读本文

什么是 Sunpense

Suspense 是 React 中的一个组件，直译过来有悬挂的意思，能够将其包裹的异步组件挂起，直到组件加载完成后再渲染

懒加载

在 React 组件挂载的过程中，一般是等所有的组件都加载好后一起挂载到 Dom 上， 如果出现了较大的组件，就会拖慢网页整体的加载速度，特别是在 SPA 上会出现长时间的白屏，影响用户体验

于是，React 提供了lazy Api，用于延迟加载某个组件，这样就不会拖慢其他组件的加载速度

给 React 上的 lazy 方法传入一个返回 Promise 或类 Promise 对象的函数，即可实现对 Promise 的结果的懒加载

恰好，ES 中的动态引入import()就会返回一个 Promise，因此我们可将其写成匿名函数的返回值，并作为参数传给lazy，下面代码就对组件进行了懒加载

// 对Component进javascript行懒加载
const LazyComponent = React.lazy(() => import("./Component"));

挂起

但是通过lazy得出的组件直接使用的话会在加载时报错，还需要在外面包裹一层 Suspense 组件才能够正常使用

// 懒加的载子组件
const SubComponent = React.lazy(() => import("./SubComponent"));

// 用Suspense包裹的组件会被挂起，加载完成后再挂载
function MainComponent() {
	return <Suspense fallback={<div>Loading......</div>}>
        <SubComponent>
    </Suspense>;
}

渲染时，React 会先将 Suspense 的 fallback 中的内容挂载，并将子组件挂起，等待加载完成后就挂载，并将 fallback 卸载 例如上面的代码，会在 SubComponent 加载时显示 Loading......，等待 Subcomponent 加载完成后显示子组件内容

懒加载组件的加载过程

为啥直接使用会懒加载的组件报错呢？我们输出一下lazy返回的对象看看：

原来这个对象并不是我们熟悉的组件，而是拥有状态（status）和结果（result）的高阶对象，直接使用当然会报错啦

那么问题来了，React 为什么要返回这个对象而不是返回一个普通的组件呢？

这是为了通知 Suspense 组件！

简单地说，Suspense 组件会尝试渲染子组件，假如子组件未加载完成，则会转而渲染 fallback 里的内容

那么 Suspense 又是如何判断子组件是否加载完成的呢？对了，就是通过捕获子组件异常！

子组件有三种状态：

Suspense 会尝试加载子组件，并通componentDidCatch过对抛出的异常进行捕获，大概加载流程为：

这样，通过对未加载完成的子组件不断尝试加载，就能够实现“挂起”这一过程

对需要请求数据的组件使用 Suspense

现在我们知道，需要将子组件加载的状态通知 Suspense 才能够实等待 ajax 请求后再加载组件的效果，所以普通使用 ajax 发起请求是无法做到的

react-cache

react-cache 是 React 官方的处理数据副作用方案，里面提供了一个方法unstable_createResource，用于创建一个类似懒加载组件的对象

你可以访问这个对象上的read方法，若访问的数据不存在，则动态加载，并抛出 Promise,若数据存在，则正常返回数据。听起来是不是和懒加载很像？

import getURL from "./api"; //一个封装的请求，返回一个Promise
import { unstable_createResource } from "react-cache";

// 类似import(),传入一个返回值为PRomise的函数，生成一个拥有状态的对象
const myData = unstable_createResource(() => {
	getURL();
});
// 在子组件中使用
function SubComponent() {
	const data = myData.read();
	return <div>{data}</div>;
}

这样，父组件中包裹子组件的 Suspense 就能像检测懒加载组件一样检测子组件数据加载的状态，从而展示 fallback 或子组件了

但是，react-cache 其实是一种数据缓存方案，使用 LRU（当缓存空间满时，优先清理最近最少使用的数据）策略缓存数据，能够根据不同的参数缓存请求的结果，并供组件调用，如下

import getURL from "./api";
import { unstable_createResource } from "react-cache";

const myData = unstable_createResource(
	(param1, param2) => {
		getURL(param1, param2);
	},
	(param1, param2) => param1 + param2
);

unstable_createResource接受了两个参数

这样,使用时就能read方法传递不同的参数，对于缓存一些高频使用的接口的数据非常有用

如果你只是想初始化时请求、不想使用缓存，或者单纯的不想引入更多库，那么可以手写一个能够通知 Suspense的函数

自己写一个加工函数

从上面两个例子可以知道，要通知 Suspense 函数，则必须要根据 Promise 状态进行不同的操作

为了简化，我们的加工函数就不自己创建 Promise 了，而是在外面创建后对 Promise 进行加工

// 创建函数，接受一个promise
function wrapPromise(promise) {
	let status = 0;
	let result;
	// 调用promise，并在回调中更改加工函数中的状态
	const callPromise = promise.then(
		(res) => {
			status = 1;
			result = res;
		},
		(err) => {
			status = -1;
			result = err;
		}
	);
	// 返回一个对象，只需要提供read方法
	return {
		read() {
			switch (status) {
				case 0:
					throw callPromise;
				case 1:
					return result;
				case -1:
					throw result;
			}
		},
	};
}

这样，子组件通过调用加工函数返回的对象上的read方法，即可根据请求的状态优雅地加载组件了

// 获取加工后的对象
const data = wrapPromise(promise);

// 在子组件中使用
function SubComponent() {
	const data = myData.read();
	return <div>{data}</div>;
}

请求数据的时机

有了 Suspense 和加工函数，我们还要知道该在什么地方调用加工函数

结论

要优雅地在 Suspense 中请求数据，其实只要实现通过抛出异常通知 Suspense 即可

实际开发中通过 promise.then 直接操控自定义的加载遮罩也比较常见，也不必强行使用 Suspense

但是如果需要对数据进行缓存，那么在使用 react-cache 时顺手用上 Suspense 就更方便了

到此这篇关于React之如何在Suspense中优雅地请求数据的文章就介绍到这了,更多相关在Suspense中请求数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文