React Hooks是如何保存的

React 函数式组件是没有状态的,需要 Hooks 进行状态的存储,那么状态是怎么存储的呢?Hooks是保存在 Fiber 树上的,多个状态是通过链表保存,本文将通过源代码分析 Hooks 的存储位置。

创建组件

首先我们在组件中添加两个 state,counterState 和 infoState

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';function App() {const [counter, setCounter] = useState(10)const [info, infoState] = useState(20)const handleInputChange = (event) => {setCounter(event.target.value);};return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload. {counter} {info}</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a><input onChange={handleInputChange}></input></header></div>);
}export default App;

useState 绑定过程

在 useState 加断点进入代码, 可以看到代码调用dispacher.useState:
在这里插入图片描述
在这里插入图片描述
dispatcher.useState 初始化状态
在这里插入图片描述
绑定WIP hooks
在这里插入图片描述
初始化 hooks 链表,代码中有两个 State,所以会调用两次,
在这里插入图片描述

useState 更新

更新数据,启动页面更新渲染
在这里插入图片描述
进入 Hook 更新方法
在这里插入图片描述
进入updateReducer
在这里插入图片描述
获取当前 hook
在这里插入图片描述
Hooks Queue中保存着需要更新的数据
在这里插入图片描述
更新状态
在这里插入图片描述

总结

useState 初始化时,会创建 hooks 链表,并保存到 FilberNode 的memoizedState
属性上,更新时,从 FiberNode 上获取hooks并检查是否有带待处理的更新。

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

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

相关文章

电商推荐系统+电影推荐系统【虚拟机镜像分享】

电商推荐系统电影推荐系统【虚拟机镜像分享】 所有组件部署好的镜像下载&#xff08;在下面&#xff09;&#xff0c;仅供参考学习。&#xff08;百度网盘&#xff0c;阿里云盘…&#xff09; 博主通过学习尚硅谷电商推荐电影推荐项目&#xff0c;将部署好的虚拟机打包成ovf文…

设计模式复习

一、模式所采用的关系&#xff08;e.g.继承…&#xff09; UML图例 二、各模式的特点、优缺点 1.创建型 将对象的使用和创建分离&#xff0c;使用对象时无需知道对象的创建细节&#xff0c;使得创建过程可以多次复用&#xff0c;且修改两者中的一个对另一个影响为0或很少。 …

Stable Diffusion WebUI详细使用指南

Stable Diffusion WebUI&#xff08;AUTOMATIC1111&#xff0c;简称A1111&#xff09;是一个为高级用户设计的图形用户界面&#xff08;GUI&#xff09;&#xff0c;它提供了丰富的功能和灵活性&#xff0c;以满足复杂和高级的图像生成需求。由于其强大的功能和社区的活跃参与&…

【运维】VMware Workstation 虚拟机内无网络的解决办法(或许可行)

【使用桥接模式】 【重置网络】 这个过程涉及管理Linux系统中的网络驱动程序和网络管理工具。以下是每个步骤的详细解释&#xff1a; 卸载网络驱动模块&#xff1a; sudo rmmod e1000 sudo rmmod e1000e sudo rmmod igb这些命令使用 rmmod&#xff08;remove module&#xff…

连锁收银系统支持带结算功能

连锁实体店的收银系统需要支持结算功能&#xff0c;以适应连锁运营效率和提升连锁管理的水平。商淘云连锁收银系统与您一起分享连锁收银系统需支持结算功能的三大必要点。大家点赞收藏&#xff0c;以免划走后找不到了。 一是&#xff0c;连锁模式的运营比较复杂&#xff0c;有加…

C++语言实现发票查验功能、医疗票据查验、财政票据识别

封账结算是个苦活、累活&#xff0c;在账务干过的人都知道&#xff0c;就连发票都要一张一张的录&#xff0c;一张一张的审&#xff0c;结一次账、扒一层皮&#xff0c;就累得人仰马翻。除此之外&#xff0c;在临近春节的这个时期&#xff0c;账务部门的小伙伴们&#xff0c;只…

【C++】牛客——ISBN号码

✨题目链接&#xff1a; ISBN号码 ✨题目描述 每一本正式出版的图书都有一个ISBN号码与之对应&#xff0c;ISBN码包括9位数字、1位识别码和3位分隔符&#xff0c;其规定格式如“x-xxx-xxxxx-x”&#xff0c;其中符号“-”是分隔符&#xff08;键盘上的减号&#xff09;&#…

MongoDB CRUD操作:mongosh 游标迭代

MongoDB CRUD操作&#xff1a;mongosh 游标迭代 文章目录 MongoDB CRUD操作&#xff1a;mongosh 游标迭代手动迭代光标使用数组迭代游标行为在会话中打开的游标在会话之外打开游标游标隔离游标批次光标信息 在mongosh中&#xff0c;执行 db.collection.find()方法会返回一个游…

速看!!24上软考【电子商务设计师】真题回顾,含答案解析

2024上半年软考考试已经结束了&#xff0c;为大家整理了网友回忆版的电子商务设计师真题及答案&#xff0c;25-26日两批考试总共60道题。 上半年考试的宝子们可以对答案预估分数&#xff01;准备下半年考的宝子可以提前把握考试知识点和出题方向&#xff0c;说不定会遇到相同考…

迭代逆序遍历在Java中的作用与原理

作用 迭代逆序遍历主要用于在需要删除或修改集合中的元素时避免并发修改异常&#xff08;ConcurrentModificationException&#xff09;。正序遍历时&#xff0c;如果在遍历过程中对集合进行结构性修改&#xff08;如删除元素&#xff09;&#xff0c;会导致迭代器抛出并发修改…

C++学习~~对于二进制文件的读写命名空间再认识异常处理

目录 1.将数据以二进制形式放到磁盘 2.将上述的数据读入内存并且显示在显示器上面 3.异常处理机制 4.抛出异常的应用实例 1.将数据以二进制形式放到磁盘 &#xff08;1&#xff09;使用student定义结构体数组stud,并对其进行初始化&#xff0c;创建输出文件流对象outfile,这…

STL库--stack

目录 stack的定义 stack容器内元素的访问 stack常用函数实例解析 stack的常见用途 stack的定义 其定义的写法和其他STL容器相同&#xff0c;typename可以任意基本类型或容器&#xff1a; stack<typename> name; stack容器内元素的访问 由于栈本身就是一种后进先出…

全球市值最高的能源公司沙特阿美股份拟出售,筹集百亿美元

KlipC报道&#xff1a;据5月28日市场消息&#xff0c;沙特政府可能最快会在本周宣布拟出售国营石油公司沙特阿美股份&#xff0c;筹集100亿-200亿美元。 沙特阿美是世界最大的石油生产商&#xff0c;2019年在沙特证交所上市。沙特的经济高度依赖石油出口。此前&#xff0c;受石…

海外推广,投放广告为什么大家都选择Facebook?

广告投放的效果会受到很多因素的影响&#xff0c;包括目标受众、产品类型、投放策略等等。就平台本身而言&#xff0c;Facebook和TikTok在广告投放方面有一些不同之处。 Facebook 是一个历史悠久、用户规模庞大的社交媒体平台&#xff0c;拥有全球各地广泛的用户群体&#xff…

VUE3 学习笔记(8):VUE 组件间传值【父传子、子传父】

父传子值 可以在父组件使用中增加&#xff1a;命名&#xff0c;子组件中通过props:["命名"] 接收的方式进行处理。 支持多种类型&#xff0c;当然也支持传对象、函数、HTML内容&#xff08;后面讲的插槽&#xff09;&#xff0c;也可以通过provide进行跨级透传 props…

【面试】谈谈常见的Java虚拟机有哪些

目录 1. HotSpot JVM2. OpenJ9 JVM3. GraalVM4. JRockit5. Exact VM6. Sun Classic VM7. KVM&#xff08;Kaffe Virtual Machine&#xff09; 1. HotSpot JVM 1.开发商&#xff1a;Oracle公司2.特点&#xff1a;是目前应用最广泛的Java虚拟机实现。它采用了即时编译&#xff0…

论文笔记 Explicit Visual Prompting for Low-Level Structure Segmentations

通俗地解释视觉中的prompt 在视觉中的“prompt”&#xff08;提示&#xff09;可以用一种比较通俗的方式来理解&#xff1a; 什么是视觉中的提示&#xff1f; 想象一下&#xff0c;你有一个已经接受过大量训练的超级助手&#xff08;类似于预训练的模型&#xff09;&#xf…

【IOT】OrangePi+HomeAssistant+Yolov5智能家居融合

前言 本文将以OrangePi AIpro为基础&#xff0c;在此基础构建HomeAssistant、YOLO目标检测实现智能家居更加灵活智能的场景实现。 表头表头设备OrangePi AIpro(8T)系统版本Ubuntu 22.04.4 LTSCPU4核64位处理器 AI处理器AI算力AI算力 8TOPS算力接口HDMI2、GPIO接口、Type-C、M.2…

Web前端与App前端:深入剖析两者的异同

Web前端与App前端&#xff1a;深入剖析两者的异同 在数字化时代&#xff0c;前端技术已成为连接用户与数字世界的桥梁。然而&#xff0c;当我们谈及前端时&#xff0c;往往会遇到两个相似的概念&#xff1a;Web前端和App前端。这两者是否完全相同&#xff0c;还是各有千秋&…

【YOLOv10】2024年5月最新的YOLO系列模型Yolov10(论文阅读笔记) + 完整创新点说明 + 总结

&#x1f680;&#x1f680;&#x1f680; YOLOv10: 实时端到端的目标检测。YOLOv10比最先进的YOLOv9延迟时间更低&#xff0c;测试结果可以与YOLOv9媲美&#xff0c;可能会成为YOLO系列模型部署的“新选择”。 官方论文地址&#xff1a;https://arxiv.org/pdf/2405.14458 官方…