位置: 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)

  • 公司更换营业执照需要多久
  • 在计算应纳税所得额时下列
  • 电子发票入账是什么意思
  • 印花税怎么计提和缴纳
  • 报销销售部门差旅费
  • 小规模差额申报怎么申报
  • 民办幼儿园的税收是多少
  • 劳务成本科目
  • 应付职工薪酬纳税调整比例
  • 工资结算汇总表会计科目
  • 转出未交增值税和转出多交增值税
  • 资产划转涉税解读
  • 货物的运输费用怎么算
  • 预付账款改为什么科目
  • 公司分期付款买车可以抵税吗
  • 个人所得税免征项目有哪些
  • 食堂固定资产折旧年限
  • 公司支付广告服务费账务处理
  • 不抵扣的发票怎么导入做账系统
  • 应收账款坏账处理审计
  • 固定资产被替换部件的会计处理
  • 公司为员工交的五险一金到底是怎么回事
  • 年报中包括处置资金吗
  • 2019年以后转登记为小规模纳税人有无时间要求?
  • 现金支票丢了
  • 应付福利费科目
  • windows10专业
  • Win11怎么不显示图标
  • 增值税专票销售额
  • 上年度的费用今年怎么算
  • win7浏览器显示证书错误怎么解决
  • urlerror什么意思
  • 谷歌浏览器插件中心
  • 一般纳税人什么情况下可以开3%的税率
  • 其他应收款期末贷方余额表示什么
  • pytorch f
  • php代码检测
  • ci框架视频教程
  • iscan扫描仪使用方法
  • 招待费的进项税必须认证后转出吗
  • 预收账款发货
  • 飞书slogan
  • 以前年度损益调整是什么意思
  • mac安装mysql8.0
  • sqlloader语法
  • 税额不够什么意思
  • 装修增值税税率是多少2022
  • 控股公司的收入怎么计算
  • Windows PostgreSQL 安装图文教程
  • 使用mysql的disctinct group by查询不重复记录
  • 哪些科目会影响损益
  • 酒店收入是什么收入
  • 营业外收入主要包括( )
  • 委托代销商品支付的手续费计入销售费用吗
  • 新准则公允价值变动科目余额为负数
  • 取得无形资产发生的相关费用
  • 加油的增值税发票几个点
  • 一般纳税人废品行业有哪些
  • 会计科目设置的相关注意事项
  • mysql8.0环境配置
  • 如何查看mysql连接池
  • Win10 Mobile RS2预览版14951升级遭遇卡在0%的解决办法
  • centos6.5怎么安装
  • windows 10预览版
  • outpost.exe - outpost是什么进程 有什么用
  • Win10 Mobile 10586.36在Lumia640 XL中的体验 很流畅
  • node.js+mysql
  • 为什么使用json传输数据
  • jquery form序列化
  • python字符串中的反斜杠
  • js基础教程
  • javascript如何
  • 税控盘登陆失败
  • 哪些润滑油属于危险品类
  • 比亚迪车载物联网卡
  • 税务投诉回访电话号码
  • 海口市地方税务局是什么级别
  • 河南出名歌手
  • 天津市东丽区军粮城派出所电话
  • 幼儿掌握概念的名称容易真正掌握概念的内涵也很容易
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设