react ajax开发可以用:1、jQuery的“$.ajax”方法;2、Fetch API;3、SuperAgent,它是一个轻量级的AJAX API库;4、Axios库,主要是用于向后台发起请求的;5、Request库。
本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。
React AJAX 请求的5种方案
1、jQuery $.ajax
这是一个快速又粗暴的方案。在旧版本的官方 React 教程(official React tutorial)中,他们使用了 jQuery $.ajax
来示范如何从服务器获取数据。如果你是刚刚开始学习和把玩 React,jQuery 可以节省你大量入门和开发的时间,因为我们都对 jQuery 非常熟悉了。这是 jQuery 实现 AJAX 的例子:
loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); // 注意这里 }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }
P.S. 这代码段摘自旧版本的官方教程
这里演示了如何在一个 React 组件里面使用 jQuery 的 $.ajax
。唯一需要注意的是如何在 success
回调里面调用 this.setState()
,即当 jQuery 成功收到数据之后应该如何通过 React 的 API 更新 state 的。
然而,jQuery 是一个包含很多功能的大头儿,只为了用一下 AJAX 功能而引入整个 jQuery 是没有意义的(除非你还使用 jQuery 做了很多别的事情)。So,用什么才好?答案是 fetch
API。
2、Fetch API
https://github.com/github/fetch
Fetch
是个新的、简单的、标准化的API,旨在统一Web通信机制,并替代 XMLHttpRequest
。它已经被主流浏览器所支持,针对较旧的浏览器也有了一个 polyfill (Benz乱入:polyfill 直译是填充工具,就是旧浏览器本来不支持某个新的JS API,引入一段js代码后就支持了,这一段js代码给旧浏览器”填充“了一个API。这个单词我实在不知道怎么翻译 ,感觉反而保留原单词不翻译更能让读者理解。)。如果你在使用 Node.js ,你也可以通过 node-fetch 来使 Node.js 支持 Fetch
。
若把上述用 jQuery $.ajax
的代码段改成 fetch
实现的话,代码应该长这样子:
loadCommentsFromServer: function() { fetch(this.props.url).then(function(response){ // 在这儿实现 setState }); }
在一些流行的 React 教程中你也许会发现 fetch
的身影。要了解更多关于 fetch
的情况,可参考下列链接(全英文):
- Mozilla
- David Walsh Blog
- Google Developers
- WHATWG
3、SuperAgent
https://github.com/visionmedia/superagent
SuperAgent 是一个轻量级的 AJAX API 库,为更好的可读性和灵活性而生。如果某些原因让你不太想用 fetch
,那么 SuperAgent 就几乎是必然的选择了。SuperAgent 的用法大概是这样的:
loadCommentsFromServer: function() { request.get(this.props.url).end(function(err,res){ // 在这儿实现 setState }); }
SuperAgent 也有 Node.js 版本,API 是一样的。如果你在用 Node.js 和 React 开发同构应用(Benz 乱入:这个链接是我加的,旨在照顾初学者),你可以用 webpack 之类的东西嵌入 superagent
并让它适用于浏览器端。因为浏览器端和服务器端的 API 是一样的,所以其 Node.js 版本不需要修改任何代码就可以在浏览器上运行。
4、Axios
https://github.com/axios/axios
Axios 是一个基于 promise 对象(Benz 乱入:这个链接也是我加的)的 HTTP 客户端;axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。。与 fetch
和 superagent
一样,它同时支持浏览器端和 Node.js 端。另外你可以在其 Github 主页上发现,它有很多很实用的高级功能。
这是 Axios 的大概用法:
loadCommentsFromServer: function() { axios.get(this.props.url).then(function(response){ // 在这儿实现 setState }).catch(function(error){ // 处理请求出错的情况 }); }
5、Request
https://github.com/request/request
若不介绍这个 request 库,感觉上本文会不太完整。这是一个在思想上追求极简设计的JS库,在 Github 上拥有超过 12k 的 star (Benz 乱入:我翻译这文章时已经 16k+ star 了)。它也是最流行的 Node.js 模块之一。进入它的 GitHub 主页 了解更多。
用法示例:
loadCommentsFromServer: function() { request(this.props.url, function(err, response, body){ // 在这儿实现 setState }); }
【相关推荐:Redis视频教程】
以上是react ajax开发用什么的详细内容。更多信息请关注PHP中文网其他相关文章!

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版
视觉化网页开发工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

Atom编辑器mac版下载
最流行的的开源编辑器

SublimeText3 Linux新版
SublimeText3 Linux最新版