您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

react的setSate的异步问题的分析

2024/4/18 22:48:39发布12次查看
本篇文章给大家带来的内容是关于react的setsate的异步问题的分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在我们阅读文档的时候,大多都说react的setstate是异步的,可是它真的是异步的吗?如果是,那我们还可以猜想:那可以不可以同步?那什么时候需要异步,什么时候需要同步呢?
我们先来看下react的官方对setsate的说明:
将setstate()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,react可能会推迟它,稍后会一次性更新这些组件。react不会保证在setstate之后,能够立刻拿到改变的结果。
一个很经典的例子:
// 初始state.count 当前为 0componentdidmount(){    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
在点击组件后,你可以猜到结果吗?输出结果是:
timeoutprev state: 0next state: 1mousedownprev state: 1next state: 2clickprev state: 2next state: 2
结果似乎有点出人意料,三种方式只有在p上绑定的onclick事件输出了可以证明setstate是异步的结果,另外两种方式显示setstate似乎是同步的。
总结:
1.在组件生命周期中或者react事件绑定中,setstate是通过异步更新的。
2.在延时的回调或者原生事件绑定的回调中调用setstate不一定是异步的。
这个结果并不说明setstate异步执行的说法是错误的,更加准确的说法应该是setstate不能保证同步执行。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注的javascript视频教程栏目!
以上就是react的setsate的异步问题的分析的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product