React学习-- React源码(4)setState机制
来源:互联网 发布:邯郸中国网络菜市场 编辑:程序博客网 时间:2024/03/29 05:33
React通过this.state来访问state,通过this.setState来更新state。当setState被调用的时候,React会重新调用render方法来重新渲染组件。
setState异步更新
setState通过一个队列机制实现state更新。当执行setstate时,会将需要更新的state合并后放入状态队列,而不是立即更新state。这样的队列机制可以高效的批量更新state。
需要注意,不可以使用this.state.value = 1这样的方式来更新state,否则,该state将不会被放入状态队列中。
setState循环调用风险
如果在shouldComponentUpdate和componentWillUpdate中调用了setState,此时this._pendingStateQueue != null,则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate,因此造成循环调用,使得浏览器内存占满后崩溃。
setState调用栈
其实,setState最终是通过enqueueUpdate执行state更新。下面我们来看enqueueUpdate到底是如何更新state的。
下图是一个简化了的setState调用栈:
解释:
如果处于批量更新模式,则对所有队列中的更新执行batchedUpdate方法;否则,如果不处于批量更新模式,则仅仅把当前组件即调用了setstate的组件,放入dirtyComponent数组中。
事务
事务就是将需要执行的方法用wrapper封装起来,再通过事务提供的perform方法执行。在perform之前,先执行所有wrapper中的initialize方法,执行完perform之后(即需要执行的方法)再执行所有的close方法。一组initialize和close称为一个wrapper。
- React学习-- React源码(4)setState机制
- React源码分析5 — setState机制
- React —(setState 方法)
- react学习笔记之setState方法注意事项
- React 之 setState
- React中setState回调
- React学习 -- React源码(1)
- React学习-- React源码(6)React Patch方法
- React学习 -- React源码(2)Virtual DOM模型
- React学习-- React源码(3)生命周期的管理艺术
- React学习-- React源码(5)diff算法
- React Native源码学习
- react setState 的回调函数
- React的setState立即执行方案
- React总结1:异步更新的setState
- React总结8:setState()的参数
- React中setState回调函数
- React的异步更新的setState
- 日常(崩溃的边缘)
- dmesg 总结
- 关于RecyclerView偶尔会报出IllegalStateException的处理办法。
- JS组件系列——表格组件神器:bootstrap table
- libevent2.1.8保证线程安全的bufferevent写操作(读操作也一样)
- React学习-- React源码(4)setState机制
- json 三转 , 前端ajax的datatype为json后端传来jsonString 即可
- Java中HttpGet请求流程--4.5.2版本
- Fragment+ViewPager 实现仿微信页面
- 数据库分库,主从,集群
- “亲情中华——北美画院优秀作品展”在京开幕
- 002
- 条款22:将成员变量声明为private
- “开启两个相同程序,双击Lancher后,Ubuntu崩溃”解决方法