React16源码: React中的updateHostRoot的源码实现

HostRoot 的更新


1 )概述

  • HostRoot 是一个比较特殊的节点, 因为在一个react应用当中
  • 它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象
  • 重点在于它的更新过程

2 )源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612

// 这个函数的重点在: update 来自哪里, 里面是什么内容
// 最终通过 processUpdateQueue 得到了 element 里面的内容,之后以此作为children来调和
function updateHostRoot(current, workInProgress, renderExpirationTime) {// 跳过 context 相关pushHostRootContext(workInProgress);const updateQueue = workInProgress.updateQueue;invariant(updateQueue !== null,'If the root does not have an updateQueue, we should have already ' +'bailed out. This error is likely caused by a bug in React. Please ' +'file an issue.',);// 获取一系列数据const nextProps = workInProgress.pendingProps;const prevState = workInProgress.memoizedState;// 对于 HostRoot 一开始是没有 state,也就是 `prevState.element`, 在第一次渲染的时候,prevState 是 null,在ReactDOM.render中创建了一个update// 经过 processUpdateQueue 这次更新后,它会拿到一个 {element} 对象作为 stateconst prevChildren = prevState !== null ? prevState.element : null;// 得到创建的update传递的elementprocessUpdateQueue(workInProgress,updateQueue,nextProps,null,renderExpirationTime,);const nextState = workInProgress.memoizedState;// Caution: React DevTools currently depends on this property// being called "element".const nextChildren = nextState.element;if (nextChildren === prevChildren) {// If the state is the same as before, that's a bailout because we had// no work that expires at this time.resetHydrationState(); // 服务端渲染,复用dom节点相关内容// 跳出更新过程,不需要更新// 对 RootFiber来说,大部分情况下,只在 ReactDOM.render 的时候有更新,其他时候都不需要更新// 一般都是在App内更新,不会在RootFiber节点创建更新return bailoutOnAlreadyFinishedWork(current,workInProgress,renderExpirationTime,);}const root: FiberRoot = workInProgress.stateNode;// 跳过 hydrate 相关if ((current === null || current.child === null) &&root.hydrate &&enterHydrationState(workInProgress)) {// If we don't have any current children this might be the first pass.// We always try to hydrate. If this isn't a hydration pass there won't// be any children to hydrate which is effectively the same thing as// not hydrating.// This is a bit of a hack. We track the host root as a placement to// know that we're currently in a mounting state. That way isMounted// works as expected. We must reset this before committing.// TODO: Delete this when we delete isMounted and findDOMNode.workInProgress.effectTag |= Placement;// Ensure that children mount into this root without tracking// side-effects. This ensures that we don't store Placement effects on// nodes that will be hydrated.// 在 current === null || current.child === null 这种情况下,都是第一次渲染workInProgress.child = mountChildFibers(workInProgress,null,nextChildren,renderExpirationTime,);} else {// Otherwise reset hydration state in case we aborted and resumed another// root.// 不是第一次渲染reconcileChildren(current,workInProgress,nextChildren,renderExpirationTime,);resetHydrationState();}return workInProgress.child;
}
  • HostRoot 创建更新的过程就是在 ReactFiberReconciler.js 中的调用 ReactDOM.render 的过程
  • 定位到 scheduleRootUpdate 位置在 packages/react-reconciler/src/ReactFiberReconciler.js#L110
    function scheduleRootUpdate(current: Fiber,element: ReactNodeList,expirationTime: ExpirationTime,callback: ?Function,
    ) {// ... 省略const update = createUpdate(expirationTime);update.payload = {element};// ... 省略return expirationTime;
    }
    
    • 它这里创建一个 update, 并挂在 update.payload 是 {element}
    • 这个 element 就是传给 ReactDOM.render 的第一个参数
    • 这个 update 对象没有后续指定类型
    • 这和调用 setState 在组件内创建更新效果是类似的
    • 所以,update.payload 就相当于 state
    • 对于 HostRoot 来说, 它的state只有一个属性,就是element
    • 就是 ReactDOM.render 的第一个参数

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

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

相关文章

【Qt】信号和槽

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Qt中的信号和槽 1、信号 2、槽 3、Q_OBJECT 二、Qt中的connect函…

Windows下 VS2022 编译OpenSSL 库

SSL是Secure Sockets Layer(安全套接层协议)的缩写,可以在Internet上提供秘密性传输。Netscape公司在推出第一个Web浏览器的同时,提出了SSL协议标准。其目标是保证两个应用间通信的保密性和可靠性,可在服务器端和用户端同时实现支持。已经成为Internet上保密通讯的工业标准…

k3s x GitLab Runner Operator,GitLab CI 云原生构建新体验

GitLab CI 是非常常用的一款 CI/CD 工具&#xff0c;只需要在 .gitlab-ci.yml 文件中用 YAML 语法编写 CI/CD 流水线即可。而 GitLab CI 能够运行的关键组件是 GitLab Runner。GitLab Runner 是一个轻量级、高扩展的代理&#xff0c;主要用来执行 GitLab CI/CD 流水线中的 Job&…

stm32 FOC系列 直流有刷控制原理

1、直流有刷驱动板 使用三极管搭建的简易 H 桥电路&#xff0c;如图 5.3.1 所示&#xff1a; 图 5.3.1 是使用三极管搭建的简易 H 桥电路&#xff0c;其中 MOTOR 表示直流有刷电机&#xff0c; Q1、 Q2、 Q3 和 Q4 为 4 个三极管&#xff0c;其中 Q1 和 Q3 接在了电源正极&…

[AutoSar]BSW_OS 08 Autosar OS_内存保护

一、 目录 一、关键词平台说明一、内存保护的概念 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC) >>>>>回到总目录<<<<&l…

matlab appdesigner系列-常用13-标签

标签&#xff0c;用来显示各类文本 此示例&#xff0c;就是在标签之外的画布上单击鼠标左键&#xff0c;显示王勃的《滕王阁诗》 操作如下&#xff1a; 1&#xff09;将2个标签拖拽到画布上&#xff0c;并修改相应文字。将第二个标签的右侧文本信息中的Wordwrap打开&#xf…

【C++】文件操作

文件操作 一、文本文件&#xff08;一&#xff09;写文件读文件 二、二进制文件&#xff08;一&#xff09;写文件&#xff08;二&#xff09;读文件 程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放&#xff0c;通过文件可以将数据持久化&#xff…

记录一下uniapp 集成腾讯im特别卡(未解决)

uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几…

基于 OpenVINO, yolov5 推理

OpenVINO 是英特尔开发的一款功能强大的深度学习工具包&#xff0c;可实现跨多个硬件平台的优化神经网络推理。在本文中&#xff0c;我们讨论了 OpenVINO 的特性和优势&#xff0c;以及它如何与领先的计算机视觉平台 Viso Suite 集成&#xff0c;以构建和交付可扩展的应用程序。…

Mysql数据库cpu飙升怎么解决

排查过程 &#xff08;1&#xff09;使用top命令观察&#xff0c;确定是mysql导致还是其他原因。 &#xff08;2&#xff09;如果是mysql导致的&#xff0c;show processlist&#xff0c;查看session情况&#xff0c;确定是不是有消耗资源的sql在运行。 &#xff08;3&#xf…

【OSG案例详细分析与讲解】之十四:【立方体贴图】

文章目录 一、【立方体贴图】前言二、【立方体贴图】实现效果三、【立方体贴图】创建立方体贴图1、实现目标2、实现步骤3、核心代码4、知识要点5、TextureCubeMap详讲6、osg::TexGen详讲7、TexEnvCombine详讲四、【立方体贴图】程序1、程序代码2、qt pro文件五、【立方体贴图】…

李沐深度学习-激活函数/多层感知机文档

multilayer perceptron (MLP)&#xff1a;多层感知机(多层神经网络) (hidden layer)隐藏层&#xff1a; 介于输入层和输出层之间的网络层 输入层不涉及计算&#xff0c;如果一个神将网络由三层组成&#xff0c;则多层感知机层数为2 多层感知机中隐藏层和输出层都是全连接 隐藏…

如何快速打开github

作为一个资深码农&#xff0c;怎么能不熟悉全球最大的同性交友社区——github呢&#xff0c;但头疼的是github有时能打开&#xff0c;有时打不开&#xff0c;这是怎么回事&#xff1f; 其实问题出在github.com解析DNS上&#xff0c;并不是需要FQ。下面提供一个方法&#xff0c;…

hot100:07接雨水

题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 算法思想&#xff1a; 这里采取的是暴力解法和双指针的解法&#xff0c;但是这个题目还有其他的两种解法&#xff08;单调栈和动态规划&#xff0c;同学可以自行了解&#xff…

Golang 中高级工程师学习笔记

闭包的作用 闭包&#xff08;Closure&#xff09;是一种函数值&#xff0c;它可以引用在其外部定义的变量。闭包允许这些变量保持在函数内部&#xff0c;而不是被每次调用时重新创建。闭包的作用主要体现在以下几个方面 封装&#xff1a; 闭包允许函数访问其外部作用域中的变…

vue3前端开发,子组件向父组件传递数据练习

vue3前端开发,子组件向父组件传递数据练习&#xff01; <script setup> import Child from ./Child.vue const getMsg (msg)>{console.log(msg); } </script> <template><h3>Parent</h3><!--绑定事件--><Child get-Msg"getM…

K8S-容器运行时(v1.27)

容器运行时 说明&#xff1a; 自 1.24 版起&#xff0c;Dockershim 已从 Kubernetes 项目中移除。阅读 Dockershim 移除的常见问题了解更多详情。 你需要在集群内每个节点上安装一个 容器运行时 以使 Pod 可以运行在上面。本文概述了所涉及的内容并描述了与节点设置相关的任务…

frida https抓包

web端导入证书、https代理即可解决大部分需求&#xff0c;但是&#xff0c;有些app需要处理ssl pinning验证。 废话不多说。frida处理ssl pin的步骤大体如下。 安装python3.x,并在python环境中安装frida&#xff1a; pip install frida pip install frida-tools下载frida-se…

基于JavaWeb+SSM+Vue基于微信小程序的在线投稿系统的设计和实现

基于JavaWebSSMVue基于微信小程序的在线投稿系统的设计和实现 滑到文末获取源码Lun文目录前言主要技术系统设计功能截图 滑到文末获取源码 Lun文目录 目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关技术 2 2.1微信小程序 2 2.2 MYSQL数据库 3 2.3 u…

linux 抓包

在Linux平台下抓包可以使用tcpdump、tshark、ngrep等工具。 使用tcpdump进行抓包的方法如下&#xff1a; 打开终端窗口。输入命令"sudo tcpdump -i [网卡名]"并按回车&#xff0c;其中"[网卡名]"是你要监听的网卡名称1。等待抓包过程完成&#xff0c;抓取…