问题:
背景:
当getUserIng === true时,页面渲染;vue
预期结果:window.test('id', 'res.user') => setStatereact
结果:setState => window.test('id', 'res.user')promise
即:某组件中调用test.id时,test.id为空,若setState是异步的,不该该出现此状态~异步
推断1:
- setState多是极快的异步,
结果:
貌似是应验了~~
- 验证:若是setState time 是同步的,那么
应该是:state => outside,结果:
由此但是上述推断是错误的,应该是promise的问题;ide
推断2
- promise的问题 下面再来一题:猜测结果
结果:
2. setTimeout中: count默认为0
结果:count 为5
那么,setState是同步的吗?是批量render的吗?确切是为何呢?post
缘由
推荐一篇文章, Batch Updatethis
react 中实现batch update
react中对于非自身事件(microTask、macroTask), batch update将没法生效,故setTimeOut中,setState N次;react 经过Transaction实现batchUpdate,不依赖语言特性的通用模式
vue 中
推荐文章:Vue异步更新队列原理从入门到放弃3d
放一张我的理解图,若是错误,望指出 cdn
拓展:blog
问题1:(tick表明微任务)
- this.a = 1;
- tick(this.b = 2)
- tick(this.c = 3) 问:render几回?
问题2:
- tick(this.aa = 1)
- tick(this.bb = 2) 问: render几回?
答案分别是:2, 1