位置: IT常识 - 正文

React 上下文(react 上下文hooks内容存储到本地)

编辑:rootadmin
在React中上下文是一种通信方案。 上下文的特点 在组件树中,是一种自上而下的单向数据流通信方案,数据只能从父组件注入,在子组件中访问。 组件关系只要满足“父组件-后代组件”这种关系时,都可以使用上下文通信。 在父组件中provide提供数据,在后代组件中注入并使用,这种通信不具有响应式,有点像v ...

推荐整理分享React 上下文(react 上下文hooks内容存储到本地),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react document,react上下文对象,react 上下文hooks内容存储到本地,react contextmenu,react上下文对象,react 上下文hooks内容存储到本地,react上下文,react 上下文hooks内容存储到本地,内容如对您有帮助,希望把文章链接给更多的朋友!

React 上下文(react 上下文hooks内容存储到本地)

在React中上下文是一种通信方案。

上下文的特点在组件树中,是一种自上而下的单向数据流通信方案,数据只能从父组件注入,在子组件中访问。组件关系只要满足“父组件-后代组件”这种关系时,都可以使用上下文通信。在父组件中provide提供数据,在后代组件中注入并使用,这种通信不具有响应式,有点像vue中的provide/inject通信。如何使用上下文

使用const{Provider,Consumer} = Raact.createContext()get="_blank">创建上下文。

使用<Provider value={}></Provider>向组件树中提供数据。

在后代组件中使用<Consumer>{(context)=>(jsx/)}</Consumer>访问上下文数据。

如果后代组件是类组件,可以使用Page.contextType = ThemeContext访问上下文数据。使用上下文穿透和上下文通信的区别props穿透必须清楚组件之间的关系,上下文只要满足“父组件-后代组件”关系。props适合父子关系明显的组件通信,上下文关系适合父子关系不明确的组件通信。props穿透会导致后代组件的props变得臃肿,上下文通信更加直接方便。上下文通信在那些场景遇到路由中会用到上下文通信状态管理中组件库中,切换主题色,切换组件大小等国际化中使用上下文封装拾色器import { PureComponent, useState } from "react"//创建上下文对象const ThemeContext = React.createContext()const{Consumer,Provider} = ThemeContextclass App extends PureComponent{ render(){ return( <Consumer> { (context) => { console.log(context) return( <div style={context}> <h1>555</h1> </div> ) } } </Consumer> ) }}//封装拾色器function ThemeToggle({value, onChange}){ const change = (ev) =>{ const key = ev.target.name // console.log('key',key); const val = ev.target.value // console.log('val',val); //把变化后的主题色回传给父组件 onChange({...value, [key]:val}) } return( <> <div> <label >前景色</label> <input type="color" name="color" value={value.color} onChange={change} /> <label >背景色</label> <input type="color" name="background" value={value.background} onChange={change} /> </div> </> )}function A(){ const[color ,setColor] = useState({color:'#000000',background:'#000000'}) return( <Provider value={color}> <h1>拾色器</h1> <App /> <ThemeToggle value={color} onChange={ev=>setColor(ev)} /> </Provider> )}export default A
本文链接地址:https://www.jiuchutong.com/zhishi/313188.html 转载请保留说明!

上一篇:帝国伪静态Apache的Rewrite如何设置(帝国cms伪静态规则)

下一篇:phpcms如何设置导航(phpcms迁移)

  • 鸿蒙系统OTG线连接U盘怎么传输文件

    鸿蒙系统OTG线连接U盘怎么传输文件

  • 华为荣耀10对比nova4e(华为荣耀10对比nova3)

    华为荣耀10对比nova4e(华为荣耀10对比nova3)

  • vivoy97是什么时候上市的(vivoy97什么时候发布的)

    vivoy97是什么时候上市的(vivoy97什么时候发布的)

  • 转转怎么没有附近功能了(转转附近的东西搜不到)

    转转怎么没有附近功能了(转转附近的东西搜不到)

  • 苹果手机微信删了能恢复吗(苹果手机微信删了怎么办)

    苹果手机微信删了能恢复吗(苹果手机微信删了怎么办)

  • 华为nova7怎么调返回键(华为nova7怎么调刷新率)

    华为nova7怎么调返回键(华为nova7怎么调刷新率)

  • micro接口什么意思(micro接口是什么形状)

    micro接口什么意思(micro接口是什么形状)

  • boseqc35一代和二代的区别(boseqc35一代和二代的 降噪)

    boseqc35一代和二代的区别(boseqc35一代和二代的 降噪)

  • 从抖音号能否看到对方微信号(通过抖音号可以查到抖音本人吗)

    从抖音号能否看到对方微信号(通过抖音号可以查到抖音本人吗)

  • 支付宝怎么捐赠旧衣服(支付宝怎么捐赠衣服)

    支付宝怎么捐赠旧衣服(支付宝怎么捐赠衣服)

  • 微信公交车乘车码在哪(微信公交车乘车码没钱可以用吗)

    微信公交车乘车码在哪(微信公交车乘车码没钱可以用吗)

  • 手机进水后干了充电慢(手机进水后干了充不进去电)

    手机进水后干了充电慢(手机进水后干了充不进去电)

  • excel2010工作簿文件的默认扩展名(excel2010工作簿以文件形式存于磁盘中,其默认扩展名为)

    excel2010工作簿文件的默认扩展名(excel2010工作簿以文件形式存于磁盘中,其默认扩展名为)

  • 苹果下载的软件怎么受信任(苹果下载的软件在哪儿找)

    苹果下载的软件怎么受信任(苹果下载的软件在哪儿找)

  • 手机为什么开免提才能听见(手机为什么开免提打电话会卡顿)

    手机为什么开免提才能听见(手机为什么开免提打电话会卡顿)

  • 微信好友满了怎么办(微信好友满了怎么通知大家)

    微信好友满了怎么办(微信好友满了怎么通知大家)

  • 苹果xs支持多少瓦无线充(苹果xs支持多少瓦)

    苹果xs支持多少瓦无线充(苹果xs支持多少瓦)

  • 微信身份证怎么上传(微信身份证怎么打印出来)

    微信身份证怎么上传(微信身份证怎么打印出来)

  • 钉钉运动打不开怎么办(钉钉运动步数不动是什么情况)

    钉钉运动打不开怎么办(钉钉运动步数不动是什么情况)

  • 百度地图怎么圈范围(百度地图怎么圈出几公里的地方)

    百度地图怎么圈范围(百度地图怎么圈出几公里的地方)

  • ie浏览器如何更新升级(ie浏览器如何更改下载位置)

    ie浏览器如何更新升级(ie浏览器如何更改下载位置)

  • 好友步数为零怎么回事(朋友步数显示0步)

    好友步数为零怎么回事(朋友步数显示0步)

  • 苹果手机弹幕怎么弄(苹果手机弹幕怎么设置)

    苹果手机弹幕怎么弄(苹果手机弹幕怎么设置)

  • 微信发送键失灵怎么办(微信发送键没反应)

    微信发送键失灵怎么办(微信发送键没反应)

  • 最右如何上热门(最右热门榜在哪看)

    最右如何上热门(最右热门榜在哪看)

  • 全年一次性奖金税收优惠政策
  • etc发票可以抵扣进项税吗
  • 退还押金怎么做账
  • 个税申报系统跟工资表累计扣除数不一致怎么办
  • 金税盘开具电子发票后如何保存电子版
  • 电子发票作废了还能恢复吗
  • 税收完税证明分为几种
  • 待认证进项分录
  • 合并重组案例
  • 资产负债表期末余额怎么算
  • 土地使用权摊销的会计分录
  • 关于增值税发票开具的最新规定
  • 基本账户代发代扣怎么操作
  • 会展服务服务费怎么是免税
  • 赠送样品需要交税吗
  • 劳务工资要附什么合同
  • 事业单位付银行贷款利息
  • 你肯定不知道的11个狗狗冷知识
  • 进口的固定资产包括哪些
  • php实现保存网站内容
  • php如何实现伪静态
  • thinkphp 路由
  • 城建税的会计账务处理
  • 企业设立的条件有哪些
  • 产供销一体化什么意思
  • php根据日期判断星座
  • 超市内账会计一般每月做什么
  • 房地产开发企业增值税怎么算
  • oauth2 sso单点登录
  • vue3.0项目实战视频
  • python标准库在哪个目录
  • 装系统如何不安装自带软件
  • mkdir命令怎么用
  • 关于酒店采购
  • phpcms怎么样
  • 工会建账需要建几本账
  • 收到项目资本金入什么科目
  • 完工产品成本计算表怎么填
  • 金税盘入什么科目
  • 房地产购买流程
  • 劳务公司核定征收怎么交税的
  • 单位组织提供员工服务
  • 雇主责任险为什么理赔很慢
  • 公司购买的商品质量问题能用12315投诉吗
  • 非关联企业之间可以借款吗
  • 未开票收入怎么报税
  • 营改增题目
  • 返聘退休人员工资标准
  • 福利费的范畴
  • 阿里云 mybase
  • ubuntu20.04怎么用
  • 老毛桃U盘装系统综合教程
  • win8.1 升级
  • Win10 Mobile 10572预览版上手体验视频
  • win7安装无法将windows配置为在此计算机上运行
  • centos 修改网络配置文件
  • win1020h2版本千万别更新
  • win7由于所要求的文件丢失或损坏
  • 在linux系统中,用来存在系统所需
  • win 7笔记本连接投影仪
  • 微信小程序实现留言功能
  • 用javascript
  • js有while吗
  • 视觉观点
  • react-router react-router-dom
  • python程序讲解
  • jQuery插件在使用前都需要引入jQuery的js文件
  • 深入学习习总书记系列讲话精神
  • javascript入门书
  • bootstrap steps
  • jquery动态设置css
  • android按钮按下变色
  • 企业所得税税率10%
  • 抵扣怎么做账
  • 贵州地税网上申报大厅
  • 陕西国税电子税务局app
  • 河北个体户个人缴税标准
  • 重庆外经证网上报验流程及时间
  • 财税知识
  • 开原航天医院官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设