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的子组件都会重新渲染。

相关推荐
invicinble3 分钟前
对于vue2转vue3相关技术整合
前端
MacroZheng12 分钟前
腾讯又开源了一个新项目,用起来真优雅!
前端·vue.js·人工智能
如此这般英俊26 分钟前
手搓Claude Code-第十三章 background_tasks
前端·人工智能·chrome·python·算法·语言模型·自然语言处理
人间凡尔赛28 分钟前
Angular 20 告别 Zone.js:Zoneless 无 Zone 时代正式开启,Signals 驱动的响应式新范式(附完整代码)
前端·angular
雪芽蓝域zzs31 分钟前
(五)Vue3 管理后台:权限控制原理 + 完整流程梳理
前端
meilindehuzi_a33 分钟前
React JWT 登录鉴权实战:从无状态 HTTP 到路由守卫、Zustand 与 Axios 拦截器
前端·react.js·http
爱酱丶42 分钟前
VS Code 快速生成Vue3 + TypeScript + Setup 基础空模板
前端·javascript·typescript
小帅不太帅44 分钟前
我把金博士使用 GPT 证明 Crouzeix 猜想的方法做成了一个 deep-learn 技能
前端·github·agent
Maxkim1 小时前
在 GitHub 仓库里配一个 AI Code Reviewer,自动审查 PR
前端·javascript