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

React Context用法总结

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 使用场景

  1. 主题切换
  2. 用户认证状态
  3. 语言偏好
  4. 全局配置
  5. 路由状态共享

6.2 最佳实践建议

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

相关文章:

React Context用法总结

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

[笔记] 使用 Jenkins 实现 CI/CD :从 GitLab 拉取 Java 项目并部署至 Windows Server

随着软件开发节奏的加快&#xff0c;持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;已经成为确保软件质量和加速产品发布的不可或缺的部分。Jenkins作为一款广泛使用的开源自动化服务器&#xff0c;为开发者提供了一个强大的平台来实施这些实践。然而…...

腾讯云AI代码助手编程挑战赛-如意

作品简介 《如意》是一款结合腾讯云AI代码助手生成的、集智能问答、知识学习和生活助手功能于一体的应用&#xff0c;在通过先进的AI技术提升用户的工作效率、学习效果和生活质量。无论是解答疑难问题、提供专业建议&#xff0c;还是帮助规划日程、提升技能&#xff0c;它都能…...

TAS测评倍智题库 | 益丰大药房2025年中高层测评BA商业推理测评真题考什么?

您好&#xff01;您已被邀请参加360评估。您的评估与反馈将有助于被评估人更深入地了解个人情况&#xff0c;发现个人优势和潜在风险。请您秉持公正、开放的心态进行评估。请尽快完成评估&#xff0c;在此衷心感谢您的配合与支持&#xff01; ​ 相关事宜&#xff1a; 请您在…...

2025 First LOOK! CnosDB 新版本 2.4.3.1 发布

&#x1f539; 版本号&#xff1a;2.4.3.1 &#x1f539; 发布日期&#xff1a;2024年11月05日 功能优化 简化编解码器错误定义 #2368 删除不必要的const DEFAULT_* #2378 添加 wal 压缩检查 #2377 移除 page reader #2380 创建配额 #2367 减少内存复制和计算 #2384 构…...

PyMysql 01|(包含超详细项目实战)连接数据库、增删改查、异常捕获

目录 一、数据库操作应用场景 二、安装PyMysql 三、事务的概念 四、数据库的准备 五、PyMysql连接数据库 1、建立连接方法 2、入门案例 六、PyMysql操作数据库 1、数据库查询 1️⃣查询操作流程 2️⃣cursor游标 ​3️⃣查询常用方法 4️⃣案例 5️⃣异常捕获 …...

Android14上使用libgpiod[gpioinfo gpioget gpioset ...]

环境 $ cat /etc/os-release NAME="Ubuntu" VERSION="20.04.5 LTS (Focal Fossa)" ID=ubuntu ID_LIKE=debian PRETTY_NAME="Ubuntu 20.04.5 LTS" VERSION_ID="20.04" HOME_URL="https://www.ubuntu.com/" SUPPORT_URL="…...

网络安全 信息收集入门

1.信息收集定义 信息收集是指收集有关目标应用程序和系统的相关信息。这些信息可以帮助攻击者了解目标系统的架构、技术实现细节、运行环境、网络拓扑结构、安全措施等方面的信息&#xff0c;以便我们在后续的渗透过程更好的进行。 2.收集方式-主动和被动收集 ①收集方式不同…...

修改sshd默认配置,提升安全

对于Linux服务器&#xff0c;特别是暴露在公网的服务器&#xff0c;会经常被人扫描、探测和攻击。包括通过ssh访问登录攻击。对此&#xff0c;对默认的sshd配置进行调整&#xff0c;提升安全。 下面以CentOS 7.9为例说明&#xff1a; 一、常见安全措施 以root用户编辑vim /e…...

Clojure语言的面向对象编程

Clojure语言的面向对象编程 引言 Clojure是一种现代的Lisp方言&#xff0c;它特别强调函数式编程&#xff0c;Immutable数据结构和强大的并发能力。然而&#xff0c;很多人可能会问&#xff1a;Clojure支持面向对象编程吗&#xff1f;虽然Clojure没有像Java或C那样的传统类和…...

spring boot启动源码分析(三)之Environment准备

上一篇《spring-boot启动源码分析&#xff08;二&#xff09;之SpringApplicationRunListener》 环境介绍&#xff1a; spring boot版本&#xff1a;2.7.18 主要starter:spring-boot-starter-web 本篇开始讲启动过程中Environment环境准备&#xff0c;Environment是管理所有…...

MySQL复习

基础篇 InnoDB、MyISAM 和 MEMORY 存储引擎的区别&#xff1f; 主要区别&#xff1a; 为什么MySQL选择 InnoDB 作为默认存储引擎&#xff1f; 1.innodb支持事务&#xff0c;myisam、memory不支持。 2.innodb支持行级锁&#xff0c;可以使多个事务同时访问不同的行&#xf…...

ASP.NET Core 实现微服务 -- Polly 服务降级熔断

在我们实施微服务之后&#xff0c;服务间的调用变的异常频繁。多个服务之间可能是互相依赖的关系。某个服务出现故障或者是服务间的网络出现故障都会造成服务调用的失败&#xff0c;进而影响到某个业务服务处理失败。某一个服务调用失败轻则造成当前相关业务无法处理&#xff1…...

服务器漏洞修复解决方案

漏洞1、远程桌面授权服务启用检测【原理扫描】 Windows Remote Desktop Licensing Service is running: Get Server version: 0x60000604 1、解决方案&#xff1a;建议禁用相关服务避免目标被利用 方法一&#xff1a;使用服务管理器 打开“运行”对话框&#xff08;WinR&am…...

“AI智慧组卷系统:让考试变得更简单、更公平!

大家好&#xff0c;我是一名资深的产品经理&#xff0c;今天咱们就来聊聊教育领域的一款黑科技产品——AI智慧组卷系统。在这个信息技术飞速发展的时代&#xff0c;AI技术已经渗透到了我们生活的方方面面&#xff0c;教育行业也不例外。下面我就用大白话给大家介绍一下这个AI智…...

MT6706BL 同步整流 规格书

MT6706BL 是用于反激式变换器的高性能 65V 同步整流器。MT6706BL兼容各种反激转换器类型。MT6706BL 支持 DCM、CCM 和准谐振模式。MT6706BL 集 成 了 一 个 65V 功 率MOSFET&#xff0c;可以取代肖特基二极管&#xff0c;提高效率。V SW <V TH-ON 时&#xff0c;MT6706BL 内…...

vue el-table 数据变化后,高度渲染问题

场景&#xff1a;el-table设置了height属性&#xff0c;但是切换查询条件后再次点击查询重新获取data时&#xff0c;el-table渲染的高度会有问题&#xff0c;滚动区域变矮了。 解决办法&#xff1a;使用doLayout方法‌&#xff0c;在表格数据渲染后调用doLayout方法可以重新布局…...

前端多语言

前端多语言目前常用i18n实现 一、react 1.安装依赖 npm install react-i18next i18next --save2.创建配置文件 src/i18n config.ts&#xff1a;对 i18n 进行初始化操作及插件配置 en.json&#xff1a;英文语言配置文件 zh.json&#xff1a;中文语言配置文件 config.ts im…...

人工智能-机器学习之多元线性回归(项目实践一)

目标&#xff1a;运用scikit-learn进行多元线性回归方程的构建&#xff0c;通过实际案例的训练集和测试集进行预测&#xff0c;最终通过预测结果和MSE来评估预测的精度。 一、首先安装scikit-learn&#xff1a;pip install scikit-learn C:\Users\CMCC\PycharmProjects\AiPro…...

后台定时查杀进程策略

2019年做的一个500元价位内手机后台定时查杀的功能策略&#xff0c;现在2025年了回过头看&#xff0c;确实已经不适用了。现在进程管控大部分是不杀进程的方式了&#xff0c;类似冻结(类似苹果的墓碑机制)&#xff0c;而杀进程策略主要是场景式异常查杀了&#xff0c;例如明显性…...

用JSP+Servlet实现图书管理系统:从登录验证到CRUD完整流程

基于JSPServlet的图书管理系统实战开发指南 在当今企业级应用开发中&#xff0c;Java Web技术栈依然是构建稳健后台系统的首选方案之一。本文将带您从零开始&#xff0c;通过开发一个功能完整的图书管理系统&#xff0c;深入掌握JSPServlet的核心技术组合。不同于简单的CRUD示例…...

谷歌开源Gemma 4:256K原生多模态,免费商用

谷歌刚刚发布了新一代开源大模型Gemma 4&#xff0c;直接把Gemini 3的核心技术下放了。2026年4月2日&#xff0c;谷歌如约献上复活节惊喜&#xff1a;Gemma 4 正式开源。从手机到服务器全覆盖四种规格&#xff0c;首次加入MoE架构&#xff0c;原生支持文本图像音频三模态&#…...

Palworld存档工具完全指南:高效管理与转换游戏数据

Palworld存档工具完全指南&#xff1a;高效管理与转换游戏数据 【免费下载链接】palworld-save-tools Tools for converting Palworld .sav files to JSON and back 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-save-tools Palworld存档工具是一款专为Palwor…...

CVPR2025 | 对抗样本攻防前沿:从基础理论到多模态安全新挑战

1. 对抗样本攻防基础理论演进 对抗样本研究最早可以追溯到2013年Szegedy等人的开创性工作&#xff0c;他们发现通过在图像中添加人眼难以察觉的扰动&#xff0c;就能使深度神经网络产生错误分类。这个发现揭示了机器学习模型在输入空间中的脆弱性&#xff0c;也开启了对抗样本研…...

智能座舱音频革命:如何用AVB交换机+TSN协议打造零延迟车载音响系统?

智能座舱音频革命&#xff1a;AVB交换机与TSN协议构建毫秒级同步音响系统 当你在驾驶舱内播放一首交响乐时&#xff0c;前排低音炮与后排高音单元的时差超过10毫秒&#xff0c;人耳就能感知声场撕裂——这种体验在传统车载音频架构中几乎无法避免。随着智能座舱向"第三生活…...

智能编程伙伴:让快马ai辅助你优化与调试keil嵌入式项目代码

智能编程伙伴&#xff1a;让快马AI辅助你优化与调试Keil嵌入式项目代码 最近在Keil MDK环境下开发STM32G474RET6的精密数据采集系统时&#xff0c;遇到了ADC采样噪声大和实时性不足的问题。作为一个嵌入式开发者&#xff0c;这些问题直接影响系统的精度和响应速度。通过使用In…...

XGP-save-extractor:跨平台开源工具守护游戏存档数据安全

XGP-save-extractor&#xff1a;跨平台开源工具守护游戏存档数据安全 【免费下载链接】XGP-save-extractor Python script to extract savefiles out of Xbox Game Pass for PC games 项目地址: https://gitcode.com/gh_mirrors/xg/XGP-save-extractor 在游戏世界中&…...

从DRC到PAE:VLSI天线效应全解析(含最新工艺避坑指南)

从DRC到PAE&#xff1a;VLSI天线效应全解析&#xff08;含最新工艺避坑指南&#xff09; 在28nm以下先进工艺节点中&#xff0c;工程师们常会遇到一个看似简单却暗藏杀机的问题——某条金属线在DRC检查时完全合规&#xff0c;但流片后却出现大规模栅氧击穿。这种被称为"工…...

告别JSON臃肿!在STM32上用nanopb实现高效数据通信(附完整工程)

告别JSON臃肿&#xff01;在STM32上用nanopb实现高效数据通信&#xff08;附完整工程&#xff09; 在嵌入式开发领域&#xff0c;数据通信的效率往往决定着整个系统的性能上限。当你的STM32F103只有20KB RAM可用时&#xff0c;JSON这种看似方便的文本协议突然变成了奢侈的选择…...

Cesium实战指南4-Polylines图元高级应用解析

1. Polylines图元基础概念与核心价值 在三维地理可视化领域&#xff0c;Polylines&#xff08;折线&#xff09;是最基础也最常用的图元之一。简单来说&#xff0c;它就是连接多个点的线段集合&#xff0c;但千万别小看这个基础功能——从飞机航线到河流走向&#xff0c;从城市…...