新聞中心
React 組件的數(shù)據(jù)可以通過(guò) componentDidMount 方法中的 Ajax 來(lái)獲取,當(dāng)從服務(wù)端獲取數(shù)據(jù)庫(kù)可以將數(shù)據(jù)存儲(chǔ)在 state 中,再用 this.setState 方法重新渲染 UI。

創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、BGP機(jī)房服務(wù)器托管、云服務(wù)器、網(wǎng)站空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn),已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、網(wǎng)站空間、申請(qǐng)域名、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
當(dāng)使用異步加載數(shù)據(jù)時(shí),在組件卸載前使用 componentWillUnmount 來(lái)取消未完成的請(qǐng)求。
以下實(shí)例演示了獲取 Github 用戶最新 gist 共享描述:
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 (
{this.state.username} 用戶最新的 Gist 共享地址:
{this.state.lastGistUrl}
);
}
}
ReactDOM.render(
,
document.getElementById('example')
);
嘗試一下 ?
以上代碼使用 jQuery 完成 Ajax 請(qǐng)求。
相關(guān)教程
AJAX教程
網(wǎng)頁(yè)標(biāo)題:創(chuàng)新互聯(lián)React教程:ReactAJAX
URL網(wǎng)址:http://www.dlmjj.cn/article/dhhecic.html


咨詢
建站咨詢
