在后面两节讲解源码时,我们会将代码与心智模型
联系上,方便你更好理解。
我们可以将更新机制
类比代码版本控制
。
在没有代码版本控制
前,我们在代码中逐步叠加功能。一切看起来井然有序,直到我们遇到了一个紧急线上bug(红色节点)。
在React
中,所有通过ReactDOM.render
创建的应用(其他创建应用的方式参考ReactDOM.render一节)都是通过类似的方式更新状态
。
即没有优先级
概念,高优更新
(红色节点)需要排在其他后面执行。
当有了代码版本控制
,有紧急线上bug需要修复时,我们暂存当前分支的修改,在master分支
修复bug并紧急上线。
在React
中,通过ReactDOM.createBlockingRoot
和ReactDOM.createRoot
创建的应用会采用并发
的方式。
高优更新
(红色节点)中断正在进行中的低优更新
(蓝色节点),先完成render - commit流程
。
待高优更新
完成后,低优更新
基于高优更新
的结果重新更新
。