反应中获取数据的方法

了解反应中获取数据的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

反应中获取数据的方法:1、使用生命周期方法请求数据;2、使用钩子获取数据;3、使用悬念获取数据。

<强>反应中获取数据的方法:

<强> 1。使用生命周期方法请求数据

应用程序Employees.org做两件事:

1。一进入程序就获取20名员工。

2。可以通过过滤条件来筛选员工。

在实现这两个需求之前,先来回顾一下反应类组件的2个生命周期方法:

<李>

<代码> componentDidMount() :组件挂载后执行

<李>

<代码> componentDidUpdate (prevProps)>

组件& lt; EmployeesPage>使用上面两个生命周期方法实现获取逻辑:

从“进口EmployeesList。/EmployeesList"; 　　从“进口{fetchEmployees}/fake-fetch"; 　　类EmployeesPage扩展组件{ 　　构造函数(道具){ 　　超级(道具); 　　这一点。状态={员工:[],isFetching:真正的}; 　　} 　　componentDidMount () { 　　this.fetch (); 　　} 　　componentDidUpdate (prevProps) { 　　如果(prevProps。查询!==this.props.query) { 　　this.fetch (); 　　} 　　} 　　异步获取(){ 　　这一点。设置状态({isFetching:真}); 　　const员工=等待fetchEmployees (this.props.query); 　　这一点。设置状态({员工isFetching:假}); 　　} 　　呈现(){ 　　const {isFetching,员工}=this.state; 　　如果(isFetching) { 　　返回& lt; div>获取员工数据中……& lt;/div>; 　　} 　　返回& lt; EmployeesList员工={员工}/祝辞;; 　　} 　　}

打开codesandbox可以查看<代码> & lt; EmployeesPage> 获取过程。

<代码> & lt; EmployeesPage>

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

当咱们关键字进行过滤时,将更新道具。查询。每当道具。查询更新componentDidUpdate()就会重新执行this.fetch ()。

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

<>强优点

这种方法很容易理解:<代码> componentDidMount() 在第一次渲染时获取数据,而<代码> componentDidUpdate() 在道具更新时重新获取数据。

<强>缺点

样板代码

基于类的组件需要继承反应。组件,在构造函数中执行<代码>超级(道具)等等。

:使用这个关键字很麻烦。

代码重复

<代码> componentDidMount() 和<代码> componentDidUpdate() 中的代码大部分是重复的。

很难重用

员工获取逻辑很难在另一个组件中重用。

<强> 2。使用钩子获取数据

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

简单回忆一下<代码> useEffect(回调(deps])钩>

如下示例所示,在& lt; EmployeesPage>中使用useEffect()获取员工数据:

从“进口EmployeesList。/EmployeesList"; 　　从“进口{fetchEmployees}/fake-fetch"; 　　查询函数EmployeesPage ({}) { 　　const [isFetching setFetching]=useState(假); 　　const[员工,setEmployees]=useState ([]); 　　useEffect (fetch()函数{ 　　(异步函数(){ 　　setFetching(真正的); 　　setEmployees(等待fetchEmployees(查询)); 　　setFetching(假); 　　}) (); 　　},[查询]); 　　 　　如果(isFetching) { 　　返回& lt; div>获取员工.... & lt;/div>; 　　} 　　返回& lt; EmployeesList员工={员工}/祝辞;; 　　}

打开<代码> codesandbox>

可以看到使用钩子的& lt; EmployeesPage>比使用类组件方式简单了很多。

在& lt; EmployeesPage>函数组件中的<代码> useEffect(取回,[查询])>

但仍有优化的空间.Hooks允许咱们从& lt; EmployeesPage>组件中提取雇员获取逻辑,来看看:

进口反应,{useState} & # 39;反应# 39;; 　　从“进口EmployeesList。/EmployeesList"; 　　从“进口{fetchEmployees}/fake-fetch"; 　　函数useEmployeesFetch(查询){//这行有变化 　　const [isFetching setFetching]=useState(假); 　　const[员工,setEmployees]=useState ([]); 　　useEffect(函数获取{ 　　(异步函数(){ 　　setFetching(真正的); 　　setEmployees(等待fetchEmployees(查询)); 　　setFetching(假); 　　}) (); 　　},[查询]); 　　返回(isFetching、员工); 　　} 　　查询函数EmployeesPage ({}) { 　　const[员工,isFetching]=useEmployeesFetch(查询);//这行有变化 　　 　　如果(isFetching) { 　　返回& lt; div>获取员工.... & lt;/div>; 　　} 　　返回& lt; EmployeesList员工={员工}/祝辞;; 　　}

反应中获取数据的方法