欢迎来到这个夏天 来杯冰镇啤酒吧
Welcome to clear ocean water, To clear ocean water.

React AJAX

React笔记

AJAX

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

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

<body>
<div id="example"></div>

<script type="text/babel">
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} 史迪奇的博客:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
}

ReactDOM.render(
<UserGist source="https://sdq3.gitee.io" />,
document.getElementById('example')
);
</script>