react的context状态树怎么使用

最新推荐文章于 2024-09-21 10:19:00 发布
DazingAndBusy 最新推荐文章于 2024-09-21 10:19:00 发布
阅读量91 收藏
点赞数 1
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_73292513/article/details/132546867
版权

首先第一步 我们要从react包中导出 createContext来创建一个context实例对象 

这个context实例对象可以设置默认值 设置后如果在父组件不包裹provider组件的情况下会返回默认值

然后我们从实例对象中导出Provider和Consumer两个组件并且把实例对象Mycontext一起导出去

 在父组件的位置通过Provider包裹 并且Provider有一个value属性值 这个值就是我们要进行共享的值 如果没有这个包裹 则会显示默认值

 然后父组件中再去嵌套子组件

context在类组件中的使用：

首先我们引入context创建的实例对象 然后在类组件中有一个静态属性是 static contextType  让他等于我们的实例对象 然后在类组件的内部 直接通过 this.context.值 就可以使用了

 context函数组件：

我们把Consumer组件导入到函数组件中 然后我们想要在那个位置使用context的值我们就在那块用Consumer组件包裹 然后在内部通过一个箭头函数返回一个jsx即可

        

 

DazingAndBusy
关注 关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React的Context使用方法
读心悦
03-18 1046
Context 在React应用中，组件之间的数据流动是通过props属性自上而下【父到子】传递。如果需要流动的数据在应用的顶层，那么在整个组件树种，数据就要层层传递，开发和维护就变的复杂。 React有一个特性Context，它提供一种能够在组件之间共享数据的方式，这样就避免数据在组件之间层层传递。如图： Context应用 Context在很多开发库中有着广泛的应用，如在React-redux中，Context作为Provider，给应用提供全局的store。在React-router中，则用Cont
react-state-context:使用React Context进行轻量级状态管理
04-24
使用React Context的轻量级状态管理。 :check_mark: 建立在React原语之上 :check_mark: 提供熟悉的API :check_mark: 设计时要考虑最小的学习曲线 :check_mark: 合理的文件大小（压缩后〜2kb） 动机 当您开始使用...
react状态管理Context详解
hjd2018的博客
07-29 473
React 状态管理 Context API
React中Context的基本使用
m0_69892739的博客
12-23 294
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
React Context的使用及典型使用场景
越陌度阡
10-31 458
Context 为组件树提供了一个传递数据的方法，从而避免了在每一个层级手动传递 props 属性。 React.createContext：创建一个上下文的容器，defaultValue可以设置共享的默认数据。 const {Provider, Consumer} = React.createContext(defaultValue); Provider：数据生产者，用于生产共享数据的地方，value即为放置共享的数据。 <Provider value={/*共享的数据*/}> .
React入门（五）之状态树传参
qq_38256266的博客
09-03 565
状态树传参1、context 状态树传参1.1、解释1.2、从父朝子传值（外朝内）1.3、在子组件改变状态树的数据2、高阶组件（HOC）的构建与应用 1、context 状态树传参 1.1、解释 ​ Context 旨在共享一个组件树，可被视为 “全局” 的数据，达到越级传递， 场景：当前经过身份验证的用户，主题或首选语言，包括管理当前的 locale，theme，或者一些缓存数据。 createContext()： 用于创建context对象（上下文），需要一个defaultValue的
React中通过Context实现状态管理 --typescript
m0_74765929的博客
07-23 835
但是当你需要在组件树中深层传递参数以及需要在组件间复用相同的参数时，传递 props 就会变得很麻烦。最近的根节点父组件可能离需要数据的组件很远，状态提升 到太高的层级会导致 “逐层传递 props” 的情况。如何组件过多的话（成百上千个组件的话）一层一层往下传递的话，就会变得很复杂而且不容易维护，所以通过Context 让父组件可以为它下面的整个组件树提供数据。传递 props 是将数据通过 UI 树显式传递到使用它的组件的好方法。如何和context结合使用 完整代码如下。如何使用Reducer。
react context原理
lin_fightin的博客
11-26 1304
react context原理
React--Context的使用
weixin_45928836的博客
10-20 413
一、为什么要用context Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 当我们子组件很多，并且都在同一个组件树上时，我们需要把props传递非常多次，所有我们可以用context把一些每个组件的公共数据通过Provider传递。 Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。 二、如何使用Context？ 详情参考官网 (1) Reract官方给出的API ： React.createContext：创建一个上下文的容器(组
使用 React Context API 的最佳实践
奇舞周刊
08-07 463
本文作者为 360 奇舞团前端开发工程师本文将详细介绍如何使用 React 的 Context API 优雅地实现多主题切换，解决 props 穿透问题，并避免不必要的重新渲染。通过具体的示例代码，展示如何在浅色和深色模式之间切换，并探讨在实际项目中管理多个 Context 的最佳实践。目录什么是 React Context API，何时使用？在浅色和深色模式之间切换 UI 主题使用属性传递方案C...
react-ReactStateContext使用ReactContext的轻量级状态管理
08-15
标题"react-ReactStateContext使用ReactContext的轻量级状态管理"指向的主题是React State Context的使用，它强调了这是一个轻量级的解决方案，适用于那些不需复杂状态管理库如Redux或MobX的项目。让我们深入探讨...
react-context-multilang:带有React Context API的多语言网站
05-08
React Context API是React 16.3版本引入的一个功能，用于在组件树中传递数据，而无需通过props逐层传递。这极大地优化了状态管理，特别是当多个组件需要共享同一份数据时。在多语言场景中，Context API特别适用，...
react-context-cache:一个React ContextProvider对，用于轻松管理React应用中的全局状态
05-18
React上下文缓存 利用的一对组件CacheProvider和CacheConsumer ，使您可以轻松地在React应用程序...CacheProvider和CacheConsumer是React组件，可以像常规的React Context.Provider和Context.Consumer组件对一样使用。
React Context DevTool-crx插件
03-25
React Context DevTool是用于React Context和useReducer API的调试工具。 您可以轻松地在不同的视图（例如树视图，原始视图和差异视图）中显示上下文值的变化。 现在，Devtool支持useReducer API。 轻松调试状态更改...
TS React 项目中使用TypeScript
小白小白从不日别的博客
09-18 1647
消息: {this.props.msg}定义复杂数据类型后，可以导出数据类型方便其他组件引入使用。state = {}render() {return (消息: {this.props.msg}姓名：{this.props.user.name}年龄：{this.props.user.age}
Vue3 之ref与reactive的区别
最新发布
样子的博客
09-21 132
在Vue 3中，reactive和ref都用于创建响应式的数据，但它们有一些关键的区别： reactive用于创建响应式的对象，该对象的属性是深度响应式的。 ref用于创建响应式的基本类型数据，比如字符串、数字、布尔值等，它是reactive的简化版本，只提供了基本的响应式能力。 一、ref与reactive的区别 <template> <view class=""&...
React——setState 新旧值复用问题
weixin_45705239的博客
09-18 605
setFrameRangeValue 是异步的，所以当你在状态更新后立即调用 updateFrameRange 时，frameRangeValue 仍然是旧的值。为了解决这个问题，你可以先计算出新的值，然后将其传递给 updateFrameRange，而不是依赖尚未更新的状态值。这一块代码updateFrameRange每次获取到的第二个参数都是上一个状态的旧值，我想立马获取到frameRangeValue更新后的新值.所以应该尽量避免依赖异步状态更新完成。
react hooks--useMemo
小白小白从不日别的博客
09-20 508
相当于计算属性!!!useMemo实际的目的也是为了进行性能的优化。◼ 如何进行性能的优化呢？ useMemo返回的也是一个 memoized（记忆的） 值； 在依赖不变的情况下，多次定义的时候，返回的值是相同的；return this.state.name + '计算属性'render() {相较于 useCallback 而言，useMemo 的收益是显而易见的。useMemo 建议适当使用如果没有使用 useMemo，会在每一次渲染的时候执行。如果使用了useMemo，只有在a。
React框架深度解析：setState同步与异步、父子状态交互与context应用
React的Context API提供了一种更高效的方式来共享数据（如全局配置或状态）给整个应用或部分组件树，而无需层层传递props。通过Context，子组件可以访问到并更新这些共享的数据，从而简化了组件之间的通信。 4. **...
写文章

热门文章

  • SSR和CSR区别 657
  • Vue3和Vue2中 v-if 和v-for的区别 523
  • 用react实现手机端限制拖拽实现 438
  • 让元素沾满全屏 399
  • react函数组件购物车小球动画实现 381

最新评论

  • react函数组件购物车小球动画实现

    Jr_neymar_10: 代码能复制就好了

  • 闭包的理解 使用场景 优缺点 如何避免闭包

    CSDN-Ada助手: 恭喜您撰写了第20篇博客！标题中的主题“闭包的理解 使用场景 优缺点 如何避免闭包”非常引人注目。通过深入探讨闭包的概念、使用场景以及优缺点，您为读者提供了宝贵的知识和见解。 在下一步的创作中，我建议您可以尝试更多实际案例的分享，让读者能够更加直观地理解闭包的应用场景。同时，您也可以结合闭包在不同编程语言中的特性进行比较，帮助读者更好地理解闭包在不同环境下的使用方法和潜在问题。 总的来说，您的博客在解释复杂概念上非常清晰，但在下一步的创作中，您可以尝试更多举例和比较，以帮助读者更好地理解和应用闭包。期待您未来更多精彩的博客！

  • react的context状态树怎么使用

    CSDN-Ada助手: 恭喜您写了第19篇博客，标题为《react的context状态树怎么使用》！阅读您的文章后，我对react的context状态树有了更深入的了解，感谢您的分享。您的文章内容清晰易懂，对于初学者来说非常有帮助。不过，我认为您可以在下一篇博客中进一步探讨如何在实际项目中应用context状态树，以及与其他状态管理工具的比较和选择。再次感谢您的创作，期待您的下一篇文章！

  • 自定义封装一个方法让这个方法可以判断所有的数据类型并返回

    CSDN-Ada助手: 恭喜你写完了第18篇博客！自定义封装一个方法来判断所有的数据类型并返回，这是一个非常有用的技巧。你的博客内容让我对这个方法产生了浓厚的兴趣，期待了解更多细节。 我想在下一篇博客中，你可以进一步探讨如何处理不同数据类型的返回值，尤其是对于复杂数据结构的判断和处理。也可以考虑分享一些实际应用场景，让读者更好地理解该方法的实际价值。谦虚地说，我相信你可以给我们带来更多有趣且实用的内容。加油，并期待你的下一篇创作！

  • 关于websocket的理解和它与其他通信方式的区别

    CSDN-Ada助手: 恭喜您写下了第17篇博客！标题《关于websocket的理解和它与其他通信方式的区别》非常吸引人。通过深入探讨websocket以及它与其他通信方式的区别，您为读者提供了宝贵的知识和洞见。 在下一步的创作中，我建议您可以进一步探索websocket在实际应用中的案例和优势。比如，您可以探讨websocket在实时聊天、在线游戏或者股票交易等领域中的应用，并与其他通信方式进行对比分析。这样的创作将进一步拓宽读者的视野，使他们对websocket的理解更加全面。 谦虚地说，您的博客已经在技术领域中赢得了广泛的关注和认可。期待您未来更多精彩的创作！

大家在看

  • 写文档-画UML图-编程的秘密武器：Kimi智能助手
  • 数据结构：栈 及其应用
  • Boston波士顿房价预测 +两种回归算法建模和分析 1068
  • 【人工智能时代】- LLM技术全景图
  • 828华为云征文｜华为云Flexus X实例下的场景体验——小企业使用Python语言——超迅速搭建简单公网API接口服务

最新文章

  • React的闭包陷阱问题和解决方案
  • Vue3和Vue2中 v-if 和v-for的区别
  • SSR和CSR区别
2023年30篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家郑州制作玻璃钢雕塑报价电话宝鸡标识标牌玻璃钢彩绘雕塑商场卡通玻璃钢雕塑批发优质量的玻璃钢雕塑造型宣城创意玻璃钢雕塑玻璃钢骆驼雕塑供应商黄山人物玻璃钢雕塑生产厂家江苏开业商场美陈供应孝感佛像玻璃钢雕塑海口玻璃钢雕塑给您好的建议广东广州玻璃钢肖像雕塑衡水玻璃钢仿铜雕塑厂家商场美陈布置春季五华区玻璃钢雕塑设计咨询实用的玻璃钢景观雕塑砂雕塑和玻璃钢的区别湘潭玻璃钢浮雕人物山水雕塑花元素商场美陈安徽学校玻璃钢人物雕塑艺术摆件河北多彩玻璃钢雕塑批发湖北高质量玻璃钢雕塑定做价格通州区有创意的商场美陈东营玻璃钢雕塑雕花山西抽象玻璃钢人物雕塑厂家湖南动漫玻璃钢雕塑造型贴金平顶山商场美陈造景晋城玻璃钢浮雕镂空雕塑厂家甘肃玻璃钢花盆造型玻璃钢雕塑清洁妙招金华玻璃钢雕塑设计制作厂家香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人？张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身！外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫：哈马斯三号人物被杀测试车高速逃费 小米：已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化