为什么动画优先级高

首页课程实战体系课手记专栏慕课教程

为什么动画优先级高

来源：2-8 concurrent-mode

诺巴蒂

2019-10-21

用 ConcurrentMode 包裹是为了降低组件渲染（setState）的优先级来提高动画的优先级吗。
动画的优先级是怎么被提高的，动画应该只是事件循环的 render 环节，setInterval 本身是个宏任务，而 setState 更新dom我猜应该用了微任务，执行一次宏任务，清一次微任务，渲染一次，ConcurrentMode 只是让 setState 延后执行了，但 setInterval 还是正常执行，还能保证每次的结果是对的，这是怎么做到的，感觉如果把两次微任务合并了，结果会不对，比如1直接变成3

写回答

1回答

Jokcy

Jokcy

2019-10-22

已采纳

这里指的动画是浏览器渲染，浏览器渲染动画是一个频繁操作，要保证一秒30帧，浏览器就要每33.3毫秒渲染一次，如果这33.3毫秒我们全在执行js，也就是react的计算，那么浏览器就没空渲染动画，就卡帧了。

0

2

诺巴蒂

屏幕都有固定的刷新率（比如最新的一般在 60Hz），16ms... 所以是不是 ConcurrentMode 包裹浏览器暂时先保存一下，不把setstate的任务放到执行栈，等空闲或者超时的时候再扔进去，flush是立刻扔进去

2019-10-22

共2条回复

React源码深度解析高级前端工程师必备技能

掌握React源码，让你的开发水平没有上限，更不惧前端未来的到来

1749 学习 · 336 问题

相似问题

expirationTime优先级的问题

回答 1

老师，为啥动画的优先级更高呢

回答 1

请问这里的首个任务是什么？

回答 2

expirationTime大小与优先级的问题

回答 1

expirationTime的问题

回答 1

打开慕课网App查看更多内容