React18系列commit从0实现源码解析
正文
本系列是讲述从0开始实现一个react18的基本版本。由于React
源码通过Mono-repo 管理仓库,我们也是用pnpm
提供的workspaces
来管理我们的代码仓库,打包我们使用rollup
进行打包。
仓库地址
本章节主要是讲解我们如何将上一节得到的fiberNode树,渲染到页面中。React
中commit分为下面三个阶段,这节我们讲解简单的commit阶段:
- beforeMutation阶段
- mutation阶段
- layout阶段
这节主要讲解commit其中的mutation placement
阶段:
我们经常把Renderer
工作的阶段被称为commit
阶段。在commit
阶段,会将我们上一讲中生成的各种flags提交(commit
)到宿主环境UI中。我们前端通常使用的是ReactDOM
进行处理。这节我们简单的实现了一个ReactDom
包,看看是如何把调和和浏览器环境连起来的。
桥梁
在React
中,react-reconciler
和react-dom
是2个不同的包,react-dom
主要是提供浏览器宿主相关的方法。回想我们每次在使用react
开发项目的过程中,通过下方代码调用:
ReactDom.createRoot(root).render(<App />)
所以需要提供createRoot
方法。返回一个render
方法,接收ReactElement
元素。
export function createRoot(container: Container) { const root = createContainer(container); return { render(element: ReactElementType) { updateContainer(element, root); }, }; }
内部通过createContainer
和updateContainer
建立2个包的连接。具体的流程可以查看我们之前的章节。
commit Effect
在上一节中,我们在workLoop
执行完后后得到了一个带有标记的wip fiber tree
(如下图所示), 在commit阶段,我们要通过这个fiber树将内容渲染到屏幕中。
commitRoot执行
将最后生成的finishedWork
传递给commitRoot
, 然后根据顶部的flags
和subtreeFlags
来判断是否有渲染节点:
function commitRoot(root: FiberRootNode) { const finishedWork = root.finishedWork; if (finishedWork === null) { return; } // 重置 root.finishedWork = null; // 判断是否存在子阶段需要执行的操作 const subtreeHasEffect = (finishedWork.subtreeFlags & MutationMask) !== NoFlags; // 子节点是否有更新 const rootHasEffect = (finishedWork.flags & MutationMask) !== NoFlags; // 根节点是否更新 if (subtreeHasEffect || rootHasEffect) { // beforeMutation // mutation Placement commitMutationEffects(finishedWork); root.current = finishedWork; // layout } else { root.current = finishedWork; } }
commitMutationEffects执行
我们知道div对应的fiberNode
是标有flags = placement
的,所以在hostFiberNode
中的subtreeHasEffect
是有值的,所以会走到commitMutationEffects
分支。那它内部到底是有什么作用呢?
commitMutationEffects执行
的主要作用就是找到对应flags的fiberNode, 并执行相应的Dom操作。
- 我们需要向下遍历找到最底部的
subtreeFlags
不为0的fiberNode的子fiberNode
节点 - 由于父节点的
subtreeFlags
存在,不代表child
对应的flags
存在,可能是child
对应的sibling
节点的flags
存在 - 所以在找到对应的
subtreeFlags
的child
的fiberNode后,需要在向上遍历,查找对应的sibling
节点。
commitMutationEffectsOnFibers
对每一个fiberNode
我们会执行commit Effects的操作。
const commitMutationEffectsOnFibers = (finishedWork: FiberNode) => { const flags = finishedWork.flags; if ((flags & Placement) !== NoFlags) { commitPlacement(finishedWork); finishedWork.flags &= ~Placement; } // flags update // flags childDeletion }; const commitPlacement = (finishWork: FiberNode) => { if (__DEV__) { console.warn("执行commitPlacement操作", finishWork); } // parentDom 插入 finishWork对应的dom // 1. 找到parentDom const hostParent = getHostParent(finishWork); if (hostParent !== null) { appendPlacementNodeIntoContainer(finishWork, hostParent); } };
其中有一个getHostParent
是获取到对应父Container
(容器元素),对应浏览器环境就是Dom
,
getHostParent执行
找父contianer容器,向上递归 主要是分为2大类。第一类是对应HostComponent
(类似<div>
), 第二类就是根节点(#root
), 他们分别对应不同的位置。
function getHostParent(fiber: FiberNode): Container | null { let parent = fiber.return; while (parent) { const parentTag = parent.tag; // HostComponent HostRoot if (parentTag === HostComponent) { return parent.stateNode as Container; } if (parentTag === HostRoot) { return (parent.stateNode as FiberRootNode).container; } parent = parent.return; } if (__DEV__) { console.warn("未找到HostParent"); } return null; }
appendPlacementNodeIntoContainer执行
当我们上一步找到父container后,接下来就是要把自身的stateNode
插入到父container中,然后渲染的界面上。
appendPlacementNodeIntoContainer
这个函数接受2个参数,第一个是当前fiberNode
, 第二个父container。想想什么样的fiberNode
需要渲染到屏幕中。目前demo层级来看,只有下面2个节点需要展示到屏幕中。
- HostComponent
- HostText
所以appendPlacementNodeIntoContainer
需要向下找到对应的节点。然后插入到contaienr中
function appendPlacementNodeIntoContainer( finishedWork: FiberNode, hostParent: Container ) { // fiber Host if (finishedWork.tag === HostComponent || finishedWork.tag === HostText) { appendChildToContainer(hostParent, finishedWork.stateNode); return; } const child = finishedWork.child; if (child !== null) { appendPlacementNodeIntoContainer(child, hostParent); let sibling = child.sibling; while (sibling !== null) { appendPlacementNodeIntoContainer(sibling, hostParent); sibling = sibling.sibling; } } return null; }
例子:
我们通过一个特定的例子,来讲解commit mutation
中具体的执行过程。比如:我们有如下的结构,更新的flags
标记如下:
commitMutationEffects
会找到subtreeFlags
值不为0的顶层fiberNode
,然后开始向下遍历,直到找到world fiberNode
递归向上的执行commitMutationEffectsOnFibers
,先自己,然后sibling
, 然后return
。
commitMutationEffectsOnFibers
: 例如world fiberNode
,自身flags = 1
,然后会通过getHostParent
找到类型为HostComponent
的div fiberNode
, 然后把自己的stateNode
对应的dom, 通过appendChild
插入到div fiberNode
的stateNode
中。
这样一直向上,最终就会把div fiberNode
对应的dom元素,append
到root
中。
以上就是React18系列commit从0实现源码解析的详细内容,更多关于React18系列commit源码的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7183611473715789884
相关文章
- 这篇文章主要介绍了源码分析系列之json_encode()如何转化一个对象,对json_encode()感兴趣的同学,可以参考下...2021-04-22
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识,感兴趣的朋友一起学习吧...2016-01-02
- 这篇文章主要介绍了Android Studio如何查看源码并调试的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- privatestring[]GetMoc() { string[]str=newstring[3]; ManagementClassmcCpu=newManagementClass("win32_Processor"); ManagementObjectCollectionmocCpu=mcCpu.GetInstan...2020-06-25
ASP.NET使用HttpWebRequest读取远程网页源代码
本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22- #********************************************************* #文件名称: function.php #功能描述: 新闻添加修改处理模块 #程序制作:留印(adleyliu) #联系qq :143...2016-11-25
- 这篇文章主要介绍了.NET Core 源码编译的问题解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 这篇文章主要介绍了一文帮你理解PReact10.5.13源码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-04
- 以下是骑士飞行棋的源码,需要的朋友可以拿去用...2020-06-25
- 这篇文章主要介绍了C语言 MD5的源码实例详解的相关资料,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了使用C#获取网页HTML源码的例子,考虑了区分GB2312和UTF-8编码,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了IDEA2020.1构建Spring5.2.x源码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-09
- 快速排序类 using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.We...2020-06-25
- 这篇文章主要介绍了Python优秀开源项目Rich源码解析,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-06
postgresql synchronous_commit参数的用法介绍
这篇文章主要介绍了postgresql synchronous_commit参数的用法介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-30- nGrinder是NHN公司用Java语言开发的一款的基于Grinder开发的开源B/S Web性能测试平台,具有友好简洁的用户界面和分布式测试功能,本文给大家分享nGrinder性能工具源码安装部署过程,一起看看吧...2021-06-01
- 我们下面的一段代码是根据IP来判决用户所以城市哦,php 判断IP所在地源码完全公开的呼 function convertIp($ip) { $return = ''; if(preg_match("/^d{1,3}.d{...2016-11-25
- <?php // 获取用户IP地址 function getIp() { if($_SERVER['HTTP_CLIENT_IP']) { return $_SERVER['HTTP_CLIENT_IP']; } elseif ($_SER...2016-11-25