热议 | 一眼看穿React源码(4)：优先级机制下的State计算流程
2023-11-29 02:23:08
当我们调用setState方法的时候，会发生什么呢？高优先级的任务会打断低优先级的任务执行。那么，怎么保证低优先级任务重启后不会覆盖掉高优先级的state呢？当任务被打断后，我们怎么保证update对象不会丢失呢？
本文将对此进行详细解答。
React的状态计算流程
React的状态计算流程主要包含三个步骤：
- 更新计划阶段
- 更新执行阶段
- 提交更新阶段
更新计划阶段
在更新计划阶段，React会收集所有待更新的状态，并按优先级对它们进行排序。
React将更新分为两类：
- 同步更新
- 异步更新
同步更新会在组件更新期间立即执行，而异步更新会在组件更新之后执行。
同步更新的优先级高于异步更新。
在更新计划阶段，React会首先收集所有同步更新。然后，它会收集所有异步更新。最后，它会将所有更新按优先级进行排序。
更新执行阶段
在更新执行阶段，React会依次执行这些更新。
React会首先执行同步更新。然后，它会执行异步更新。
提交更新阶段
在提交更新阶段，React会将新的状态应用到组件的DOM中。
React会首先将新的状态应用到组件的虚拟DOM中。然后，它会将虚拟DOM与真实的DOM进行比较。最后，它会将虚拟DOM与真实的DOM之间的差异应用到真实的DOM中。
React的优先级机制
React的优先级机制可以确保同步任务优先于异步任务执行。
React将更新任务分为五种不同的优先级：
- Immediate
- UserBlocking
- Normal
- Low
- Idle
Immediate优先级的任务会立即执行。UserBlocking优先级的任务会在浏览器空闲时执行。Normal优先级的任务会在稍后执行。Low优先级的任务会在更晚的时候执行。Idle优先级的任务会在浏览器最空闲时执行。
React会首先执行Immediate优先级的任务。然后，它会执行UserBlocking优先级的任务。最后，它会执行Normal、Low和Idle优先级的任务。
如何保证在更新过程中不丢失update对象
当任务被打断后，React会将update对象保存起来。这样，即使任务被中断，它也可以在稍后重启并完成更新。
React会在更新计划阶段将所有待更新的状态收集到一个数组中。然后，它会将这个数组传递给更新执行阶段。更新执行阶段会依次执行这个数组中的所有更新。
如果某个任务在执行过程中被打断，React会将这个任务的状态保存起来。这样，当任务在稍后重启时，它就可以从上次中断的地方继续执行。
React的这种保存update对象的方式可以确保即使任务被打断，它也可以在稍后重启并完成更新。
总结
本文介绍了React的状态计算流程、React的优先级机制以及如何在更新过程中不丢失update对象。
希望本文能帮助你更好地理解React的状态计算流程。
