AJax技术

React AJAX

字号+ 作者:H5之家 来源:H5之家 2017-05-21 10:00 我要评论( )

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

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

当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

以下实例演示了获取 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/octocat/gists" />, mountNode );

尝试一下

以上代码使用 jQuery 完成 Ajax 请求。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 提升HTML5的性能体验系列之一 避免切页白屏

    提升HTML5的性能体验系列之一 避免切页白屏

    2017-05-08 17:05

  • php+html5+ajax实现上传图片的方法

    php+html5+ajax实现上传图片的方法

    2017-05-06 18:00

  • ajax技术 ajax方法

    ajax技术 ajax方法

    2017-04-17 14:01

  • ajax技术 load方法

    ajax技术 load方法

    2017-03-20 09:00

网友点评