获取数据的 3 种方法及它们的优缺点

Page>有一个获取数据的异步方法fetch()。在获取请求完成后，使用 setState 方法来更新employees。

this.fetch()在componentDidMount()生命周期方法中执行:它在组件初始渲染时获取员工数据。

当咱们关键字进行过滤时，将更新 props.query 。每当 props.query 更新，componentDidUpdate()就会重新执行this.fetch()。

虽然生命周期方法相对容易掌握，但是基于类的方法存在样板代码使重用性变得困难。

优点：

这种方法很容易理解:componentDidMount()在第一次渲染时获取数据，而componentDidUpdate()在props更新时重新获取数据。

缺点：

• 样板代码：基于类的组件需要继承React.Component，在构造函数中执行 super(props) 等等。
• this：使用 this 关键字很麻烦。
• 代码重复：componentDidMount()和componentDidUpdate()中的代码大部分是重复的。
• 很难重用：员工获取逻辑很难在另一个组件中重用。

2. 使用 Hooks 获取数据

Hooks 是基于类获取数据方式更好的选择。作为简单的函数，Hooks 不像类组件那样还要继承，并且也更容易重用。

简单回忆一下useEffect(callback[, deps]) Hook 。这个hook在挂载后执行callback ，并且当依赖项deps发生变化时重新渲染。

如下示例所示，在<EmployeesPage>中使用useEffect()获取员工数据：

（编辑：周口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!