React18系列commit从0实现源码解析

 更新时间:2023年1月17日 08:30  点击:39 作者:sunnyhuang519626

正文

本系列是讲述从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-reconcilerreact-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);
    },
  };
}

内部通过createContainerupdateContainer建立2个包的连接。具体的流程可以查看我们之前的章节。

commit Effect

在上一节中,我们在workLoop执行完后后得到了一个带有标记的wip fiber tree(如下图所示), 在commit阶段,我们要通过这个fiber树将内容渲染到屏幕中。

commitRoot执行

将最后生成的finishedWork传递给commitRoot, 然后根据顶部的flagssubtreeFlags来判断是否有渲染节点:

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存在
  • 所以在找到对应的subtreeFlagschild的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找到类型为HostComponentdiv fiberNode, 然后把自己的stateNode对应的dom, 通过appendChild插入到div fiberNodestateNode中。

这样一直向上,最终就会把div fiberNode对应的dom元素,appendroot中。

以上就是React18系列commit从0实现源码解析的详细内容,更多关于React18系列commit源码的资料请关注猪先飞其它相关文章!

原文出处:https://juejin.cn/post/7183611473715789884

相关文章

  • jQuery 2.0.3 源码分析之core(一)整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
  • Android Studio如何查看源码并调试的方法步骤

    这篇文章主要介绍了Android Studio如何查看源码并调试的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
  • vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
  • 源码分析系列之json_encode()如何转化一个对象

    这篇文章主要介绍了源码分析系列之json_encode()如何转化一个对象,对json_encode()感兴趣的同学,可以参考下...2021-04-22
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • 用C#获取硬盘序列号,CPU序列号,网卡MAC地址的源码

    privatestring[]GetMoc() { string[]str=newstring[3]; ManagementClassmcCpu=newManagementClass("win32_Processor"); ManagementObjectCollectionmocCpu=mcCpu.GetInstan...2020-06-25
  • C# 骑士飞行棋的源码(分享)

    以下是骑士飞行棋的源码,需要的朋友可以拿去用...2020-06-25
  • C语言 MD5的源码实例详解

    这篇文章主要介绍了C语言 MD5的源码实例详解的相关资料,需要的朋友可以参考下...2020-04-25
  • Underscore源码分析

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识,感兴趣的朋友一起学习吧...2016-01-02
  • .NET Core 源码编译的问题解析

    这篇文章主要介绍了.NET Core 源码编译的问题解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
  • Php经典分页源码

    #********************************************************* #文件名称: function.php #功能描述: 新闻添加修改处理模块 #程序制作:留印(adleyliu) #联系qq :143...2016-11-25
  • IDEA2020.1构建Spring5.2.x源码的方法

    这篇文章主要介绍了IDEA2020.1构建Spring5.2.x源码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-09
  • C#中使用快速排序按文件创建时间将文件排序的源码

    快速排序类 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源码解析的流程分析

    这篇文章主要介绍了Python优秀开源项目Rich源码解析,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-06
  • php 判断IP所在地源码

    我们下面的一段代码是根据IP来判决用户所以城市哦,php 判断IP所在地源码完全公开的呼 function convertIp($ip) { $return = ''; if(preg_match("/^d{1,3}.d{...2016-11-25
  • nGrinder性能工具源码安装部署过程

    nGrinder是NHN公司用Java语言开发的一款的基于Grinder开发的开源B/S Web性能测试平台,具有友好简洁的用户界面和分布式测试功能,本文给大家分享nGrinder性能工具源码安装部署过程,一起看看吧...2021-06-01
  • postgresql synchronous_commit参数的用法介绍

    这篇文章主要介绍了postgresql synchronous_commit参数的用法介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-30
  • php天气小偷源码下载

    <?php // 获取用户IP地址 function getIp() { if($_SERVER['HTTP_CLIENT_IP']) { return $_SERVER['HTTP_CLIENT_IP']; } elseif ($_SER...2016-11-25
  • C实现的非阻塞方式命令行端口扫描器源码

    这篇文章主要介绍了C实现的非阻塞方式命令行端口扫描器源码,对于大家理解C端口扫描器有很大帮主,需要的朋友可以参考下...2020-04-25
  • 什么是"Open Source"(开放源码)

    开放源码被非赢利软件组织(美国的Open Source Initiative协会)注册为认证标记,并对其进行了正式的定义,用于描述那些源码可以被公众使用的软件,并且此...2016-11-25