位置: IT常识 - 正文

React 高阶组件(react高阶组件)

编辑:rootadmin
高阶组件(HOC) 高阶组件(Heigher Order Component)也被称之为高阶函数,容器组件,高阶组件是类组件编程中的一种重要代码逻辑复用技巧。 高阶组件的语法 接收一个React组件作为入参,经过修饰,最后返回一个新的React组件,所以这个入参的React组件被称之为“UI组件”; ... 高阶组件(HOC)

推荐整理分享React 高阶组件(react高阶组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react 高阶组件相同逻辑复用,react 高阶组件hoc,react高阶组件,react 高阶组件应用场景,react 高阶组件hoc,react高阶组件和普通组件的区别,react高阶组件和普通组件的区别,react高阶组件,内容如对您有帮助,希望把文章链接给更多的朋友!

React 高阶组件(react高阶组件)

高阶组件(Heigher Order Component)也被称之为高阶函数,容器组件,高阶组件是类组件编程中的一种重要代码逻辑复用技巧。

高阶组件的语法

接收一个React组件作为入参,经过修饰,最后返回一个新的React组件,所以这个入参的React组件被称之为“UI组件”;这个高阶组件被称之为“容器组件”。注意:在高阶组件中无论怎么对UI组件进行修改都不能修改。所以高阶组件是一种纯函数。

什么是纯函数

入参不能被修改,并且相同入参返回的是相同结果的函数,都叫做纯函数。

解决高阶组件导致属性丢失

封装自定义高阶组件时,如果props属性丢失,可以使用属性穿透(属性继承)解决

如何使用高阶组件类组件可以使用Hoc(page)或者装饰器语法@page函数组件只能使用Hoc(page)组件和 高阶组件的区别组件和 高阶组件的区别组件是将props转换为UI高阶组件是将组件转换另一个组件高阶组件的使用场景在路由中withRounter(),在转台管理中content(),在Mobx中有inject()或者observer()使用高阶组件给页码添加公共的视图结构,比如水印等。使用高阶组件可以注入全局的公共方法,比如弹窗,校验等。使用高阶组件可以添加相同的业务功能,比如DOM功能,BON功能,订阅功能等。使用高阶组件可以实现权限设计。 import { PureComponent } from "react"; //高阶组件权限设计 function studay (WrappedComponent){ // return class extends PureComponent{ // render(){ // return( // <> // <nav>导航栏</nav> // <WrappedComponent {...this.props}></WrappedComponent> // <footer>底部导航栏</footer> // </> // ) // } // } return props =>( <> <nav>导航栏</nav> <WrappedComponent {...props}/> <footer>底部导航栏</footer> </> ) } // const page = (arr) =>{ console.log('权限',arr); //状态管理中的角色信息 const roles = ['user'] const flag = roles.some(ele=>arr.includes(ele)) return WrappedComponent =>{ return props =>( <> {flag ? <WrappedComponent {...props}></WrappedComponent>: <h1>你的权限不足</h1>} </> ) } } //封装浏览器窗口标题 const title = title =>{ return Men => class extends PureComponent{ componentDidMount(){ document.title = title || '沐沐5' } render(){ return( <Men {...this.props}></Men> ) } } } //只有在class上才能使用装饰器语法 @page(['admin',]) @studay class A extends PureComponent{ render(){ console.log(this.props); return ( <> <h1>高阶组件</h1> </> ) } } export default A
本文链接地址:https://www.jiuchutong.com/zhishi/311669.html 转载请保留说明!

上一篇:总结帝国cms安装在二级目录步骤(帝国cms下载)

下一篇:Java 中九种 Map 的遍历方式,你一般用的是哪种呢?(java中map.entry)

  • typec是什么意思

    typec是什么意思

  • icould上储存的照片在哪看(icould上储存的照片怎么下载到手机)

    icould上储存的照片在哪看(icould上储存的照片怎么下载到手机)

  • 荣耀30pro支持仿真机械键盘的吗(荣耀30pro可以贴防窥膜吗)

    荣耀30pro支持仿真机械键盘的吗(荣耀30pro可以贴防窥膜吗)

  • 华为p40pro是什么处理器呢(华为p40pro是什么调光)

    华为p40pro是什么处理器呢(华为p40pro是什么调光)

  • 苹果手机怎么修改手机密码(苹果手机怎么修图)

    苹果手机怎么修改手机密码(苹果手机怎么修图)

  • 爱奇艺什么时候有活动打折(爱奇艺什么时候可以看这么多年)

    爱奇艺什么时候有活动打折(爱奇艺什么时候可以看这么多年)

  • 华为免打扰对方提示是什么(华为开启免打扰模式后别人打得进来吗)

    华为免打扰对方提示是什么(华为开启免打扰模式后别人打得进来吗)

  • 手机屏幕上有划痕怎么修复(手机屏幕上有划痕能修复吗)

    手机屏幕上有划痕怎么修复(手机屏幕上有划痕能修复吗)

  • 抖音看不到对方作品和动态(抖音看不到对方ip属地是怎么回事)

    抖音看不到对方作品和动态(抖音看不到对方ip属地是怎么回事)

  • 声卡机架是什么意思(直播声卡机架是什么)

    声卡机架是什么意思(直播声卡机架是什么)

  • 苹果手表充电器通用吗(苹果手表充电器多少钱)

    苹果手表充电器通用吗(苹果手表充电器多少钱)

  • 京东自营派送丢件怎么处理(京东自营把货送丢了)

    京东自营派送丢件怎么处理(京东自营把货送丢了)

  • 手机希腊符号怎么打(手机数学符号希腊字母怎么打)

    手机希腊符号怎么打(手机数学符号希腊字母怎么打)

  • 快手戳一下是干什么的(快手戳一下是怎么回事)

    快手戳一下是干什么的(快手戳一下是怎么回事)

  • hdr10+什么意思(显示屏hdr10什么意思)

    hdr10+什么意思(显示屏hdr10什么意思)

  • 苹果xr有微信分身功能吗(苹果XR有微信分身功能吗)

    苹果xr有微信分身功能吗(苹果XR有微信分身功能吗)

  • 相册里的视频怎么设置壁纸(相册里的视频怎么去水印)

    相册里的视频怎么设置壁纸(相册里的视频怎么去水印)

  • 苹果为什么付款方式无效(苹果为什么付款方式被拒怎么解决)

    苹果为什么付款方式无效(苹果为什么付款方式被拒怎么解决)

  • 快手直播间管理员怎么踢人(快手直播间管理和超级管理有什么区别)

    快手直播间管理员怎么踢人(快手直播间管理和超级管理有什么区别)

  • 微软雅黑字体安装方法(微软雅黑字体一般用在哪里)

    微软雅黑字体安装方法(微软雅黑字体一般用在哪里)

  • shell语法检查模式详解(shell检查变量是否为空)

    shell语法检查模式详解(shell检查变量是否为空)

  • Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.(vue错误提示)

    Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.(vue错误提示)

  • 年终双薪究竟该怎么算
  • 个体工商户怎么年报
  • 初税亩是什么意思
  • 计提增值税如何处理
  • 预计净残值的计算公式为
  • 建筑企业预交的附加税怎么办
  • 医院都需要交什么税
  • 砖厂开票员的工作流程
  • 计税依据的定义
  • 支付的保证金
  • 购买的员工福利需要缴纳印花税
  • 年度所得税汇算清缴报告在哪打印
  • 公司没有收入算正常经营吗
  • 公司银行利息要交税吗
  • 小规模企业的企业所得税怎么交
  • 什么叫含税级距和不含税级距
  • 适用差额征税的小规模纳税人有哪些
  • 2019年印花税税率表
  • 房地产预售阶段增值税进项
  • 外汇收入会计分录
  • 50万股份分红
  • 小轿车折旧年限规定
  • 以股权增资的税费怎么算
  • 不动产广告位出租税率是多少
  • 受让股东对出让股东抽逃出资
  • 购买货车预付保险怎么算
  • 超市打折优惠
  • 合伙企业必须有什么并以其作为企业法律基础
  • win11 恢复
  • steam怎么退款申请退款要多久
  • linux怎么查看防火墙信息
  • 辅导期纳税人增值税专用发票数量不得超过
  • 其他应收款贷方表示什么
  • 路由器wds桥接成功为什么不能上网
  • vue3性能对比
  • 变电所的相关费用是什么
  • ai作画app
  • php操作excel
  • 浅谈php中的错误处理方法
  • openvino使用
  • vuex详解和用法
  • 怎样取消红字
  • 使用vue开发app
  • php socket编程
  • dedecms官网
  • 纳税人异地预缴所得税
  • 生产企业出口退税账务处理会计分录
  • 备抵法账务处理方式
  • Python函数怎么返回
  • 被投资公司注销,投资收益需要交企业所得税你吗
  • 进项票可以抵扣企业所得税吗
  • 未开发票已收款如何做账?
  • 服装厂委托物资怎么写
  • 客户重复付款了怎么礼貌回复
  • 什么叫小微企业主?
  • 企业的研发活动阶段包括
  • 公司被私募基金收购有啥影响 裁员
  • mysql表字段设置默认值
  • win7系统浏览器怎么设置
  • Kaspersky Rescue Disk 2009.04.16 卡巴斯基救援盘
  • linux/unix
  • virtualbox虚拟机旋转屏幕
  • macos finder的应用程序列表在哪里
  • centos 网卡顺序
  • Linux中stat命令显示文件的基本使用教程
  • windows 高分屏
  • windows8快捷键
  • cocos2dx4.0教程
  • jquery()
  • input和button按钮合到一起
  • css中背景图片设置
  • javascript运算
  • 很好的资源学习入口_android
  • jquery左右选择框
  • python中的面向对象
  • Vuforia How To Use Android Plugins in Unity Apps
  • 关于Colloder事件
  • js 三元
  • 消费税增值税的区别与联系
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设