React.Suspense是什么

#React.Suspense是什么| 来源: 网络整理| 查看: 265

suspense的字面意思就是悬而不决，用在平时开发中，就可以理解为还没有完成的事，你不知道啥时候完成。也就是异步，异步加载组件，异步请求数据。

Suspense是用来做什么的？ 1. 代码拆分

服务于打包优化的代码拆分。lazy和suspense配合使用

const A = React.lazy(() => import('./A')) return ( ) 复制代码

这样在打包代码时，可以显著减少主包的体积，加快加载速度，从而提升用户体验；而当路由切换时，加载新的组件代码，代码加载是异步的过程，此时suspense就会进如fallback，那我们看到的就是loading，显式的告诉用户正在加载，当代码加载完成就会展示A组件的内容，整个loading状态不用开发者去控制。

2. 异步加载数据

既然代码拆分可以不用维护loading，那么加载数据是不是也可以不用维护loading状态呢？

当然可以！

但是直接用axios或者fetch是无法进入suspense的fallback的，但是react提供了一个库供我们使用react-cache(暂不建议使用的),它具体是做什么的，原理是什么，我们后面在讨论，这里先体验一下效果如何。

现在用的方法，管理loading状态 function A() { const [loading, setLoading] = useState(false) const [list, setList] = useState([]) function getList() { setloading(true) promise.then(res => { setList(res) }) .finally(() => { setLoading(false) }) } useEffect(() => { getList() }, []) return ( data... {loading && loading} ) } 复制代码使用suspense处理数据加载 const resource = unstable_createResource((id) => { return Promise.resolve([]) }) function B() { const data = resource.read(0) return (

【本文地址】

公司简介

联系我们