React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

方式一：通过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 (      
    
             {this.state.username}'s last gist is        
     here.      
    
    );  }});ReactDOM.render(  
    ,  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);    });}

目前支持程度如下:

参考资料