减小字体
增大字体- ·上一篇文章：React 组件生命周期
- ·下一篇文章：React 表单与事件
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
React AJAX
React AJAXReact 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。以下实例演示了获取 Github 用户最新 gist 共享描述:
React 实例class UserGist extends React.Component {constructor(props) {super(props);this.state = {username:
'', lastGistUrl:
''};}componentDidMount() {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() {this.serverRequest.abort();}render() {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/octocat/gists" />,document.getElementById('example')); 尝试一下 ?以上代码使用 jQuery 完成 Ajax 请求。
React 实例class UserGist extends React.Component {constructor(props) {super(props);this.state = {username:
'', lastGistUrl:
''};}componentDidMount() {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() {this.serverRequest.abort();}render() {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/octocat/gists" />,document.getElementById('example')); 尝试一下 ?以上代码使用 jQuery 完成 Ajax 请求。
React AJAX
