React useContext源码分析

news2025/1/19 17:16:59

React 框架中 useContext Hook 用于数据的传递,组件的数据传递有几种方式,通过 props、状态管理 和 useContext。本文将讲述useContext 在 React 是如何工作的,创建一个简单的 Context 例子并根据源码进行 Debug:

创建 context

创建 Context,并通过 Conext.Provider 进行注册:

export  const MyContext = createContext(null);

root.render(
  <MyContext.Provider value="100">
  <React.StrictMode>
    
    <App />
    
  </React.StrictMode>
  </MyContext.Provider>
);

使用Context

需要使用 context 的位置,调用 useContext

 const result = useContext(MyContext)

React 是怎么实现 Provider 和 Consumer呢?因为只有 Provider 的子组件可以获取 Context 的值,就需要借助 Fiber Stack结构,确保只有Provider 节点下的子节点才能够消费、看到 Provider 的值。

createContext

创建 Context 是,同时初始化 Provider,Provider 的 elementType 为 REACT_PROVIDER_TYPE。
在这里插入图片描述

将 Provider FiberNode 添加到 Stack 中
在这里插入图片描述
context currentValue 赋值
在这里插入图片描述
将当前Provider Node 插入到 FiberStack 中
在这里插入图片描述

useContext

useContext 用于获取 Context 的值,调用 readContext 并返回当前值
在这里插入图片描述

总结

useContext 的整体流程,Provider 赋值,useContext 取值,通过 Stack 进行管理,只有子节点才能看到 Provider 的值。

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

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

相关文章

web 前端开发技术---网页的制作

这是一个网页代码 上年包含了电子邮件&#xff0c;选项建 等等 分享给大家 <!-- prj_7_1.html --> <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title>留言板设计</title><style type&…

安卓如何书写注册和登录界面

一、如何跳转一个活动 左边的是本活动名称&#xff0c; 右边的是跳转界面活动名称 Intent intent new Intent(LoginActivity.this, RegisterActivity.class); startActivity(intent); finish(); 二、如果在不同的界面传递参数 //发送消息 SharedPreferences sharedPreferen…

矩阵短视频:成都科成博通文化传媒公司

重塑内容生态与传播格局、在数字化时代&#xff0c;短视频以其独特的形式和高效的传播能力&#xff0c;迅速崛起并成为了社交媒体领域的明星。成都科成博通文化传媒公司​而“矩阵短视频”作为短视频领域的一种新兴策略&#xff0c;正以其独特的优势&#xff0c;逐渐重塑内容生…

OpenAI助手API接入-问答对自动生成

支持GPT-3.5-Turbo, GPT-4o, GPT-4-Turbo import json import openai from pathlib import Path import os client openai.OpenAI(base_urlbase_url, api_keyapi_key) file client.files.create( fileopen("H3.pdf", "rb"), purposeassistants ) …

利用GNSS IMU集成提高车道级定位精度

准确的定位对于很多不同的事情都是至关重要的。导航系统可以引导我们去某个地方&#xff0c;自动驾驶汽车可以利用这些数据在道路上安全行驶。尽管全球导航卫星系统(GNSS)在定位方面非常出色&#xff0c;但它们可能并不总是提供最准确的车道水平事实。解决这个问题的一个有希望…

【linux】docker下nextcloud安装人脸识别插件2

接上文 【linux】docker下nextcloud安装人脸识别插件-CSDN博客 由于作者不再维护此插件&#xff0c;转而开发新的插件 recognize &#xff0c;因此同步更新插件使用教程。 1、下载人脸识别app&#xff1a;recognize Recognize - Apps - App Store - Nextcloud 2、将插件recog…

鸿蒙开发接口媒体:【@ohos.multimedia.medialibrary (媒体库管理)】

媒体库管理 说明&#xff1a; 该组件从API Version 6开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入模块 …

SAP-FI和SD的集成逻辑

FI_AR应收账款 1. 销售业务流程概览 2. SD模块组织架构 3. SAP与金税系统开票过程介绍 4. SD后台基本环境搭建 后台配置:请参照文档“01 SD_后台配置清单_V1.0” 5. 客户主数据 客户主数据相关事务代码: FD01(FI模块单个) FD02(OB20

Redis常用命令大全

目录 1、五大数据类型的基本命令 1.1 字符串 1.2 列表 1.3 哈希 1.4 集合 1.5 有序集合 2、与key相关 2.1 查看redis数据的类型 2.2 查看当前redis库中的所有key命令 3、除了五大数据类型外常见命令 3.1 键操作 3.2 服务器操作 3.3 连接操作 3.4 发布/订阅 3.5 事…

神经网络与深度学习——第5章 卷积神经网络

本文讨论的内容参考自《神经网络与深度学习》https://nndl.github.io/ 第5章 卷积神经网络 卷积神经网络 卷积 卷积的定义 一维卷积 二维卷积 互相关 卷积的变种 卷积的数学性质 交换性 导数 卷积神经网络 用卷积来代替全连接 卷积层 汇聚层 卷积网络的整体结构 参数学习 卷…

Android更新优化 - 增量更新是如何节省用户时间和流量的

增量更新和全量更新 我想玩过大型手游的人都知道&#xff0c;手游的安装包非常大&#xff0c;因为资源图片众多。而你每次更新都把所有文件都更新下来&#xff0c;是非常耗时的&#xff0c;对吧。耗时是一个方面&#xff0c;有些人在户外开的是移动网络&#xff0c;动不动就几…

杰理-7014配置

杰理-7014配置 1.复制 7012A7 添加一个板级 2.根据自己的功能修改板级 & 以下修改&#xff08;4M 7014f3&#xff09; download.bat 修改调用文件 0x3E0000计算方法 echo offecho ******************************************************************************** e…

【Python入门学习笔记】Python3超详细的入门学习笔记,非常详细(适合小白入门学习)

Python3基础 想要获取pdf或markdown格式的笔记文件点击以下链接获取 Python入门学习笔记点击我获取 1&#xff0c;Python3 基础语法 1-1 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指…

LabVIEW超声波局部放电检测系统开发

LabVIEW超声波局部放电检测系统开发 在高压电力系统中&#xff0c;局部放电(PD)是导致绝缘失效的主要原因之一。局部放电的检测对于确保电力系统的可靠运行至关重要。开发了一种基于LabVIEW软件的超声波局部放电检测系统的设计与实现。该系统利用数字信号处理技术&#xff0c;…

新型 Meterpreter 后门能够在图片中隐藏恶意代码

据Cyber Security News消息&#xff0c;ANY.RUN 沙盒分析了一种被称为Meterpreter 的新型后门恶意软件&#xff0c;能利用复杂的隐写技术将恶意有效载荷隐藏在看似无害的图片文件中。 基于Meterpreter的攻击从一个包含 PowerShell 脚本的 .NET 可执行文件开始&#xff0c;该脚…

AI免费插件 批量条码大师,支持100多种条码类型

没想到在网上看到一款和之前 悟空条码 类似的条码插件&#xff0c;叫批量条码大师&#xff0c;他做的比 悟空条码 功能更强&#xff0c;界面更美观&#xff0c;特分享出来给大家。 本插件采用了BWIPJS条码库&#xff0c;支持110种条码、二维码的生成; 支持批量生成&#xff0c;…

直接干免费?AI大模型的航海时代是真的要来了

5月里&#xff0c;在火山引擎Force原动力大会上&#xff0c;字节对外宣布豆包大模型正式开启对外服务&#xff0c;其使用价格仅为0.0008元/千tokens、0.005元/千tokens&#xff0c;较行业降幅达99.3%、95.8%&#xff0c;已经达到了行业价格的“地板价”&#xff0c;率先打响了降…

TXT文档拆分、合并、添加内容,修改内容、删除内容——首助编辑高手软件一招解决

下面这个TXT文档里面是一篇长篇小说&#xff0c;大家都知道一般小说文字内容是比较大的一个文件呢&#xff0c;想要拆分&#xff0c;拆分肯定是有方法呢&#xff0c;比如比较重统的方法手动一章一章复制出来&#xff0c;粘贴到另一个文档里面去粘贴&#xff0c;手动操作是不是很…

逆天工具一键修复图片,视频去码。简直不要太好用!

今天&#xff0c;我要向您推荐一款功能强大的本地部署软件&#xff0c;它能够在您的计算机上一键修复图片和视频&#xff0c;去除令人不悦的码赛克&#xff08;轻度马赛克&#xff09;。这款软件是开源的&#xff0c;并在GitHub上公开可用&#xff0c;您可以免费下载并使用。 …

全球高端奢侈瑜伽服市场霸主Lululemon在美股的股价还有巨大的上涨空间

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 一、Lululemon公司介绍 1.1、创立与起源&#xff1a; Lululemon(LULU)由Chip Wilson于1998年在加拿大温哥华创立。1.2、产品与市场定位&#xff1a; Lululemon起初以瑜伽裤起家&#xff0c;现已发展成为涵盖瑜伽、跑步、训…