React源码解读系列

useId 生成的字符串ID，第一个字符是冒号，最后一个字符也是冒号，如果是服务端渲染生成的ID，则会使用大写字母 R 作为标识，如果是客户端渲染生成的ID，则会使用小写字母 r 作为标识。

useSyncExternalStore是一个订阅外部 store 的 React Hook。如果前后读取的store的数据快照不一致，就会重新渲染组件。

执行完ClassComponent的三种更新后，updateClassComponent 最后执行了finishClassComponent()方法来判断是否需要 render，即是否需要渲染组件。

ClassComponent实例已经存在，且已经是多次渲染，此时调用updateClassInstance方法执行更新操作，且会执行componentWillUpdate生命周期函数。

ClassComponent 是初次渲染时，调用 resumeMountClassInstance方法，复用ClassComponent实例，并更新state/props。

ClassComponent实例未被创建时会调用 constructClassInstance方法构建class组件实例，然后调用mountClassInstance方法挂载class组件实例。

当 workInProgress.tag 的类型为ClassComponent时，调用 updateClassComponent 函数对class组件分成三种情形执行更新操作。

commit阶段的可以分为三个阶段，before mutation 、mutation phase 阶段(挂载阶段)、layout phase 阶段(布局阶段)。

setState和forceUpdate两者的更新流程相似，唯一的不同是执行forceUpdate时 update对象的tag属性值更改成了ForceUpdate。

在执行ReactDOM.render时，主要是创建fiber和创建update。无论是首次还是多次调用，都会调用updateContainer函数创建update 来开启一次更新。

虚拟DOM是一棵树形结构，即fiber树，对于树的遍历，通常有两种方法：深度优先遍历和广度优先遍历。如果react使用深度优先遍历来遍历fiber树。

key 主要用于diff算法中，它是fiber对象的唯一标识，其作用是用于判断节点是否可复用，从而减少不必要的 diff，提高diff 的效率。因此，在开发中，我们应该主动设置key，尤其是在列表中。

useFiber函数的作用是克隆旧节点，从而复用旧节点。在克隆旧节点时，是通过 双缓冲 的方式来复用旧节点。

Component 和 PureComponent都是通过构造函数声明类，但PureComponent实现了 shouldComponentUpdate 方法。

reconciler 的过程可分为四个阶段，分别是任务输入阶段、调度任务注册阶段、执行任务回调阶段，输出DOM节点阶段。这四个阶段，基本覆盖了react-reconciler的核心逻辑。

在React中，事件被划分了不同的等级，其目的是决定任务调度的轻重缓急，从而实现React的增量渲染，预防掉帧，同时达到页面更顺滑的目的，提升用户体验。因此，React有一套从事件到调度的优先级机。

React 在实现任务调度时，使用最小堆存储 Scheduler 的 task，使得在任务调度的过程中可以在O(1)的时间获取到优先级最高的task，提高了任务调度的效率。

React 中有自己的事件系统模式，通常被称为 React合成事件。之所以采用这种自定义的合成事件，一方面是为了抹平浏览器差异性，使得 React 开发者不再需要去关注浏览器事件兼容性问题。

React 的 Context 属性实现了 props 在层级组件间跨层级传递，从而避免了props逐层传递的繁琐。本文将从源码层面，从创建、消费以及更新三个方面来介绍Context。

React 的 Context 属性实现了 props 在层级组件间跨层级传递。无论是挂载阶段还是更新阶段，useContext 最终执行的函数都是 readContext。