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

相关推荐
Carlos_sam24 分钟前
OpenLayers:封装Tooltip
前端·javascript
工呈士37 分钟前
MobX与响应式编程实践
前端·react.js·面试
嘉小华38 分钟前
Android Lifecycle 使用
前端
Sherry00740 分钟前
实时数据传输协议:WebSocket vs MQTT
前端·websocket
然我41 分钟前
JavaScript的OOP独特之道:从原型继承到class语法
前端·javascript·html
腹黑天蝎座43 分钟前
如何更好的实现业务中图片批量上传需求
前端
嘉小华44 分钟前
Android Lifecycle 源码解析
前端
木木夕酱44 分钟前
前端响应式网站编写套路
css·react.js
不_喜44 分钟前
游戏开发零散知识点和优化记录
前端
去伪存真1 小时前
提交规范靠吼没用,看我用“shell+husky螺丝刀”,一键给40多个项目上锁
前端·eslint