react源码学习

lane 优先级 在 React lanes 模型是 31 个二进制通道。以 1 的位置表示当前更新的优先级，全为 0 时表示没有更新。优先级从右往左依次降低。 如下图所示： 事件优先级 事件优先级有

在之前的代码实现中，使用 requestIdleCallback 实现了 scheduleCallback 函数。达成了在浏览器空闲时间执行回掉的效果。但是 requestIdleCallback 兼

什么是 useEffect useEffect 是执行副作用的 hook，执行时机是在页面绘制完成后，在代码中即提交阶段结束后。它接收两个参数，effect 回掉函数和 deps 依赖项。 effec

目标 要了解多节点 DIFF，首先需要知道已知条件和实现目标。 已知条件： 老 fiber 新的虚拟 DOM 节点数组 目标：根据新的虚拟 DOM 生成的新的 fiber 链。 第一轮遍历 对于前三种

什么是 DOM DIFF DOM DIFF 指的是针对两个（通常是虚拟）DOM 树结构进行“差异比对”的算法。在 react 中，进行比较的则是 fiber 架构。其目标有两个： 比较前后两棵树的节点

在具体说明之前，先放上一个例子。 根据上面这个例子，画出 mount 阶段完成后的完整 fiber 结构。如下图： 上图就是挂载阶段完成后的完整数据结构。从图中可以看到，这时的初始状态为 0。根据之前

useReducer 是一个函数。接收两个参数。reducer 函数和 state 初始状态。返回状态和回掉函数。 实现 在 react 中，实现 useReducer 时做了很多变量转发，但是在挂载

首先定义入口文件，使用函数组件。 简单处理函数组件 要处理函数组件，需要根据 Fiber 节点 tag 进行处理。在 beginWork 函数中做判断。 主要逻辑在 mountIndeterminat

在完成 Fiber 树的渲染后，需要提交 Fiber 树，将 Fiber 树对应的真实DOM渲染到页面上，即挂载到根节点上。 实现 在 renderRootSync 函数执行完成后，Fiber 树的处

目标虚拟 DOM 针对以上代码的虚拟DOM就不在这里再列出来了。 架构分析 在 createRoot 函数中，已经实现了 HostRootFiber 和 FiberRootNode。接下来需要开始构建

接下来，需要实现 render 函数，进行第一次挂载。 由之前的文章可知，root 是一个 ReactDOMRoot 实例。所以直接在 ReactDOMRoot 原型上添加 render 方法。 再回

react 代码 FiberRootNode 与 HostRootFiber FiberRootNode 指向 HostRootFiber，HostRootFiber 也指向 FiberRootNod

调试准备 调试项目使用 vite 搭建，进行 react 开发环境调试，所以使用的所有 react 方法都是 dev 方法。 jsx 执行流程 babel 编译结果 由编译结果代码可知，babel 编