schooling_chan的博客

commit阶段分为三个部分before mutation阶段mutation阶段layout阶段主要都是在commitRootImpl函数内进行调用commitRootImpl这里只展示调用before mutation阶段的代码if (firstEffect !== null) { // 保存之前的优先级，以同步优先级执行，执行完毕后恢复之前优先级 const previousLanePriority = getCurrentUpdateLanePriority(); se

在renderRootSync执行完render相关阶段后，就会进入commit阶段。performSyncWorkOnRoot函数执行的末尾调用commitRoot(root);commit阶段工作在 rootFiber.firstEffect 上保存了一条需要执行副作用的 Fiber 节点的单向链表effectList，这些 Fiber 节点的 updateQueue 中保存了变化的 props。这些副作用对应的 DOM 操作在commit 阶段执行。除此之外，一些生命周期钩子（比如 com

这次是接着上一期render阶段的文章，解析挂载时render阶段的"归"阶段----completeWork函数completeWork开始阶段在performUnitOfWork中执行完beginWork，就会进入下面判断 if (next === null) { // workInProgress已经不存在子树，就开始进行"归"阶段 completeUnitOfWork(unitOfWork); } else { // next是beginWork调用后的返回值w

这次是接着上一期render阶段的文章，解析挂载时render阶段的"递"阶段----beginWork函数beginWork的调用performUnitOfWork函数内部执行beginWork的函数// ProfileMode 模式下，猜测和性能分析相关if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) { startProfilerTimer(unitOfWork);

今天来讲一下render函数到render阶段的流程，render阶段和render函数不是同一个东西哦！render阶段是react Fiber节点创建的阶段，也是我们diff算法执行的主要阶段。render函数是挂载和渲染jsx节点的入口函数。scheduleUpdateOnFiberscheduleUpdateOnFiber函数从执行栈来看是在updateContainer函数中调用，主要是处理优先级和挂载更新节点function scheduleUpdateOnFiber( fibe

学习react源码首先从react入口函数开始学习，这篇文章你将学习到如何进行调试代码和学会react render执行流程。调试代码这里只是进行简单的流程介绍，具体的可以看卡颂老师的拉取源码教程# 拉取代码git clone https://github.com/facebook/react.git# 执行打包命令yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE# 通过yarn link改变依赖包

若川的解读文章据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘： https://juejin.cn/post/6959348263547830280 尤雨溪开发的 vue-devtools 如何安装，为何打开文件的功能鲜有人知？：https://juejin.cn/post/6994289281141309476川哥最近组织了一次源码共读活动。每周读 200 行左右的源码。感兴趣可以关注他的公众号若川视野。准备把川哥的文章过一遍，明确目标学习目标.