React hydrateRoot如何实现

news2024/11/9 0:39:45

React 服务器渲染中,hydrateRoot 是核心,它将服务器段的渲染与客户端的交互绑定在一起,我们知道 React 中 Fiber Tree 是渲染的的核心,那么 React 是怎么实现 hydrateRoot 的呢?首先我们验证一下,hydrateRoot 和 createRoot 有什么区别。分别创建两个 React 组件,一个用 createRoot,一个用 hydrateRoot,为了演示方便,直接用引入 React 脚本的方式。

CreateRoot

本例中,页面 Dom已经存在了一个 Button 按钮,createRoot 会将其替换掉而不会重用。直接替换 Root 节点,从 Console 中可以看到返回为 false,节点不同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"><button>0</button></div>
    <script type="text/babel">
      const useState = React.useState;

      function App() {
        const [state, setState] = useState(0);
        return (
          <button onClick={() => setState((state) => state + 1)}>
            {state}
          </button>
        );
      }

      const rootElement = document.getElementById("root");
      const originalButton = rootElement.firstChild;
      ReactDOM.createRoot(rootElement).render(<App />);
      setTimeout(
        () =>
          console.log(
            originalButton === rootElement.firstChild
            
          ),
        0
      );

    
    </script>
  </body>
</html>

在这里插入图片描述

hydrateRoot

修改代码 ReactDOM.createRoot(rootElement).render(); 到 ReactDOM.hydrateRoot(rootElement, ); ,代码只需要修改这一句,从截图中可以看到,D 节点没有被替换。
在这里插入图片描述
通过这个例子,可以看到 createRoot 和 hydrateRoot 的区别是在于是否替换节点,React 在渲染流程做了某些从而最终达到这种效果,我们看一下 React 的代码是怎么实现的。

在 React 中 Fiber 树的遍历通过 beginWork 和 completeWork 进行的,首先看 beginWork,beginWork 当 React 遇到 HostComponent HTML 节点时,进入 updateHostComponent,updateDateHOstComponent 会调用

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
tryHydrate 是核心代码,fiber 设置了 stateNode,stateNode 是 fiber 对应的 DOM Node,至此,beginWork 的逻辑结束了。
在这里插入图片描述

completeWork

现在我们来看,completeWork 方法中如何处理 hydrateRoot, 首先调用 popHydrationState,然后调用 prepareToHydrateHostInstance,最后调用 markUpdate,在 commit 阶段更新 DOM。

在这里插入图片描述
在这里插入图片描述
通过 updateFiber 更新节点数据。
在这里插入图片描述

总结

hydrateRoot 整体流程是:beginWork 创建节点,completeWork 完成并更新。这个设计还是很巧妙的,将显示和交互分离。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1861536.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024广东省职业技能大赛云计算赛项实战——集群部署GitLab Runner

集群部署GitLab Runner 前言 题目如下: 部署GitLab Runner 将GitLab Runner部署到gitlab-ci命名空间下&#xff0c;Release名称为gitlab-runner&#xff0c;为GitLab Runner创建持久化构建缓存目录/home/gitlab-runner/ci-build-cache以加速构建速度&#xff0c;并将其注册到…

Spark SQL 血缘解析方案

背景 项目背景建设数据中台,往往数据开发人员首先需要能够通过有效的途径检索到所需要的数据,然后根据检索的数据模型进行业务加工然后得到一些中间模型,最后再通过数据抽取工具或者OLAP分析工具直接将数据仓库中加工好的公共模型输出到应用层。这里我不在去介绍数据仓库为…

在操作系统中,background通常指的是运行于后台的进程或任务

在计算机中&#xff0c;"background"一词具有多种含义&#xff0c;以下是一些主要的解释和相关信息&#xff1a; 计算机视觉中的背景&#xff08;Background&#xff09;&#xff1a; 在计算机视觉中&#xff0c;background指的是图像或视频中的背景部分&#xff0c;…

【TOOL】ceres学习笔记(一) —— 教程练习

文章目录 一、Ceres Solver 介绍二、Ceres 使用基本步骤1. 构建最小二乘问题2. 求解最小二乘问题 三、使用案例1. Ceres Helloworld2. Powell’s Function3. Curve Fitting4. Robust Curve Fitting 一、Ceres Solver 介绍 Ceres-solver 是由Google开发的开源C库&#xff0c;用…

接口测试代码和工具

通过python的requests给接口发送请求进行测试 #coding:utf-8 import requests class TestApi(): url_login "https://legend-sit.omodaglobal.com/api/auth/oauth2/token" url_topic_b "https://legend-sit.omodaglobal.com/api/community/topic_b/page?…

12 学习总结:操作符

目录 一、操作符的分类 二、二进制和进制转换 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;二进制 &#xff08;三&#xff09;进制转换 1、2进制与10进制的互换 &#xff08;1&#xff09;2进制转化10进制 &#xff08;2&#xff09;10进制转化2进制 2…

React useId Hook

React 中有一个 useId hook&#xff0c;可以生成一个唯一 ID&#xff0c;这个有什么用处呢&#xff0c;用个 UUID 是不是可以替代呢&#xff1f;如果我们只考虑客户端&#xff0c;那么生成唯一 Id 的方法比较简单&#xff0c;我们在 State 中保存一个计数器就好&#xff0c;但是…

第二天的课根本跟不上啊 难难难啊

编程实现三个数求最大 编程实现求解一元二次方程 传参问题 直接使用返回值 复制控制 复制控制是指在C中控制对象复制行为的机制&#xff0c; 包括拷贝构造函数&#xff08;copy constructor&#xff09;、 赋值操作符&#xff08;copy assignment operator&#xff09;、 …

Win10可用的VC6.0绿色版及辅助插件assist_X

VC6.0&#xff0c;作为微软的经典开发工具&#xff0c;承载着无数开发者的青春与回忆。它曾是Windows平台上软件开发的重要基石&#xff0c;为开发者们提供了稳定且强大的编程环境&#xff0c;尤其是其MFC&#xff08;Microsoft Foundation Classes&#xff09;库&#xff0c;为…

STM32HAL库--DMA实验(速记版)

本章利用 DMA 来实现串口数据传送&#xff0c;并在LCD 模块上显示当前的传送进度。 DMA 简介 DMA&#xff0c;全称为&#xff1a;Direct Memory Access&#xff0c;即直接存储器访问。DMA 传输方式无需 CPU 直接控制传输&#xff0c;也没有中断处理方式那样保留现场和恢复现场…

微服务中不同服务使用openfeign 相互调用

首先 我们上文 已经知道了 nacos 的注册服务&#xff0c;现在 我们 在不同服务中相互调用就可以使用openfeign 直接调用&#xff0c;而不是 再写冗余的调用代码啦 首先 我们的微服务组件如下 因为我这个微服务是我在 员工登录demo 中 拆出来的&#xff0c;在userlogin模块中…

2024年不可错过的12个Web程序设计语言!

Web开发行业出现以来&#xff0c;通过各种形式和渠道不断发展壮大。随着5g时代的到来&#xff0c;Web开发在移动互联网领域不断出现新的开发场景&#xff0c;也是最受欢迎的技能之一。掌握Web程序设计语言是在Web开发领域大放异彩的必要条件之一。接下来&#xff0c;即时设计选…

[论文笔记]Mixture-of-Agents Enhances Large Language Model Capabilities

引言 今天带来一篇多智能体的论文笔记&#xff0c;Mixture-of-Agents Enhances Large Language Model Capabilities。 随着LLMs数量的增加&#xff0c;如何利用多个LLMs的集体专业知识是一个令人兴奋的开放方向。为了实现这个目标&#xff0c;作者提出了一种新的方法&#xf…

DCT-Net - 一键图片、视频转卡通动漫风格工具,本地一键整合包下载

只需要输入一张人物图像或者一段视频&#xff0c;就可以实现端到端全图卡、视频通化转换&#xff0c;生成二次元虚拟形象&#xff0c;返回卡通化后的结果图像或视频。 开发者叫menyi Fang&#xff0c;来自阿里巴巴通义实验室的的技术女大佬&#xff0c;国内大佬集成到webui&am…

mprpc框架的配置文件加载

目录 1.回顾测试 2.mprpc框架的配置文件加载 2.1 mprpcconfig.h 2.2 完善mprpcapplication.h 2.3 完善mprpcapplication.cc 2.4 mprpcconfig.cc 2.5 test.conf 2.6 测试运行 ​3.扩展问题 1.回顾测试 我们先把之前的项目代码工程编译好&#xff0c;然后进入bin里面&am…

用VScode打开keil下的文件中文编码乱码的问题,以及利用VScode转换字符编码的方法

目录 问题描述 解决方法 利用VScode转换字符编码的方法 问题描述 keil中默认的编码是ANIS如下图所示。 而VScode中默认的编码为UTF-8 &#xff0c;打开后如下。 解决方法 建议另存后&#xff0c;再打开目标文件&#xff0c;防止误操作&#xff01; 在VScode的最下方可以找…

计算预卷积特征

当冻结卷积层和训练模型时&#xff0c;全连接层或dense层(vgg.classifier)的输入始终是相同的。为了更好地理解&#xff0c;让我们将卷积块(在示例中为vgg.features块)视为具有了已学习好的权重且在训练期间不会更改的函数。因此&#xff0c;计算卷积特征并保存下来将有助于我们…

2024年上半年软件设计师上午真题及答案解析

1.在计算机网络协议五层体系结构中&#xff0c;( B )工作在数据链路层。 A.路由器 B.以太网交换机 C.防火墙 D.集线器 网络层&#xff1a;路由器、防火墙 数据链路层&#xff1a;交换机、网桥 物理层&#xff1a;中继器、集线器 2.软件交付之后&#xff…

引领AI新时代:深度学习与大模型的关键技术

文章目录 &#x1f4d1;前言一、内容概述二、作者简介三、书籍特色四、学习平台与资源 &#x1f4d1;前言 在数字化浪潮席卷全球的今天&#xff0c;人工智能&#xff08;AI&#xff09;和深度学习技术已经渗透到我们生活的方方面面。从智能手机中的智能语音助手&#xff0c;到…