当前位置: 首页 > news >正文

【React系列】高阶组件

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 高阶组件

1.1. 认识高阶组件

什么是高阶组件呢?相信很多同学都听说过,也用过 高阶函数,它们非常相似,所以我们可以先来回顾一下什么是 高阶函数。

高阶函数的维基百科定义:至少满足以下条件之一:

  • 接受一个或多个函数作为输入;
  • 输出一个函数;

JavaScript中比较常见的filter、map、reduce都是高阶函数。

那么什么是高阶组件呢?

  • 高阶组件的英文是 Higher-Order Components,简称为 HOC
  • 官方的定义:高阶组件是参数为组件,返回值为新组件的函数

我们可以进行如下的解析:

  • 首先, 高阶组件 本身不是一个组件,而是一个函数
  • 其次,这个函数的参数是一个组件返回值也是一个组件

高阶组件的调用过程类似于这样:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高阶函数的编写过程类似于这样:

function higherOrderComponent(WrapperComponent) {return class NewComponent extends PureComponent {render() {return <WrapperComponent/>}}
}

组件的名称问题:

  • 在ES6中,类表达式中类名是可以省略的,所以可以可以写成下面的写法:
function higherOrderComponent(WrapperComponent) {return class extends PureComponent {render() {return <WrapperComponent/>}}
}
  • 另外,组件的名称都可以通过displayName来修改:
    在这里插入图片描述
    完整的代码,我们可以这样来编写:
import React, { PureComponent } from 'react';function higherOrderComponent(WrapperComponent) {return class NewComponent extends PureComponent {render() {return <WrapperComponent/>}}
}class App extends PureComponent {render() {return (<div>App</div>)}
}export default higherOrderComponent(App);

高阶组件并不是React API的一部分,它是基于React的组合特性而形成的设计模式

高阶组件在一些React第三方库中非常常见:

  • 比如redux中的connect;
  • 比如react-router中的withRouter

在我们的开发中,高阶组件可以帮助我们做哪些事情呢?

1.2. 高阶组件的使用

1.2.1. props的增强

不修改原有代码的情况下,添加新的props

假如我们有如下案例:

class Header extends PureComponent {render() {const { name, age } = this.props;return <h2>Header {name + age}</h2>}
}export default class App extends PureComponent {render() {return (<div><Header name="aaa" age={18} /></div>)}
}

我们可以通过一个高阶组件,让使用者在不破坏原有结构的情况下对某个组件增强props

function enhanceProps(WrapperCpn, otherProps) {return props => <WrapperCpn {...props} {...otherProps} />
}const EnhanceHeader = enhanceProps(Header, {height: 1.88})
  • 有点拦截器和java动态代理的意思

利用高阶组件来共享 Context 属性

import React, { PureComponent, createContext } from 'react';const UserContext = createContext({nickname: "默认",level: -1
})function Header(props) {return (<UserContext.Consumer>{value => {const { nickname, level } = value;return <h2>Header {"昵称:" + nickname + "等级" + level}</h2>}}</UserContext.Consumer>)
}function Footer(props) {return (<UserContext.Consumer>{value => {const { nickname, level } = value;return <h2>Footer {"昵称:" + nickname + "等级" + level}</h2>}}</UserContext.Consumer>)
}const EnhanceHeader = enhanceProps(Header, { height: 1.88 })export default class App extends PureComponent {render() {return (<div><UserContext.Provider value={{ nickname: "why", level: 90 }}><Header /><Footer /></UserContext.Provider></div>)}
}

利用高阶组件withUser

import React, { PureComponent, createContext } from 'react';const UserContext = createContext({nickname: "默认",level: -1
})function withUser(WrapperCpn) {return props => {return (<UserContext.Consumer>{value => {return <WrapperCpn {...props} {...value}/>}}</UserContext.Consumer>)}
}function Header(props) {const { nickname, level } = props;return <h2>Header {"昵称:" + nickname + "等级:" + level}</h2>
}function Footer(props) {const { nickname, level } = props;return <h2>Footer {"昵称:" + nickname + "等级:" + level}</h2>
}const UserHeader = withUser(Header);
const UserFooter = withUser(Footer);export default class App extends PureComponent {render() {return (<div><UserContext.Provider value={{ nickname: "why", level: 90 }}><UserHeader /><UserFooter /></UserContext.Provider></div>)}
}

1.2.2. 利用高阶组件进行鉴权判断

在开发中,我们可能遇到这样的场景:

  • 某些页面是必须用户登录成功才能进行进入;
  • 如果用户没有登录成功,那么直接跳转到登录页面;

这个时候,我们就可以使用高阶组件来完成鉴权操作:

function LoginPage() {return <h2>LoginPage</h2>
}function CartPage() {return <h2>CartPage</h2>
}export default class App extends PureComponent {render() {return (<div><CartPage/></div>)}
}

编写鉴权的高阶组件:

function loginAuth(Page) {return props => {if (props.isLogin) {return <Page/>} else {return <LoginPage/>}}
}

完整的代码如下:

import React, { PureComponent } from 'react';function loginAuth(Page) {return props => {if (props.isLogin) {return <Page/>} else {return <LoginPage/>}}
}function LoginPage() {return <h2>LoginPage</h2>
}function CartPage() {return <h2>CartPage</h2>
}const AuthCartPage = loginAuth(CartPage);export default class App extends PureComponent {render() {return (<div><AuthCartPage isLogin={true}/></div>)}
}

1.2.3. 生命周期劫持

import React, { PureComponent } from 'react';class Home extends PureComponent {UNSAFE_componentWillMount() {this.begin = Date.now();}componentDidMount() {this.end = Date.now();const interval = this.end - this.begin;console.log(`Home渲染使用时间:${interval}`)}render() {return (<div><h2>Home</h2><p>我是home的元素,哈哈哈</p></div>)}
}class Detail extends PureComponent {UNSAFE_componentWillMount() {this.begin = Date.now();}componentDidMount() {this.end = Date.now();const interval = this.end - this.begin;console.log(`Detail渲染使用时间:${interval}`)}render() {return (<div><h2>Detail</h2><p>我是detail的元素,哈哈哈</p></div>)}
}export default class App extends PureComponent {render() {return (<div><Home/><Detail/></div>)}
}

我们可以定义如下高阶组件:

function logRenderTime(WrapperCpn) {return class extends PureComponent {UNSAFE_componentWillMount() {this.begin = Date.now();}componentDidMount() {this.end = Date.now();const interval = this.end - this.begin;console.log(`Home渲染使用时间:${interval}`)}render() {return <WrapperCpn {...this.props}/>}}
}const LogHome = logRenderTime(Home);
const LogDetail = logRenderTime(Detail);

完整代码如下:

import React, { PureComponent } from 'react';function logRenderTime(WrapperCpn) {return class extends PureComponent {UNSAFE_componentWillMount() {this.begin = Date.now();}componentDidMount() {this.end = Date.now();const interval = this.end - this.begin;console.log(`${WrapperCpn.name}渲染使用时间:${interval}`)}render() {return <WrapperCpn {...this.props}/>}}
}class Home extends PureComponent {render() {return (<div><h2>Home</h2><p>我是home的元素,哈哈哈</p></div>)}
}class Detail extends PureComponent {render() {return (<div><h2>Detail</h2><p>我是detail的元素,哈哈哈</p></div>)}
}const LogHome = logRenderTime(Home);
const LogDetail = logRenderTime(Detail);export default class App extends PureComponent {render() {return (<div><LogHome /><LogDetail /></div>)}
}

这个写法其实就是提取公共代码进行复用而已。

1.3. 高阶函数的意义

我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。

其实早期的React有提供组件之间的一种复用方式是mixin,目前已经不再建议使用:

  • Mixin 可能会相互依赖,相互耦合,不利于代码维护
  • 不同的Mixin中的方法可能会相互冲突
  • Mixin非常多时,组件是可以感知到的,甚至还要为其做相关处理,这样会给代码造成滚雪球式的复杂性

当然,HOC也有自己的一些缺陷:

  • HOC需要在原组件上进行包裹或者嵌套,如果大量使用HOC,将会产生非常多的嵌套,这让调试变得非常困难;
  • HOC可以劫持props,在不遵守约定的情况下也可能造成冲突;

Hooks的出现,是开创性的,它解决了很多React之前的存在的问题,比如this指向问题、比如HOC的嵌套复杂度问题等等。

相关文章:

【React系列】高阶组件

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 高阶组件 1.1. 认识高阶组件 什么是高阶组件呢&#xff1f;相信很多同学都听说过&#xff0c;也用过 高阶函数&…...

听GPT 讲Rust源代码--src/tools(38)

File: rust/src/tools/clippy/clippy_dev/src/lib.rs rust/src/tools/clippy/clippy_dev/src/lib.rs文件是Clippy开发工具的入口文件&#xff0c;其作用是提供Clippy开发过程中所需的功能和工具。Clippy是一个Rust代码的静态分析工具&#xff0c;用于提供各种有用的代码规范、编…...

.NET C# 如何获取object对象的数据

如何获取object对象的数据 在DAL层&#xff0c;一般会封装一些返回值&#xff0c;返回的类型就会为object &#xff0c;但是需要其中的值进行判断 public static object SaveFileIns(string filepath){return new { path pathlist, file_name fileNamelist, Message "…...

使用IDEA创建使用 JDK8 的 2.x.x 版本的 Spring Boot 项目以及 Spring Boot 项目如何修改JDK版本

目录 一、在阿里云上官网上创建项目 二、将 IDEA 中创建项目的源地址修改为阿里云官网 三、创建 3.x.x 的项目之后修改配置降低至 2.7.x 版本和使用 JDK8&#xff08;修改 Spring Boot 的 JDK 版本同理&#xff09; 从上面的 Spring Boot 官网的截图中可以发现&#xff0c;自…...

游戏服务器整体架构思考

1.启动层 不管是单体架构还是微服务架构&#xff0c;其实服务器本身都是要启动的。 不管是用grpc实现远程调用&#xff0c;还是dubbo&#xff0c;还是说就一个简单的tcp监听&#xff0c;都是要启动的。 启动的时候&#xff0c;肯定要整合下controller接入层&#xff0c;不管是叫…...

labelme 标注的数据集转化为Mask-Rcnn适用的数据集

labelme 标注的数据集转化为Mask-Rcnn适用的数据集 食用步骤 1.labelme标注数据时&#xff0c;将生成的json文件和原图保存在一起 2.只需提供labelme生成的数据的文件夹&#xff0c;和maskrcnn的数据集文件夹&#xff0c;运行代码就会自动进行处理 3.代码会在提供的maskrcn…...

x-cmd pkg | tig - git 文本模式界面

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 tig 由 Jonas Fonseca 于 2006 年使用 C 语言创建的 git 交互式文本命令行工具。旨在开启交互模式快速浏览 git 存储库的信息以及 git 命令的运行。 首次用户 使用 x tig 即可自动下载并使用 在终端运行 eval "…...

信息论与编码期末复习——概念论述简答题(一)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…...

[Kubernetes]4. 借助腾讯云TKE快速创建Pod、Deployment、Service部署k8s项目

前面讲解了通过命令行方式来部署k8s项目,下面来讲讲通过腾讯云TKE来快速创建Pod、Deployment、Service部署k8s项目,云平台搭建Kubernetes可参考[Kubernetes]1.Kubernetes(K8S)介绍,基于腾讯云的K8S环境搭建集群以及裸机搭建K8S集群 一.通过腾讯云TKE创建集群 1.创建集群 参考上…...

二叉排序树的创建、插入、查找和删除【数据结构】

二叉排序树 若它的左子树不空&#xff0c;则左子树上所有结点的值均小于它根结点的值。若它的右子树不空&#xff0c;则右子树上所有结点的值均大于它根结点的值。它的左、右树又分为⼆叉排序树 二叉排序树也叫二叉查找树、二叉搜索树 二叉排序树的创建、插入、查找和删除 …...

【管理篇 / 恢复】❀ 07. macOS下用命令刷新固件 ❀ FortiGate 防火墙

【简介】随着苹果电脑的普及&#xff0c;很多管理员都会通过苹果电脑对飞塔防火墙进行管理。当防火墙需要命令状态下刷新固件时&#xff0c;在macOS下用命令刷新固件&#xff0c;将会是一个小小的挑战。 首先是硬件的连接&#xff0c;USB配置线的USB一头&#xff0c;接入MAC的U…...

工作纪实40-使用redis的几种姿势

线上查问题看某个redis的key值&#xff0c;记录一下 1.直接使用telnet进行连接&#xff08;贼拉方便&#xff09; telnet ip port > auth pwd1.模糊查询 scan 0 MATCH abc* 2.查看所有key keys * 3.ttl key 查看key的ttl2.使用redis-cli连接(费劲吧啦&#xff0c;还需要本地…...

修改 docker /dev/shm 的大小

修改 docker /dev/shm 的大小 1&#xff0c;获取完整id&#xff1a; docker inspect 245| grep Id rootlynxi:~# docker inspect 245| grep Id"Id": "245ab167ed9a79873b31b3a38df2053870fe72f267c3c1a660df25c63e37e88b",2&#xff0c;修改 ShmSize&…...

【观察】Aginode安捷诺:坚守“长期主义”,服务中国数字经济

毫无疑问&#xff0c;随着整个社会加速数字化转型&#xff0c;尤其是5G、人工智能、大数据等技术兴起&#xff0c;以及智慧医疗、智慧金融、智能制造等应用加速落地&#xff0c;算力网络在经济社会发展中扮演了愈来愈重要的角色&#xff0c;成为支撑数字经济蓬勃发展的“新引擎…...

HttpClient库与代理IP在爬虫程序中的应用

目录 前言 一、HttpClient库的基本使用方法 二、代理IP的使用方法 三、代理IP池的使用方法 四、总结 前言 在编写爬虫程序时&#xff0c;我们经常会使用HttpClient库来发送HTTP请求&#xff0c;获取网页内容。然而&#xff0c;有些网站可能会对频繁的请求进行限制&#x…...

C#最佳工具集合:IDE、分析、自动化工具等

C#是企业中广泛使用的编程语言&#xff0c;特别是那些依赖微软的程序语言。如果您使用C#构建应用程序&#xff0c;则最有可能使用Visual Studio&#xff0c;并且已经寻找了一些扩展来对您的开发进行管理。但是&#xff0c;这个工具列表可能会改变您编写C#代码的方式。 C#编程的…...

promethues grafana 安装和使用

文章目录 1、promethues安装2、node-exporter安装3、grafana安装4、配置promethues监控node节点5、grafana操作外传 Docker 镜像下载地址&#xff1a; https://hub.docker.com 比较好的hub.docker.com///-- https://hub.docker.com/u/bitnami grafana监控面板&#xff1a;https…...

华为DriveONE电机控制器拆解实拍

如果说之前的问界M5、M7&#xff0c;华为让我们看到其在智能化上确实拥有遥遥领先的能力&#xff0c;那么在智界S7上&#xff0c;则让我们看到华为在动力、底盘这些硬件执行层面&#xff0c;竟然也有不输给很多车企的实力。1、华为电驱&#xff0c;全球第一&#xff1f;在智界S…...

【git使用】历史commit的分割(git rebase和 git reset的联合使用)

参考 [译] 分割一个已存在的 git commit - 掘金Git - 重写历史idea git如何撤回提交 - PingCodegit 工作原理与撤销操作图解 | Shall We Code? 分割一个已存在的 git commit Git 与其他版本控制系统的主要区别之一&#xff0c;在于其允许用户重写历史。实现这一目的的主要途…...

栈和队列oj题——225. 用队列实现栈

** 个人主页&#xff1a;晓风飞 专栏&#xff1a; 数据结构| Linux|| C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 题目要求&#xff1a;实现 MyStack 类&#xff1a;注意&#xff1a;示例&#xff1a;解释&#xff1a;提示&#xff1a; 解题核心数据结构的定义初…...

集合的三种遍历方式

迭代器&#xff08;Iterator&#xff09; 概述&#xff1a;Iterator 是个接口&#xff0c;迭代器是集合的专用遍历方式 使用方法&#xff0c;我们想要使用迭代器&#xff0c;必须首先得到集合对象&#xff0c;通过集合对象生成迭代器对象&#xff0c;才能进行集合的遍历 常用…...

Mysql 中的常用命令

在数字化世界中&#xff0c;数据库已经成为数据存储和处理的核心。而MySQL&#xff0c;作为最受欢迎的关系型数据库管理系统之一&#xff0c;其强大的功能和易用性使它成为开发者和企业的首选。掌握MySQL中的常用命令&#xff0c;是每一位数据库管理员和开发者的基本要求。本篇…...

【Java】CompletableFuture使用方法

背景 CompletableFuture是Java 8中引入的一个类&#xff0c;它实现了Future和CompletionStage接口&#xff0c;用于表示异步计算的结果。使用CompletableFuture可以方便地编写异步编程的代码&#xff0c;并且可以链式地组合多个异步操作。 接口 CompletableFuture实现了Future…...

摆烂式学习ssh

摆烂式学习ssh ssh工作原理ssh基本使用sshd配置文件密钥登录1.客户端2.服务器3.注意事项4.使用密钥登录测试 ssh高级使用技巧1.在非正规端口启动2.rsync 命令3.透过 ssh 通道加密原本无加密的服务4.以ssh信道配合x server 传递图形接口5.ssh配合virtualbox虚拟机使用技巧 ssh工…...

用 Python 抓取 bilibili 弹幕并分析!

01 实现思路 首先&#xff0c;利用哔哩哔哩的弹幕接口&#xff0c;把数据保存到本地。接着&#xff0c;对数据进行分词。最后&#xff0c;做了评论的可视化。 02 弹幕数据 平常我们在看视频时&#xff0c;弹幕是出现在视频上的。实际上在网页中&#xff0c;弹幕是被隐藏在源代码…...

目标检测YOLO实战应用案例100讲-基于红外图像处理的无人机光伏组件故障检测(续)

目录 3.2 自适应温度阈值故障检测算法设计 3.3 基于拟合灰度曲线的故障检测方案设计...

go mod 命令详解

文章目录 1.关于模块2.关于 go mod3.格式4.示例参考文献 1.关于模块 模块&#xff08;Modules&#xff09;是 Go 1.11 版本引入的一依赖管理机制。 一个模块是 Go packages 的集合&#xff0c;定义在项目根目录下的 go.mod 文件。go.mod 文件定义了模块的路径&#xff0c;这也…...

花了一小时,拿python手搓了一个考研背单词软件

听说没有好用的电脑端背单词软件&#xff1f;只好麻烦一下&#xff0c;花了一小时&#xff0c;拿python手搓了一个考研背单词软件。 代码已经开源在我的github上&#xff0c;欢迎大家STAR&#xff01; 其中&#xff0c;数据是存放在sqlite中&#xff0c;形近词跳转是根据jaro …...

一篇文章学会Vim

一篇文章学会Vim 声明&#xff1a;以下内容均为我个人的理解&#xff0c;如果发现错误或者疑问可以联系我共同探讨 简介 Vim是一个高度可定制的终端文本编辑器&#xff0c;它可以很方便的创建和修改任何类型的文本。作为vi的升级版&#xff0c;有许多新的特性(以下列出的特性…...

面试算法91:粉刷房子

题目 一排n幢房子要粉刷成红色、绿色和蓝色&#xff0c;不同房子被粉刷成不同颜色的成本不同。用一个n3的数组表示n幢房子分别用3种颜色粉刷的成本。要求任意相邻的两幢房子的颜色都不一样&#xff0c;请计算粉刷这n幢房子的最少成本。例如&#xff0c;粉刷3幢房子的成本分别为…...

企业vi设计需求/关键词排名优化报价

RNIF BAM Tracking Error&#xfffc; 解决办法&#xff1a;&#xfffc; 503: Service Unavailable&#xfffc; &#xfffc; 解决办法&#xff1a;IIS 应用程序池运行账户用户名或密码错误&#xff0c;用户名不能是domain\username格式&#xff0c;直接使用username public …...

别人买了域名做违法网站/百度地图导航

一、在keycloak中定义基础数据 1、realm 如果多个模块使用不同的用户权限&#xff0c;就分realm 如果多个模块共用一套用户权限&#xff0c;就顶一个一个realm 2、每个模块是一个client-app 3、用户组、用户、角色、权限定义 用户组支持扩展属性&#xff0c;加入组的用户自动继…...

php网站开发 课程介绍/衡水seo排名

LTH7R座充充电管理 IC 一、 概述 LTH7R.是恒流/恒压座充充电器芯片&#xff0c;主要应用于单节锂电池充电。无需外接检测电阻&#xff0c;其内部为 MOSFET 结构&#xff0c;因此无需外接反向二极管。 LTH7R.在大功率和高环境温度下可以自动调节充电电流以限制芯片温度。它的充电…...

企业网站建设建议/百度正式员工工资待遇

第一章 完善用户相关信息 用户注册与登录 数据库表设计&#xff1a;用户表、用户信息表相关接口&#xff08;API&#xff09;&#xff1a;获取RSA公钥、用户注册、用户登录 数据库表设计及相关实体类设计 用户表 用户信息表 根据这两张数据库表创建对应的实体类 基于JWT的用…...

做封面的网站/太原百度推广开户

Flask 初步学习 Flask程序的基本构造 from flask import Flask,render_templateapp Flask(__name__)app.route(/) def index():return render_template(demo.html)if __name__ __main__:app.run()路由器请求方法限定 在route的参数中设置method的值&#xff0c;默认是GET方…...

海南城乡与建设厅网站/seo入门黑帽培训教程

干货&#xff1a;必须要有反馈&#xff0c;不断调整&#xff0c;多读书&#xff0c;多些笔记。 解释&#xff1a;不练习你以为你能掌握&#xff1f;笑话&#xff0c;只有自己根据一个个小目标不断的敲&#xff0c;运行&#xff0c;给予你反馈&#xff0c;这样才会真的进步。 纸…...