React中获取数据的3种方法及优缺点
为了保证的可读性,本文采用意译而非直译。
在执行I/O操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。
在React中生命周期方法、Hooks和Suspense是获取数据的方法。接下用事例演示一下如何使用它们并说明每种方法的优点和缺点,以便咱们更好的编写异步操作代码。
1.使用生命周期方法请求数据
应用程序Employees.org做两件事:
1.一进入程序就获取20名员工。
2.可以通过过滤条件来筛选员工。
在实现这两个需求之前,先来回顾一下React类组件的2个生命周期方法:
componentDidMount():组件挂载后执行
componentDidUpdate(prevProps):当props或state改变时执行
组件
importEmployeesListfrom"./EmployeesList"; import{fetchEmployees}from"./fake-fetch"; classEmployeesPageextendsComponent{ constructor(props){ super(props); this.state={employees:[],isFetching:true}; } componentDidMount(){ this.fetch(); } componentDidUpdate(prevProps){ if(prevProps.query!==this.props.query){ this.fetch(); } } asyncfetch(){ this.setState({isFetching:true}); constemployees=awaitfetchEmployees(this.props.query); this.setState({employees,isFetching:false}); } render(){ const{isFetching,employees}=this.state; if(isFetching){ return获取员工数据中...; } return; } }
打开codesandbox可以查看
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发生变化时重新渲染。
如下示例所示,在
importEmployeesListfrom"./EmployeesList"; import{fetchEmployees}from"./fake-fetch"; functionEmployeesPage({query}){ const[isFetching,setFetching]=useState(false); const[employees,setEmployees]=useState([]); useEffect(functionfetch(){ (asyncfunction(){ setFetching(true); setEmployees(awaitfetchEmployees(query)); setFetching(false); })(); },[query]); if(isFetching){ returnFetchingemployees....; } return; }
打开codesandbox可以查看useEffect()如何获取数据。
可以看到使用Hooks的
在
。
但仍有优化的空间。Hooks允许咱们从
importReact,{useState}from'react'; importEmployeesListfrom"./EmployeesList"; import{fetchEmployees}from"./fake-fetch"; functionuseEmployeesFetch(query){//这行有变化 const[isFetching,setFetching]=useState(false); const[employees,setEmployees]=useState([]); useEffect(functionfetch{ (asyncfunction(){ setFetching(true); setEmployees(awaitfetchEmployees(query)); setFetching(false); })(); },[query]); return[isFetching,employees]; } functionEmployeesPage({query}){ const[employees,isFetching]=useEmployeesFetch(query);//这行有变化 if(isFetching){ returnFetchingemployees....; } return; }
从useEmployeesFetch()提到所需要的值。组件
更好的是,可以在需要获取雇员的任何其他组件中重用useEmployeesFetch()。
优点
清楚和简单
Hooks没有样板代码,因为它们是普通的函数。
可重用性
在Hooks中实现的获取数据逻辑很容易重用。
缺点需要前置知识
Hooks有点违反直觉,因此在使用之前必须理解它们,Hooks依赖于闭包,所以一定要很好地了解它们。
必要性
使用Hooks,仍然必须使用命令式方法来执行数据获取。
3.使用suspense获取数据
Suspense提供了一种声明性方法来异步获取React中的数据。
注意:截至2019年11月,Suspense处于试验阶段。
Fetchinprogress...}>
数据获取时,Suspense将显示fallback中的内容,当获取完数据后,Suspense将使用获取到数据渲染
来看看怎么使用Suspense:
importReact,{Suspense}from"react"; importEmployeesListfrom"./EmployeesList"; functionEmployeesPage({resource}){ return(Fetchingemployees....}> ); } functionEmployeesFetch({resource}){ constemployees=resource.employees.read(); return ; }
打开codesandbox可以查看Suspense如何获取数据。
最大的优点是: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/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。