本文深入探讨了React并发模式下高优先级任务如何插队执行，导致低优先级任务重做的过程。从setState开始，分析了任务调度、优先级计算、任务插队协调、更新处理和低优先级任务重做的核心机制。通过具体示例和源码解析，揭示了React在并发更新中的智能决策，以提高用户体验。
在React的concurrent模式下，低优先级任务执行过程中，一旦有更高优先级的任务进来，那么这个低优先级的任务会被取消，优先执行高优先级任务。等高优先级任务做完了，低优先级任务会被重新做一遍。
我们用一个具体的例子来理解一下高优先级任务插队。
有这样一个组件，state为0，进入页面，会调用setState将state加1，这个作为低优先级任务。React开始进行更新，在这个低优先级任务尚未完成时，模拟按钮点击，state加2，这个作为高优先级任务。可以看到，页面上的数字变化为0 -> 2 -> 3，而不是0 -> 1 -> 3。这就说明，当低优先级任务（加1）正在进行时，高优先级任务进来了，而它会把state设置为2。由于高优先级任务的插队，设置state为1的低优先级任务会被取消，先做高优先级任务，所以数字从0变成了2。而高优先级任务完成之后，低优先级任务会被重做，所以state再从2加到了3。
现象如下：
利用chrome的性能分析工具捕捉更新过程，可以明显看到优先级插队的过程
完整的profile文件我保存下来了，可以载入到chrome中详细查看：
订阅专栏 解锁全文
扫一扫
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
