react ajax lib,React AJAX

本文详细介绍了React组件的生命周期方法,特别是`componentDidMount`的使用,以及如何在此阶段进行Ajax请求获取数据。通过示例展示了如何将获取到的数据更新到组件状态,并在页面上展示。同时,还讨论了在组件卸载时如何清理不必要的请求,以避免内存泄漏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上述事件的另外一种写法:

class UserGist extends React.Component {

constructor(props) {

super(props);

//在state设置两个属性,以便后续通过state对象来对其进行修改

this.state = {username: '', lastGistUrl: ''};

//绑定挂载事件

this.componentDidMount = this.componentDidMount.bind(this);

}

componentDidMount() {

//接下来操作state时上下文对象发生改变,此处拿到操作句柄

var that = this;

//ajax请求

this.serverRequest = $.ajax({

url: this.props.source,

type:"GET",

dataType: 'jsonp',

success: function (result) {

console.log(result.data);

var lastGist = result.data[0];

//此处的上下文发生改变,this的指针指向发生了变化,通过上述定义的that来操作

that.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

})

}

})

}

//卸载React组件时,把多余请求关闭,以免影响其他框架或组件的操作

componentWillUnmount() {

this.serverRequest.abort();

}

render() {

return (

{this.state.username} 用户最新的 Gist 共享地址:

{this.state.lastGistUrl}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

白日放歌

白日放歌

155***8087@qq.com1年前 (2018-12-20)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值