React中的setState

发布时间:2022-06-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React中的setState脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

React中的setState

 当我们按下按钮 打印n的时候   

React中的setState

 视图层的n变成了3 而输出却并没有变  setState的对象 是异步的 setState调用之后,并不会立即去修改state的值,也不会立即去更新dom 他的执行顺序是在钩子函数componentDidUpdate前的

当我们给setState添加第二个参数 一个回调函数之后再打印n

React中的setState

 

React中的setState

 此时获得的n是最新状态的

他还有另一种写法

this.setState((上一状态) => {
  return 新状态
}[,回调函数])

React中的setState

React中的setState

 打印获得的n都为最新状态

但是这种语法虽然可以获得最新的状态 但是依旧是异步的

setState本身并不是一个异步方法,其之所以会表现出一种异步的形式,是因为react框架本身的一个性能优化机制

在React中,如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用 setState 不会同步更新 this.state,原生事件处理函数,setTimeout,setInterval的setState调用会同步执行this.state。

setState是同步的方法,但是react为了性能优化,所以setState在react的事件中表现得像异步。

脚本宝典总结

以上是脚本宝典为你收集整理的React中的setState全部内容,希望文章能够帮你解决React中的setState所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: