react setState解读

react setState解读

总结:
看似同步,实则异步。

setState(updater, callback)这个方法是用来告诉react组件数据有更新,有可能需要重新渲染。它是异步的,react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能,所以这就给我们埋了一个坑:
那就是在使用setState改变状态之后,立刻通过this.state去拿最新的状态往往是拿不到的。callback将会在state数据更新后且组件重新渲染完后执行。

总结 :

  1. setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。
  2. setState的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形式了所谓的“异步”,当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
  3. setState 的批量更新优化也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次 setState , setState 的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行合并批量更新。

参考:https://imweb.io/topic/5b189d04d4c96b9b1b4c4ed6
看总结

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 我的掘金https://juejin.im/user/5c6e6a11f265da2ddd4a5a56/posts...
    woow_wu7阅读 5,002评论 0 2
  • 大概不久就是各种 hooks 漫天飞舞的世界。 本文记录一下 React Hooks 学习,算是还一下技术债。只是...
    Jeremy_young阅读 3,255评论 0 0
  • 众所周知,React 通过 this.state 来访问 state,通过 this.setState() 来更新...
    南风知我意ZD阅读 3,192评论 0 0
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,755评论 28 53
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 11,358评论 4 8

友情链接更多精彩内容