饥饿问题说到底就是高优先级任务不能毫无底线地打断低优先级任务，一旦低优先级任务过期了，那么他就会被提升到同步优先级去立即执行。如下面的例子：我点击左面的开始按钮，开始渲染大量DOM节点，完成一次正常的高优先级插队任务：

在React的concurrent模式下，低优先级任务执行过程中，一旦有更高优先级的任务进来，那么这个低优先级的任务会被取消，优先执行高优先级任务。等高优先级任务做完了，低优先级任务会被重新做一遍。

作为构建用户界面的JavaScript库，React以提升用户交互体验为核心，而实现这一目标较为重要的一点是优先响应用户交互触发的更新任务，其余不那么重要的任务要做出让步，我们把用户交互触发的任务称为高优先级任务，不那么重要的任务称为低优先级任务。

由于fiber机制的特点，生成一个fiber节点时，它对应的dom节点有可能还未挂载，onClick这样的事件处理函数作为fiber节点的prop，也就不能直接被绑定到真实的DOM节点上。为此，React提供了一种“顶层注册，事件收集，统一触发”的事件机制。

Scheduler作为一个独立的包，可以独自承担起任务调度的职责，你只需要将任务和任务的优先级交给它，它就可以帮你管理任务，安排任务的执行。这就是React和Scheduler配合工作的模式。

当render阶段完成后，意味着在内存中构建的workInProgress树所有更新工作已经完成，这包括树中fiber节点的更新、diff、effectTag的标记、effectList的收集。此时workInProgress树的完整形态如下：

React在构建用户界面整体遵循函数式的编程理念，即固定的输入有固定的输出，尤其是在推出函数式组件之后，更加强化了组件纯函数的理念。但实际业务中编写的组件不免要产生请求数据、订阅事件、手动操作DOM这些副作用（effect），这样难免让函数组件变得不那么纯，于是React提供use(Layout)Effect的hook，给开发者提供专...

当函数组件进入render阶段时，会被renderWithHooks函数处理。函数组件作为一个函数，它的渲染其实就是函数调用，而函数组件又会调用React提供的hooks函数。初始挂载和更新时，所用的hooks函数是不同的，比如初次挂载时调用的useEffect，和后续更新时调用的useEffect，虽然都是同一个hook，但是因为在两个不同的渲染过程...

React的更新最终要落实到页面上，所以本文主要讲解DOM节点（HostComponent）和文本节点(HostText)的更新，对于前者来说更新是props的更新，对后者来说更新是文字内容的更新。

插入DOM节点操作的是fiber节点上的stateNode，对于原生DOM类型的fiber节点来说stateNode存储着DOM节点。commit阶段插入节点的操作就是循着fiber树把DOM节点插入到真实的DOM树中。

Fiber架构使得React需要维护两类树结构，一类是Fiber树，另一类是DOM树。当删除DOM节点时，Fiber树也要同步变化。但请注意删除操作执行的时机：在完成DOM节点的其他变化（增、改）前，要先删除fiber节点，避免其他操作被干扰。 这是因为进行其他DOM操作时需要循环fiber树，此时如果有需要删除的fiber节点却还没删除的话...

每个fiber节点在更新时都会经历两个阶段：beginWork和completeWork。在Diff之后（详见深入理解React Diff原理），workInProgress节点就会进入complete阶段。这个时候拿到的workInProgress节点都是经过diff算法调和过的，也就意味着对于某个节点来说它fiber的形态已经基本确定了，但除此之外还有两点：

fiber上的updateQueue经过React的一番计算之后，已经有了新的状态，也就是state，对于类组件来说，state是在render函数里被使用的，既然已经得到了新的state，那么当务之急是执行一次render，得到持有新state的ReactElement。

一旦用户的交互产生了更新，那么就会产生一个update对象去承载新的状态。多次更新（如多次调用setState）产生的多个update会连接成一个环装链表：updateQueue，挂载到产生更新的这个fiber上，然后在该fiber的beginWork阶段会循环updateQueue，依次处理其中的update，这是处理更新的大致过程，也就是计算组件新状态的本质...

React的更新任务主要是调用一个叫做workLoop的工作循环去构建workInProgress树，构建过程分为两个阶段：向下遍历和向上回溯，向下和向上的过程中会对途径的每个节点进行beginWork和completeWork。

作为一个构建用户界面的库，React的核心始终围绕着更新这一个重要的目标，将更新和极致的用户体验结合起来是React团队一直在努力的事情。为什么React可以将用户体验做到这么好？我想这是基于以下两点原因：

UI产生交互的根本原因是各种事件，这也就意味着事件与更新有着直接关系。不同事件产生的更新，它们的优先级是有差异的，所以更新优先级的根源在于事件的优先级。一个更新的产生可直接导致React生成一个更新任务，最终这个任务被Scheduler调度。