当前位置: 首页 > 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;例如明显性…...

从输入法到天气预测:一阶与高阶马尔科夫链的建模实战

1. 马尔科夫链&#xff1a;从输入法到天气预测的数学魔法 第一次听说马尔科夫链这个词时&#xff0c;我正盯着手机输入法发呆。当时在打"奥利奥"这个词&#xff0c;刚输入"ao"就自动联想出"奥利奥"&#xff0c;而前一天我还在为打不出这个词抓耳…...

深入解析 JamTools:免费开源聚合工具的技术架构与跨平台实现

在软件技术快速发展的今天&#xff0c;聚合工具软件因其集成化、高效化的特点受到越来越多用户的青睐。 JamTools 作为一款完全免费开源的聚合工具软件&#xff0c;不仅在功能上满足了用户的多样化需求&#xff0c;在技术实现上也有诸多值得探讨的亮点。 本文将从技术架构、跨平…...

亚马逊德国站VAT发票自动筛选:手把手教你用浏览器控制台JS代码搞定(附Edge/Chrome/Firefox全版本)

亚马逊德国站VAT发票智能筛选&#xff1a;浏览器控制台JS代码实战指南 每次月底处理税务发票时&#xff0c;跨境电商卖家们是否总被海量的PDF文件淹没&#xff1f;特别是亚马逊德国站的卖家&#xff0c;面对后台密密麻麻的发票列表&#xff0c;手动筛选符合特定税号条件的文件不…...

股票相似K线匹配的Python实现:Tushare数据+皮尔逊相关系数全解析

股票相似K线匹配的Python实战&#xff1a;从数据获取到模式识别全流程 在量化交易领域&#xff0c;K线形态分析一直是技术派投资者的重要工具。传统的人工识别方法效率低下且主观性强&#xff0c;而借助Python和现代统计学方法&#xff0c;我们可以实现K线模式的自动化识别与匹…...

Z-Image-Turbo-辉夜巫女应用:快速生成动漫角色,打造个人风格画师

Z-Image-Turbo-辉夜巫女应用&#xff1a;快速生成动漫角色&#xff0c;打造个人风格画师 1. 项目介绍与核心功能 1.1 什么是Z-Image-Turbo-辉夜巫女&#xff1f; Z-Image-Turbo-辉夜巫女是一款基于阿里巴巴通义实验室Z-Image-Turbo模型的图像生成工具&#xff0c;专门针对动…...

2026最权威的降AI率神器横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 使AIGC率降低的关键重心是去削减文本所具有的那种机械规整感&#xff0c;往里面注入属于人类…...

Pixel Language Portal部署案例:在信创环境(麒麟OS+海光CPU)中运行Hunyuan-MT-7B

Pixel Language Portal部署案例&#xff1a;在信创环境&#xff08;麒麟OS海光CPU&#xff09;中运行Hunyuan-MT-7B 1. 项目背景与价值 **像素语言跨维传送门(Pixel Language Portal)**是基于腾讯Hunyuan-MT-7B大模型构建的创新翻译工具&#xff0c;其独特的16-bit像素冒险界…...

OpenClaw多任务队列管理:千问3.5-27B并行处理技巧

OpenClaw多任务队列管理&#xff1a;千问3.5-27B并行处理技巧 1. 为什么需要任务队列管理 上个月我尝试用OpenClaw自动处理200多份PDF文档的摘要生成任务&#xff0c;结果遭遇了典型的"暴力调度"问题——所有任务同时发起请求&#xff0c;导致千问3.5-27B模型实例直…...

OpenClaw本地代理方案:千问3.5-35B-A3B-FP8接口调用加速3种方法

OpenClaw本地代理方案&#xff1a;千问3.5-35B-A3B-FP8接口调用加速3种方法 1. 问题背景与挑战 去年夏天&#xff0c;当我第一次尝试用OpenClaw对接千问3.5-35B-A3B-FP8模型处理图文混合任务时&#xff0c;遇到了令人头疼的延迟问题。一个简单的"分析截图中的文字并生成…...

[推荐]生产环境部署: docker+gitea+jenkins+jenkinsfile+ansible+钉钉 实现多机批量部署及其推送通知

1)打包机: giteapostgres、jenkins软件安装 (注意jenkins镜像中自动安装python和ansible环境)mkdir data, 在此目录下放好docker-compose.yml然后用docker compose up -d 在打包机部署好环境 其它工作机器什么都不用做后续都是用ansible自动完成!!![rootlocalhost soft]# cat d…...