时间：2016-08-15 17:38:54
作者：zhongxia
地址：
React 异步解决方案
1. React官方提供的解决方案 Load Initial Data via AJAX
使用jQuery的Ajax方法，在一个组件的 componentDidMount()
中发ajax请求，拿到的数据存在组件自己的state中，并调用setState
方法去更新UI。如果是异步获取数据，则在 componentWillUnmount
中取消发送请求。
如果只是为了使用jQuery的Ajax方法就引入整个jQuery库，既是一种浪费又加大了整个应用的体积。那我们还有什么其他的选择吗？事实上是有很多的：fetch()、fetch polyfill、axios...其中最需要我们关注的是window.fetch()
,它是一个简洁、标准化的javascript的Ajax API。在Chrome和Firefox中已经可以使用，如果需要兼容其他浏览器，可以使用fetch polyfill。
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);
2. 项目如何组织Ajax请求
React官方文档，告诉我们单个组件如何获取数据，但是没有告诉我们项目中，如何组织Ajax的请求，并且把数据保存在哪里？如果这部分没有规范，多个协作开发的话，会让项目混乱，难以维护。
