react发送Ajax中文问号,在React中你真的用对了Ajax吗？

通过AJAX加载初始数据

通过AJAX加载数据是一个很普遍的场景。在React组件中如何通过AJAX请求来加载数据呢？首先，AJAX请求的源URL应该通过props传入；其次，最好在componentDidMount函数中加载数据。加载成功，将数据存储在state中后，通过调用setState来触发渲染更新界面。

注意：

AJAX通常是一个异步请求，也就是说，即使componentDidMount函数调用完毕，数据也不会马上就获得，浏览器会在数据完全到达后才调用AJAX中所设定的回调函数，有时间差。因此当响应数据、更新state前，需要先通过this.isMounted() 来检测组件的状态是否已经mounted。

下面是利用GitHub网站提供的API接口获取某个用户近况信息的例子。

var UserGist = React.createClass({

getInitialState: function() {

return {

username: '',

lastGistUrl: ''

};

},

componentDidMount: function() {

$.get(this.props.source, function(result) {

var lastGist = result[0];

if (this.isMounted()) {

this.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

});

}

}.bind(this));

},

render: function() {

return (

{this.state.username}'s last gist is

here.

);

}

});

React.render(

,

mountNode

);

使用jQuery库所提供的ajax请求$.ajax函数数据也存在一些问题，如兼容性问题就很令人头疼。React推荐使用fetch库，其在API接口层面和jQuery类似，读者可以自行搜索相关资料，熟悉 $.ajax可以很快上手。

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

react中使用map时onClick事件失效

分享一些踩过的坑 react中使用map时onClick事件失效 { count.map( (item,index)=>{ return

React中diff算法的理解

React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

理解React中es6方法创建组件的this

首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

【原】React中,map出来的元素添加事件无法使用

在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

React中props.children和React.Children的区别

在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return (

Immutable 详解及 React 中实践

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

React中父组件与子组件之间的数据传递和标准化的思考

React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

React中使用CSSTransitionGroup插件实现轮播图

动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

随机推荐

java多线程同步，等待，唤醒

notify().notifyAll().wait()属于java.lang.Object,java.lang.Thread也是Object,自然也有上述方法: sleep().interrupt() ...

JdbcTemplae使用入门&&Spring三种连接池配置&&Spring配置文件引用外部properties文件

JdbcTemplate的使用 Spring为了各种支持的持久化技术,都提供了简单操作的模版和回调. JdbcTemplate 简化 JDBC 操作HibernateTemplate 简化 Hiber ...

iOS RTMP 视频直播开发笔记(1) – 采集摄像头图像

1. 采集硬件(摄像头)视频图像 这里简单说下 iOS 的摄像头采集. 首先初始化AVCaptureSession,说到Session,有没有人想到AVAudioSession呢? // 初始化 AV ...

Circular placeholder reference 'jdbc.driver' in property definitions

Caused by: java.lang.IllegalArgumentException: Circular placeholder reference 'jdbc.driver' in prope ...

Linux环境下Swap配置方法

Linux环境下Swap配置方法 场景: 今天下午安装一个CentOS6.5操作系统,忘记配置swap分区.看看如何安装系统之后,增加和删除swap分区.方法如下:1.内存占用情况[root@josh ...

ISP PIPLINE (二) LensShading Correct

what is the LSC? lens shading 分为:Y-shading , color shading. 在讲LSC之前,我们先来理解一个重要的术语--CRA(Chief ray ang ...

poj2398

题解: 计算几何入门题 对每个二分最近的在它右边的杆子 如何判断一个杆子在它右边呢 计算机判断这些要更善于利用点积和叉积 如果叉积为正代表在顺时针方向叉积为负在逆时针 发现要在struct里面重载运算 ...

flex socket policy

@ flex的as3代码是具备使用origin tcp socket通信能力的. @ 如果是flex builder本机调试,那么可以直连tcp的server. @ 如果flex发布在webserve ...

Intellij IDEA Module 的Language Level的问题

最近从github上fork了张开涛的Shiro代码,IDE是Intellij IDEA.发现无论是Project还是Module,默认的Language Level都是JDK 1.5,而且每次修改都 ...