首页 > web前端 > 前端问答 > react请求数据用什么钩子

react请求数据用什么钩子

青灯夜游
发布: 2022-03-22 14:52:39
原创
1938 人浏览过

react请求数据用“componentDidMount”钩子。React的数据请求是在钩子函数componentDidMount()中进行的,该函数可以用来加载外部数据,或处理其他的副作用代码。

react请求数据用什么钩子

本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。

React的数据请求是在钩子函数:componentDidMount 中进行的

componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。

针对React中使用起来较为方便的几种数据请求方式进行了汇总,主要有以下三种,都是通过json-server模拟数据请求的接口。

1 axios

这种方法使用较为普遍,在vue中也是经常使用

使用前先下载一哈: npm i axios

 axios.get(' http://localhost:3000/datalist').then(res=>{
  console.log(res);
})
登录后复制

结果:
在这里插入图片描述

2 fetch方式

fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。【引自fetch】

fetch('http://localhost:3000/datalist').then(res=>res.json()).then(res=>{
     console.log(res)
})
登录后复制

结果:

在这里插入图片描述

3 传统的ajax请求

这个大家应该都不陌生就不细说了,当然在react也是可以用它的

let xhr = new XMLHttpRequest();
xhr.addEventListener('load',handler);
xhr.open("GET",'http://localhost:3000/datalist');
xhr.send();
function handler(e){
    console.log(JSON.parse(e.currentTarget.response));
}
登录后复制

结果:

在这里插入图片描述

【相关推荐:Redis视频教程

以上是react请求数据用什么钩子的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板