当前位置：首页 > news >正文

React Context用法总结

news 来源：原创 2025/5/13 14:06:50

1. 基本概念

1.1 什么是 Context

Context 提供了一种在组件树中共享数据的方式，而不必通过 props 显式地逐层传递。它主要用于共享那些对于组件树中许多组件来说是"全局"的数据。

1.2 基本用法

// 1. 创建 Context
const ThemeContext = React.createContext('light');// 2. 提供 Context
function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}// 3. 消费 Context
function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {const theme = React.useContext(ThemeContext);return <button className={theme}>Themed Button</button>;
}

2. Context API 详解

2.1 创建 Context

// 创建 Context 并设置默认值
const UserContext = React.createContext({name: 'Guest',isAdmin: false
});// 导出 Context 供其他组件使用
export default UserContext;

2.2 Provider 组件

function App() {const [user, setUser] = useState({name: 'John',isAdmin: true});return (<UserContext.Provider value={user}><div className="app"><MainContent /><Sidebar /></div></UserContext.Provider>);
}

2.3 消费 Context

使用 useContext Hook（推荐）

function UserProfile() {const user = React.useContext(UserContext);return (<div><h2>User Profile</h2><p>Name: {user.name}</p><p>Role: {user.isAdmin ? 'Admin' : 'User'}</p></div>);
}

使用 Consumer 组件

function UserRole() {return (<UserContext.Consumer>{user => (<span>Role: {user.isAdmin ? 'Admin' : 'User'}</span>)}</UserContext.Consumer>);
}

3. 高级用法

3.1 多个 Context 组合

const ThemeContext = React.createContext('light');
const UserContext = React.createContext({ name: 'Guest' });function App() {return (<ThemeContext.Provider value="dark"><UserContext.Provider value={{ name: 'John' }}><Layout /></UserContext.Provider></ThemeContext.Provider>);
}function Layout() {const theme = React.useContext(ThemeContext);const user = React.useContext(UserContext);return (<div className={theme}><header>Welcome, {user.name}</header><main>Content</main></div>);
}

3.2 动态 Context

const ThemeContext = React.createContext({theme: 'light',toggleTheme: () => {}
});function ThemeProvider({ children }) {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
}function ThemeToggleButton() {const { theme, toggleTheme } = React.useContext(ThemeContext);return (<button onClick={toggleTheme}>Current theme: {theme}</button>);
}

3.3 Context 与 TypeScript

// 定义 Context 类型
interface UserContextType {name: string;isAdmin: boolean;updateUser: (name: string) => void;
}const UserContext = React.createContext<UserContextType | undefined>(undefined);// 创建自定义 Hook
function useUser() {const context = React.useContext(UserContext);if (context === undefined) {throw new Error('useUser must be used within a UserProvider');}return context;
}// Provider 组件
function UserProvider({ children }: { children: React.ReactNode }) {const [name, setName] = useState('Guest');const [isAdmin] = useState(false);const updateUser = (newName: string) => {setName(newName);};return (<UserContext.Provider value={{ name, isAdmin, updateUser }}>{children}</UserContext.Provider>);
}

4. 最佳实践

4.1 创建自定义 Hook

// 创建自定义 Hook 封装 Context 逻辑
function useTheme() {const context = React.useContext(ThemeContext);if (context === undefined) {throw new Error('useTheme must be used within a ThemeProvider');}return context;
}// 使用自定义 Hook
function ThemedButton() {const { theme, toggleTheme } = useTheme();return (<button onClick={toggleTheme} className={theme}>Toggle Theme</button>);
}

4.2 分离 Context 逻辑

// contexts/theme.js
export const ThemeContext = React.createContext({theme: 'light',toggleTheme: () => {}
});export function ThemeProvider({ children }) {const [theme, setTheme] = useState('light');const value = {theme,toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')};return (<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>);
}export function useTheme() {const context = React.useContext(ThemeContext);if (context === undefined) {throw new Error('useTheme must be used within a ThemeProvider');}return context;
}

4.3 性能优化

// 使用 memo 避免不必要的重渲染
const UserInfo = React.memo(function UserInfo() {const { name } = useUser();return <div>User: {name}</div>;
});// 分离状态，避免不相关的更新
function AppProvider({ children }) {return (<ThemeProvider><UserProvider><SettingsProvider>{children}</SettingsProvider></UserProvider></ThemeProvider>);
}

5. 常见问题和解决方案

5.1 避免重渲染

// 使用 useMemo 优化 Context value
function ThemeProvider({ children }) {const [theme, setTheme] = useState('light');const value = useMemo(() => ({theme,toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')}), [theme]);return (<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>);
}

5.2 处理嵌套 Context

// 创建组合 Provider
function AppProviders({ children }) {return (<AuthProvider><ThemeProvider><UserProvider>{children}</UserProvider></ThemeProvider></AuthProvider>);
}// 使用组合 Provider
function App() {return (<AppProviders><MainApp /></AppProviders>);
}

6. 总结

6.1 使用场景

主题切换
用户认证状态
语言偏好
全局配置
路由状态共享

6.2 最佳实践建议

适度使用 Context
创建专门的 Provider 组件
使用自定义 Hook 封装 Context 逻辑
注意性能优化
合理组织 Context 结构

React Context用法总结

1. 基本概念 1.1 什么是 Context Context 提供了一种在组件树中共享数据的方式，而不必通过 props 显式地逐层传递。它主要用于共享那些对于组件树中许多组件来说是"全局"的数据。 1.2 基本用法 // 1. 创建 Context const ThemeContext React.createC…...

编程日记 2025/5/13 14:06:50

Linux好用软件

力荐软件 apt-fast：更快速的软件管理安装过程会进入一个图形界面，配置线程数等信息，全部默认即可 sudo add-apt-repository ppa:apt-fast/stable sudo apt-get update sudo apt-get -y install apt-fast 以后安装应用，把apt-get直接替换成apt-fast即可，例如安装vlc sudo…...

编程日记 2025/5/8 2:09:02

文章目录 1.DDL 1.DDL --添加字段 ALTER TABLE table_name add COLUMN embed_model VARCHAR(32) NOT NULL COMMENT 名称备注 COLLATE utf8mb4_bin AFTER config_code;--修改字段 ALTER TABLE table_name CHANGE COLUMN column_a column_b VARCHAR(500) NOT NULL COMMENT 配置信…...

编程日记 2025/5/9 14:10:21

webrtc之rtc::ArrayView＜const uint8_t＞

rtc::ArrayView<const uint8_t> 是 WebRTC（或其他基于 rtc 命名空间的库）中常见的一个类型，它通常用于表示一块只读的内存区域，该内存区域由一系列 uint8_t 类型（无符号 8 位整数）元素组成。 1. rt…...

编程日记 2025/5/12 0:41:17

深入理解 MySQL 的 EXPLAIN 工具

1. 什么是 EXPLAIN 工具？ EXPLAIN 是 MySQL 中用来分析 SQL 查询执行计划的命令，它能够显示查询在执行时会如何访问表、使用哪些索引、扫描多少行等信息。通过 EXPLAIN 工具，开发者可以直观地了解查询的执行过程，从而进行针对性的…...

编程日记 2025/5/7 17:37:30

谷歌Google、紫鸟浏览器插件开发

对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插…...

编程日记 2025/5/1 23:51:01

HTML 显示器纯色亮点检测工具

HTML 显示器纯色亮点检测工具相关资源文件已经打包成html等文件，可双击直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Html相关程序案例，秉着开源精神的想法，望大家喜欢&#…...

编程日记 2025/5/13 12:10:56

Win32汇编学习笔记09.SEH和反调试

Win32汇编学习笔记09.SEH和反调试-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net SEH - structed exception handler 结构化异常处理跟筛选一样都是用来处理异常的,但不同的是筛选器是整个进程最终处理异常的函数,但无法做到比较精细的去处理异常(例如处理…...

编程日记 2025/5/4 14:45:05

计算机组成原理（九）：乘法器

乘法器原理乘法器的工作原理可以用二进制乘法来说明。二进制乘法和十进制乘法类似，通过部分积的累加得到结果。部分积的生成在二进制乘法中，每一位的乘积是两个二进制数位的与运算（0 0 0，1 0 0，0 1 0&…...

编程日记 2025/5/10 20:13:32

前端开发中常用的插件库

ahooks 一个高质量且可靠的React Hooks库。class-variance-authority（CVA） 是一个专注于解决CSS类管理问题的库。classnames 是一个在React开发中非常流行的JavaScript工具库，它可以帮助开发者有条件地连接类名字符串。copy-to-clipboard 一个…...

编程日记 2025/5/7 10:32:12

认识+安装ElasticSearch

1. 为什么要学习ElasticSearch? 一般的来说,项目中的搜索功能尤其是电商项目,商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的，存在很多问题。 1.1 数据库搜索所存在的问题 1.1.1 查询效率较低由于数据库模糊查询不走索引&…...

编程日记 2025/5/10 4:58:24

Nginx | 解决 Spring Boot 与 Nginx 中的 “413 Request Entity Too Large“ 错误

关注：CodingTechWork 引言在 Web 开发中，413 Request Entity Too Large 是一种常见的 HTTP 错误，它指示客户端请求的实体（例如文件或数据）超出了服务器允许的最大大小。对于使用 Spring Boot 和 Nginx 的应用程序来说…...

编程日记 2025/5/12 12:58:25

CAD批量打印可检索的PDF文件

本文虽介绍CAD使用方法，但还是劝告大家尽早放弃使用CAD软件。。。。太TM难用了当你打开CAD时发现如下一堆图纸，但是不想一个一个打印时。你可以按照下面操作实现自动识别图框实现批量打印。 1.安装批量打印插件 2.安装后打开CAD，输入命令Bp…...

编程日记 2025/5/7 6:26:06

理解Unity脚本编译过程：程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节，其中一个比较重要的知识点就是如何自定义Assembly。预定义的assembly 默认情况下，Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…...

编程日记 2025/5/12 12:51:38

Linux-Ubuntu之SPI串行通信陀螺仪和加速度计

Linux-Ubuntu之SPI串口通信陀螺仪和加速度计一，SPI通信原理二，ICM-20608六轴传感器控制三，代码1.小tip 一，SPI通信原理 SPI：串行全双工通信，最高能达到百MHZ，通常一个主设备跟多个从设备&…...

编程日记 2025/5/12 9:16:12

【C++/控制台】2048小游戏

源代码： #include <iostream> #include <windows.h> #include <stdio.h> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h>// #define KEY_DOWN(VK_NONAME) ((GetAsyncKeyState(VK_NONAME)…...

编程日记 2025/5/5 14:48:32

github gitbook写书

github创建新的仓库在仓库中添加目录 ‘SUMMARY.md # Summary * [简介](README.md)gitbook 新建一个site https://www.gitbook.com/ 注册账号取名字一路 next，注意选免费版最后 gitbook同步到github 你在主页可以看到刚刚的test网站点击右上角圈出来…...

编程日记 2025/5/7 23:48:22

鸿蒙中调整应用内文字大小

1、ui Stack() {Row() {ForEach([1, 2, 3, 4], (item: number) > {Text().width(3).height(20).backgroundColor(Color.Black).margin(item 2 ? { left: 8 } : item 3 ? { left: 7 } : { left: 0 })})}.width(97%).justifyContent(FlexAlign.SpaceBetween).padding({ ri…...

编程日记 2025/5/13 0:26:44

欧拉公式和傅里叶变换

注：英文引文机翻，未校。中文引文未整理去重，如有异常，请看原文。 Euler’s Formula and Fourier Transform Posted byczxttkl October 7, 2018 Euler’s formula states that e i x cos ⁡ x i sin ⁡ x e^{ix} \cos{x} i …...

编程日记 2025/5/10 13:28:50

【C++经典例题】求1+2+3+...+n，要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句

💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏： 期待您的关注题目描述： 原题链接： 求123...n_牛客题霸_牛客网 (nowcoder.com) 解题思路： …...

编程日记 2025/5/8 5:15:00

Robot---奇思妙想轮足机器人

1 背景传统机器人有足式、轮式、履带式三种移动方式，每种移动方式都有各自的优缺点。轮式机器人依靠车轮在地面上移动，能源利用率高、移动速度快，但是仅以轮子与地面接触，缺乏越障能力和对复杂地形的适应能力，尤其面对…...

编程日记 2025/5/11 13:35:59

升级 Spring Boot 3 配置讲解 —— 如何处理文件上传下载？

学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ 1. 环境准备在开始之前，确保你已经具备以下环境： JDK 17 或更高版本（Spring Boot 3 要求的最低 JDK 版本）Maven 或 Gradle 构建工具Spr…...

编程日记 2025/5/5 15:20:15

（四）结合代码初步理解帧缓存（Frame Buffer）概念

帧缓存（Framebuffer）是图形渲染管线中的一个非常重要的概念，它用于存储渲染过程中产生的像素数据，并最终输出到显示器上。简单来说，帧缓存就是计算机图形中的“临时画布”，它储存渲染操作生成的图像数据&am…...

编程日记 2025/5/9 18:14:40

WebRTC 在视频联网平台中的应用：开启实时通信新篇章

在当今这个以数字化为显著特征的时代浪潮之下，实时通信已然稳稳扎根于人们生活与工作的方方面面，成为了其中不可或缺的关键一环。回首日常生活，远程办公场景中的视频会议让分散各地的团队成员能够跨越地理距离的鸿沟，齐聚一堂共商…...

编程日记 2025/5/9 17:34:04

Python文件操作

文件的编码文件编码思考：计算机只能识别：0和1，那么我们丰富的文本文件是如何被计算机识别，并存储在硬盘中呢？ 答案：使用编码技术（密码本）将内容翻译成0和1存入。编码技术即&am…...

编程日记 2025/5/10 22:03:03

【渗透测试术语总结】

Top 渗透测试常用专业术语相信大家和我一样，搞不清这些专业名词的区别，所以我来整理一下。 1. POC、EXP、Payload与Shellcode POC：全称 Proof of Concept ，中文概念验证 ，常指一段漏洞证明的代码。 EXP&#xf…...

编程日记 2025/5/5 23:07:24

利用ArcGIS快速准确地统计出地块的现状容积率

研究目的根据建筑.dwg、建筑.dwg Annotation、建筑.dwg Polygon，地籍边界.shp等数据，利用GIS快速准确地统计出地块的现状容积率。研究思路加载数据图层：建筑.dwg Polygon、建筑.dwg Annotation，使用空间连接功能把建筑层数数…...

编程日记 2025/5/12 9:35:41

Linux：守护进程

一、套路直接来，不铺垫了； #include<iostream> #include<string> #include<cstdlib> #include<unistd.h> #include<unistd.h> #include<sys/types.h> #include<sys/stat.h> #include<funtl.h> const …...

编程日记 2025/5/11 9:07:39

《Spring Framework实战》3：概览

欢迎观看《Spring Framework实战》视频教程 Spring Framework 为基于现代 Java 的企业应用程序提供了全面的编程和配置模型 - 在任何类型的部署平台上。 Spring 的一个关键要素是应用程序级别的基础设施支持：Spring 专注于企业应用程序的 “管道”，以便…...

编程日记 2025/5/4 8:12:38

【云商城】高性能门户网构建

第3章高性能门户网构建网站门户就是首页 1.OpenResty 百万并发站点架构 1).OpenResty 特性介绍 2).搭建OpenResty 3).Web站点动静分离方案剖析 2.Lua语法学习 1).Lua基本语法 3.多级缓存架构实战 1).多级缓存架构分析用户请求网站，最开始…...

编程日记 2025/5/12 17:35:07

IvorySQL 升级指南：从 3.x 到 4.0 的平滑过渡

日前，IvorySQL 4.0 重磅发布，全面支持 PostgreSQL 17，并且增强了对 Oracle 的兼容性。关于 IvorySQL 4.0 的介绍，各位小伙伴可以通过这篇文章回顾：IvorySQL 4.0 发布：全面支持 PostgreSQL 17. 在 IvorySQL…...

编程日记 2025/5/1 1:33:19

GESP202312 四级【小杨的字典】题解（AC）

》》》点我查看「视频」详解》》》 [GESP202312 四级] 小杨的字典题目描述在遥远的星球，有两个国家 A 国和 B 国，他们使用着不同的语言：A 语言和 B 语言。小杨是 B 国的翻译官，他的工作是将 A 语言的文章翻译成 B 语言的文章…...

编程日记 2025/5/13 12:43:08

数据库_解决SQL Server数据库log日志过大，清理日志文件方法

SQL Server数据库日志文件过大的原因主要有几个方面： 事务日志记录了所有对数据库进行修改的操作，如插入、更新和删除，这些操作会不断增加日志文件的大小。长时间运行且未正确结束的事务会持续占用事务日志中的空间，导致日志文…...

编程日记 2025/5/10 2:54:38

Java 的单例模式详解及优化

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/5/13 7:26:36

关于 webservice 日志中源IP是node IP的问题，是否能解决换成真实的客户端IP呢

本篇目录 1. 问题背景2. 部署gitlab 17.52.1 添加repo源2.2 添加repo源下载17.5.0的charts包2.3 修改values文件2.3.1 hosts修改如下2.3.2 appConfig修改如下2.3.3 gitlab下的sidekiq配置2.3.4 certmanager修改如下2.3.5 nginx-ingress修改如下2.3.6 <可选> prometheus修…...

编程日记 2025/5/8 0:06:26

[python3]xlrd不支持Excel xlsx文件类型

https://xlrd.readthedocs.io/en/latest/ xlrd is a library for reading data and formatting information from Excel files in the historical .xls format. 解决办法：指定支持的版本1.2.0，pip3 install xlrd1.20 pip3 install xlrd1.2.0 Looking …...

编程日记 2025/5/6 11:29:40

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程（全61集） Element对象与Fiber对象在 React 中，Element 对象和 Fiber 对象是核心概念，用于实现 React 的高效渲染和更新机制。以下是它们的详细解读： 1. Element 对象定…...

编程日记 2025/4/30 10:00:17

【网络协议】动态路由协议

前言本文将概述动态路由协议，定义其概念，并了解其与静态路由的区别。同时将讨论动态路由协议相较于静态路由的优势，学习动态路由协议的不同类别以及无类别（classless）和有类别（classful）的特性…...

编程日记 2025/5/9 12:43:52

DevOps：CI、CD、CB、CT、CD

目录一、软件开发流程演化快速回顾 （一）瀑布模型 （二）原型模型 （三）螺旋模型 （四）增量模型 （五）敏捷开发 （六）DevOps 二、走…...

编程日记 2025/5/13 4:40:52

网络安全 | WAF防护开通流程与技术原理详解

关注：CodingTechWork 引言随着互联网安全形势的日益严峻，Web应用防火墙（WAF, Web Application Firewall）逐渐成为网站和应用的标准防护措施。WAF能够有效识别和防止如SQL注入、跨站脚本攻击（XSS）、恶意流…...

编程日记 2025/5/12 15:14:59

【我的 PWN 学习手札】IO_FILE 之 FSOP

FSOP：File Stream Oriented Programming 通过劫持 _IO_list_all 指向伪造的 _IO_FILE_plus，进而调用fake IO_FILE 结构体对象中被伪造的vtable指向的恶意函数。目录前言一、glibc-exit函数浅析二、FSOP 三、Largebin attack FSOP （…...

编程日记 2025/5/11 9:38:40

Spring——自动装配

假设一个场景： 一个人（Person）有一条狗（Dog）和一只猫(Cat)，狗和猫都会叫，狗叫是“汪汪”，猫叫是“喵喵”，同时人还有一个自己的名字。将上述场景抽象出三个实体类&…...

编程日记 2025/5/11 21:19:12

C语言——文件IO 【文件IO和标准IO区别，操作文件IO】open，write，read，dup2，access，stat

1.思维导图 2.练习 1：使用C语言编写一个简易的界面，界面如下 1：标准输出流 2：标准错误流 3：文件流要求：按1的时候，通过printf输出数据，按2的时候，通过p…...

编程日记 2025/5/10 20:49:18

人工智能知识分享第九天-机器学习_集成学习

集成学习概念集成学习是机器学习中的一种思想，它通过多个模型的组合形成一个精度更高的模型，参与组合的模型称为弱学习器（基学习器）。训练时，使用训练集依次训练出这些弱学习器，对未知的样本进行预测时…...

编程日记 2025/5/9 5:35:40

腾讯云AI代码助手编程挑战赛-武器大师

作品简介对话过程能够介绍二战各种武器冷战武器现代的各种武器装备，陆海空三军都知道。技术架构使用全后端分离的架构，前端使用Vue脚手架，腾讯云修改样式css 开发环境、开发流程系统：win11 开发工具：VS…...

编程日记 2025/5/13 13:43:41

Python机器学习笔记（十八、交互特征与多项式特征）

添加原始数据的交互特征（interaction feature）和多项式特征（polynomial feature）可以丰富特征表示，特别是对于线性模型。这种特征工程可以用统计建模和许多实际的机器学习应用中。上一次学习：线性模型对w…...

编程日记 2025/5/13 0:32:36

java_深入理解main方法

深入理解main方法在 main()方法中，我们可以直接调用 main 方法所在类的静态方法或静态属性。但是，不能直接访问该类中的非静态成员，必须创建该类的一个实例对象后，才能通过这个对象去访问类中的非静态成员，[举例说明]…...

编程日记 2025/5/12 3:22:10

NLP中常见的分词算法（BPE、WordPiece、Unigram、SentencePiece）

文章目录一、基本概念二、传统分词方法2.1 古典分词方法2.2 拆分为单个字符三、基于子词的分词方法（Subword Tokenization）3.1 主要思想3.2 主流的 Subword 算法3.3 Subword 与传统分词方法的比较四、Byte Pair Encoding (BPE)4.1 主要思想4.2 算法过…...

编程日记 2025/5/8 7:04:21

HTTP/HTTPS ②-Cookie || Session || HTTP报头

这里是Themberfue 上篇文章介绍了HTTP报头的首行信息本篇我们将更进一步讲解HTTP报头键值对的含义~~~ ❤️❤️❤️❤️ 报头Header ✨再上一篇的学习中，我们了解了HTTP的报头主要是通过键值对的结构存储和表达信息的；我们已经了解了首行的HTTP方法和UR…...

编程日记 2025/5/13 4:20:52

前端动图方案

1、vue3lottie 解析使用Bodymovin导出为json格式的Adobe After Effects动画 vue3lottie的使用神器：vue3-lottie (electron也适用)-CSDN博客 2、MP4文件 //template部分 <video class"header-bg" src"../../assets/images/screen/layout/heade…...

编程日记 2025/5/11 18:23:50