十一、Ajax
最后更新于：2022-04-01 03:42:29
## 十一、Ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看 [demo11](https://github.com/ruanyf/react-demos/blob/master/demo11/index.html) ）。
> ~~~
> 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>
> );
> }
> });
>
> React.render(
> <UserGist source="https://api.github.com/users/octocat/gists" />,
> document.body
> );
> ~~~
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 没有任何依赖，完全可以使用其他库。