react中useContext的用法

先在context文件中使用createContext创建初始值

javascript 复制代码
import React from 'react';

const TestContext = React.createContext(true);

export { TestContext };

然后在父组件中引入,利用Provider传入新值

javascript 复制代码
import { TestContext } from '@/utils/context';

<TestContext.Provider value={false}>
  <Child />
</TestContext.Provider>

在子组件中使用useContext获取值

javascript 复制代码
// Child
import { TestContext } from '@/utils/context';

useContext(TestContext); // false

需要注意的是只要父组件中Provider的value发生变化,所有使用了该Context的子组件都会重新渲染。

相关推荐
参宿718 分钟前
像素vs条数级虚拟列表
前端
paopaokaka_luck32 分钟前
基于springboot3+vue3的云南本土影视文旅推荐平台(协同过滤算法、Echarts图形化分析)
前端·spring boot·学习·算法·echarts·mybatis
狂师43 分钟前
AI 测试提效 | 别搞万能 Skill,推荐用 5 个 Agent Skill 串起 UI 自动化全流程
前端·人工智能·测试
breeze jiang1 小时前
React useRef 实战:从 input 聚焦到 Web Worker 引用
前端·javascript·react.js
苏灿烤鱼1 小时前
GitHub #2 拆解|把工程经验装进 Agent,为什么仍会“静默失效”?
javascript·人工智能·agent
90后的晨仔2 小时前
uni-app 生命周期深度解析(iOS / Android / 鸿蒙 / Vue3 四端对照)
前端
钛态3 小时前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web
Rysxt_3 小时前
React vs Vue.js:2025年两大主流前端框架深度对比教程
vue.js·react.js·前端框架
by__csdn3 小时前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular