这篇文章给大家分享的是有关如何处理react中setSate的异步问题的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到八宿网站设计与八宿网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站设计、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟空间、企业邮箱。业务覆盖八宿地区。
我们先来看下react的官方对setSate的说明:
将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。
一个很经典的例子:
// 初始state.count 当前为 0 componentDidMount(){ this.setState({count: state.count + 1}); console.log(this.state.count) }
如果你熟悉react,你一定知道最后的输出结果是0,而不是1。
我们再来看一个例子
class Demo extends Component { constructor(props) { super(props); this.state = { number: 0 }; } render() { return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>; } componentDidMount() { //手动绑定mousedown事件 this.refs.button.addEventListener( "mousedown", this.onClick.bind(this) ); //setTimeOut setTimeout(this.onClick.bind(this), 1000); } onClick(event) { if (event) { console.log(event.type); } else { console.log("timeout"); } console.log("prev state:", this.state.number); this.setState({ number: this.state.number + 1 }); console.log("next state:", this.state.number); } } export {Demo};
在这个组件中采用3中方法更新state
1.在p节点中绑定onClick事件 2.在componentDidMount中手动绑定mousedown事件 3.在componentDidMount中使用setTimeout调用onClick
在点击组件后,你可以猜到结果吗?输出结果是:
timeout prev state: 0 next state: 1 mousedown prev state: 1 next state: 2 click prev state: 2 next state: 2
结果似乎有点出人意料,三种方式只有在p上绑定的onClick事件输出了可以证明setState是异步的结果,另外两种方式显示setState似乎是同步的。
总结:
1.在组件生命周期中或者react事件绑定中,setState是通过异步更新的。
2.在延时的回调或者原生事件绑定的回调中调用setState不一定是异步的。
这个结果并不说明setState异步执行的说法是错误的,更加准确的说法应该是setState不能保证同步执行。
感谢各位的阅读!关于如何处理react中setSate的异步问题就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文名称:如何处理react中setSate的异步问题
文章URL:https://www.cdcxhl.com/article18/jpsedp.html
成都网站建设公司_创新互联,为您提供网页设计公司、品牌网站建设、商城网站、企业建站、网站改版、网站收录
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联