在进行I/O操作（如数据提取）时，必须先发送网络请求，然后等待响应，然后将响应数据保存到state组件，最后渲染。生命周期方法、Hooks和Suspense是React中获取数据的方式。接下来通过实例来演示如何使用，并说明每种方法的优缺点，以便我们更好的编写异步操作代码。1.使用生命周期方法请求数据应用程序Employees.org做了两件事：(1)一进入程序就获取20名员工。2.可按筛选条件筛选员工。在实现这两个需求之前，先回顾一下React类组件的两个生命周期方法：componentDidMount():ExecutecomponentDidUpdate(prevProps)afterthecomponentmounted:Executecomponentwhenpropsorstatechanges使用以上两个生命周期方法实现采集逻辑：打开codesandbox查看采集过程。有一个异步方法fetch()来获取数据。获取请求完成后，使用setState方法更新员工。this.fetch()在componentDidMount()生命周期方法中执行：它在组件最初呈现时获取员工数据。当我们按关键字过滤时，props.query将被更新。componentDidUpdate()将在props.query更新时重新执行this.fetch()。虽然生命周期方法相对容易掌握，但基于类的方法具有样板代码，这使得重用性变得困难。优点：这种方法很容易理解：componentDidMount()在第一次渲染时获取数据，而componentDidUpdate()在props更新时重新获取数据。缺点：样板代码：基于类的组件需要继承React.Component，在构造函数中实现super(props)等this：使用this关键字比较麻烦。代码重复：componentDidMount()和componentDidUpdate()中的大部分代码都是重复的。难以重用：员工获取逻辑很难在另一个组件中重用。2.使用Hooks获取数据Hooks是基于类获取数据的更好选择。作为简单的功能，Hooks不像类组件那样需要继承，也更容易复用。回想一下useEffect(callback[,deps])Hook。该挂钩在挂载后执行回调，并在依赖deps更改时重新呈现。如下例所示，使用useEffect()获取中的员工数据：打开codesandbox查看useEffect()获取数据的方式。可以看到使用Hooks比使用类组件要简单得多。功能组件中的useEffect(fetch,[query])，在初始渲染后执行fetch回调。此外，更新依赖项查询时会重新执行fetch方法。但仍有优化空间。钩子允许我们从组件中提取员工获取逻辑，让我们看看：从useEmployeesFetch()中提及所需的值。组件没有对应的获取逻辑，只负责渲染界面。更好的是，useEmployeesFetch()可以在任何其他需要获取员工的组件中重复使用。优点：清晰简单：Hooks没有样板代码，因为它们是普通函数。可重用性：在Hooks中实现的抓取逻辑很容易重用。缺点：需要先验知识：Hooks有点违反直觉，所以在使用之前一定要先了解一下，Hooks依赖于闭包，所以一定要了解好。必要性：有了Hooks，你仍然必须使用命令式的方式来执行数据获取。3、使用suspense获取数据Suspense在React中提供了一种声明式的异步获取数据的方式。注意：截至2019年11月，Suspense处于试验阶段。包装了执行异步操作的组件：Fetchinprogress...}>当数据被抓取时，Suspense会显示fallback中的内容，并且当获取完成数据后，Suspense会使用获取的数据来渲染。下面看看如何使用Suspense：打开codesandbox看看Suspense是如何获取数据的。使用Suspense处理组件将获取的数据传递给组件。中的resource.employees是一个特殊包装的承诺，它在幕后与Suspense通信。这样，Suspense就知道要“暂停”渲染多长时间，当资源准备好时，渲染工作就开始了。最大的优势：Suspense以声明和同步的方式处理异步操作。组件没有复杂的数据获取逻辑，而是以声明方式使用资源来呈现内容。在组件内部没有生命周期、没有Hooks、异步/等待、没有回调：只有接口。优点：声明式：Suspense在React中以声明方式执行异步操作。简单：声明式代码使用简单，这些组件没有复杂的数据获取逻辑。与Fetch实现松散耦合：使用Suspense的组件看不到如何获取数据：使用REST或GraphQL。Suspense设置了一个边界，以防止访问细节泄露到组件中。标准状态：如果请求了多个fetch操作，Suspense将使用最新的fetch请求。4.总结长期以来，生命周期方法一直是解决如何获取数据的唯一解决方案。然而，使用它们来获取数据会带来大量样板代码、重复和可重用性问题。使用Hooks获取数据是一个更好的选择：更少的样板代码。Suspense的好处是声明式抓取。我们的组件不会因获取实现细节而变得混乱。Suspense更接近于React本身的声明性。
