React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

方式一：通过jq或者zepto封装的ajax方法

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 (<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" />,document.body
);

方式二：fetch api

JavaScript 通过XMLHttpRequest(XHR)来执行异步请求，这个方式已经存在了很长一段时间。虽说它很有用，但它不是最佳API。它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且，基于事件的模型与最近JavaScript流行的Promise以及基于生成器的异步编程模型不太搭（事件模型在处理异步上有点过时了——译者注）。
新的 Fetch API打算修正上面提到的那些缺陷。 它向JS中引入和HTTP协议中同样的原语（即Fetch——译者注）。具体而言，它引入一个实用的函数 fetch() 用来简洁捕捉从网络上检索一个资源的意图。

Fetch 规范 的API明确了用户代理获取资源的语义。它结合ServiceWorkers，尝试达到以下优化：

• 改善离线体验

• 保持可扩展性

componentDidMount: function() {this.serverRequest = fetch(this.props.source).then((res) => {// res instanceof Response == true.if (res.ok) {res.json().then((data) => {var lastGist = data[0];if (this.isMounted()) {this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}});} else {console.log("Looks like the response wasn't perfect, got status", res.status);}}, function(e) {console.log("Fetch failed!", e);});
}

目前支持程度如下:

在github上，有基于低版本浏览器的 兼容实现

参考资料

JavaScript Fetch API
React 入门实例教程