import React, { Suspense } from "react"; import EmployeesList from "./EmployeesList"; function EmployeesPage({ resource }) { return ( <Suspense fallback={<h1>Fetching employees....</h1>}> <EmployeesFetch resource={resource} /> </Suspense> ); } function EmployeesFetch({ resource }) { const employees = resource.employees.read(); return <EmployeesList employees={employees} />; }
打开codesandbox可以查看Suspense如何获取数据。
<EmployeesPage>使用Suspense处理组件将获取到数据传递给<EmployeesFetch>组件。
<EmployeesFetch>中的resource.employees是一个特殊包装的promise，它在背后与Suspense进行通信。这样，Suspense就知道“挂起” <EmployeesFetch>的渲染要花多长时间，并且当资源准备就绪时，就开始执行渲染工作。
最大的优点是:Suspense 以声明性和同步的方式处理异步操作。组件没有复杂数据获取逻辑，而是以声明方式使用资源来渲染内容。在组件内部没有生命周期，没有 Hooks，async/await，没有回调：仅展示界面。
优点
声明式
Suspense 以声明的方式在React中执行异步操作。
简单
声明性代码使用起来很简单，这些组件没有复杂的数据获取逻辑。
松耦合与获取实现
使用Suspense的组件看不出如何获取数据:使用 REST 或 GraphQL。Suspense设置一个边界，保护获取细节泄露到组件中。
标准状态
如果请求了多个获取操作，那么Suspense会使用最新的获取请求。
原文：https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/
4.总结
很长一段时间以来，生命周期方法一直是获取数据方式的唯一解决方案。然而，使用它们获取数据会有很多样板代码、重复和可重用性方面的问题。
使用 Hooks 获取数据是更好的选择:更少的样板代码。
Suspense的好处是声明性获取。咱们的组件不会被获取实现细节弄得乱七八糟。Suspense更接近于React本身的声明性本质。
原文：https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/