网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

React中获取数据的3种方法及优缺点-创新互联

为了保证的可读性,本文采用意译而非直译。

成都创新互联公司是一家专业从事成都网站制作、成都网站建设的网络公司。作为专业网站建设公司,成都创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都全网营销推广及网站设计开发服务!

在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。

在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。接下用事例演示一下如何使用它们并说明每种方法的优点和缺点,以便咱们更好的编写异步操作代码。

1.使用生命周期方法请求数据

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

1.一进入程序就获取20名员工。
2.可以通过过滤条件来筛选员工。

React中获取数据的3种方法及优缺点

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

componentDidMount():组件挂载后执行

componentDidUpdate(prevProps):当 propsstate 改变时执行

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

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

class EmployeesPage extends Component {
 constructor(props) {
 super(props);
 this.state = { employees: [], isFetching: true };
 }

 componentDidMount() {
 this.fetch();
 }

 componentDidUpdate(prevProps) {
 if (prevProps.query !== this.props.query) {
  this.fetch();
 }
 }

 async fetch() {
 this.setState({ isFetching: true });
 const employees = await fetchEmployees(this.props.query);
 this.setState({ employees, isFetching: false });
 }

 render() {
 const { isFetching, employees } = this.state;
 if (isFetching) {
  return 
获取员工数据中...
; } return ; } }

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:React中获取数据的3种方法及优缺点-创新互联
网站网址:http://bjjierui.cn/article/djgspd.html

其他资讯