React 概览React 安装Webpack 配置 React 开发环境JSX 引入JSX 使用 JSX 属性扩散JSX 与 HTML 的差异React 组件React 组件生命周期React 事件处理React DOM操作React 组合组件React 组件间通信React MixinsData FlowFluxRedux进化 FluxRedux 的基础概念React 应用中使用 ReduxReact State(状态)React PropsReact Props 验证器React 组件 APIReact AJAXReact 表单与事件React RefsReactJS - KeysReactJS - 路由(Router)React 动画ReactJS 高级组件ReactJS - 最佳实践(Best Practices)
React AJAX
react 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
以下代码使用 jquery 完成 Ajax 请求。
React Ajas 获取 Github 用户最新 gist 共享描述范例
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} 用户最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});
Reactdom.render(
<UserGist source="https://api.github.com/users/loganrichard/gists" />,
document.getElementById('app')
);