react-高阶组件

一、什么是高阶组件

高阶组件( Higher-Order Component,HOC )是一个以组件作为参数,返回一个新组件函数

  • 高阶组件最大的特点就是复用组件逻辑
  • 高阶组件本身并不是 React 的 API,而是React组件的一种设计模式,一种组件重用的高级技巧
  • 高阶组件是一个函数,接收要包装的组件,返回增强后的组件

二、如何实现一个高阶组件

高阶组件内部创建一个组件,在这个组件中提供复用的状态逻辑代码,通过props将复用状态传递给被包装组件 WrappedComponent

  • 创建一个函数,命名以 with 开头
  • 指定函数参数,参数为组件,所以参数应该以大写字母开头
  • 在函数内部创建一个组件,提供复用的状态逻辑代码,并返回
  • 在该组件中,渲染参数组件,同时将状态通过props传递给参数组件
  • 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
function withMouse(WrappedComponent) {class Mouse extends React.Component {state = {x: 0,y: 0,}render() {return (<WrappedComponent {...this.state}></WrappedComponent>)}}return Mouse
}
const Position = props => (<div>鼠标位置: {props.x}, {props.y}</div>
)const MousePosition = withMouse(Position)<MousePosition />

三、高阶组件demo

  • 代码
import React from 'react'/*** 高阶组件*/// 获取组件名
// function getDisplayName(WrappedComponent) {
// 	return WrappedComponent.displayName || WrappedComponent.name || 'Component'
// }// 创建高阶组件
function withMouse(WrappedComponent) {// 该组件提供复用的状态逻辑class Mouse extends React.Component {// 初始化statestate = {x: 0,y: 0,}// 渲染UI,可以将state和props 一起传递给组件render() {return (<WrappedComponent {...this.state} {...this.props}></WrappedComponent>)}// 组件挂载,监听鼠标移动componentDidMount() {window.addEventListener('mousemove', this.handleMouseMove)}// 组件卸载,移除监听componentWillUnmount() {window.removeEventListener('mousemove', this.handleMouseMove)}// 鼠标移动事件处理程序handleMouseMove = e => {this.setState({x: e.clientX,y: e.clientY,})}}// 设置displayName  这个为了调试区分用,可以不设置// Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`// 返回增强后的组件return Mouse
}// 位置组件,用来测试高阶组件
const Position = props => (<div><h2>鼠标位置: {props.x}, {props.y}</h2>MousePosition组件: 接收的参数 a == {props.a}</div>
)// 猫抓老鼠组件,用来测试高阶组件
const Cat = props => (<div><imgsrc={require('../../assets/images/cat.png')}alt="猫"height="22px"style={{position: 'absolute',top: props.y - 10,left: props.x - 10,}}/>MouseCat组件: 接收的参数 a == {props.a}</div>
)// 获取增强后的组件
const MousePosition = withMouse(Position)
const MouseCat = withMouse(Cat)// 使用
class MouseHigher extends React.Component {// 渲染增强后的组件render() {return (<div><MousePosition a="111"></MousePosition><MouseCat a="222"></MouseCat></div>)}
}export default MouseHigher
  • 效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/172381.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js中HTMLCollection如何循环

//不带索引 let divCon document.getElementsByClassName("el-form-item__error"); if (divCon.length > 0) {for (var item of divCon) {console.log("打印&#xff1a;", item.innerText);} }//带有索引 let divCon document.getElementsByClassNam…

【JAVA学习笔记】46 - (43)第十一章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter11/src/com/yinhai/homework11 1.枚举类 1.创建一个Color枚举类 2.有RED,BLUE,BL ACK,YELLOW,GREEN这个五个枚举值/对象: 3. Color有三 个属性redValue, greenValue, blueValue, 4.创建构…

2023高频前端面试题-http

1. HTTP有哪些⽅法&#xff1f; HTTP 1.0 标准中&#xff0c;定义了3种请求⽅法&#xff1a;GET、POST、HEAD HTTP 1.1 标准中&#xff0c;新增了请求⽅法&#xff1a;PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT 2. 各个HTTP方法的具体作用是什么&#xff1f; 方法功能G…

fatfs对于exFAT的使用

f_mkfs的介绍 f_mkfs是FatFs库中的一个函数&#xff0c;用于在指定的磁盘上执行格式化操作。它可以用于创建新的文件系统或重新格式化已有的文件系统。 函数原型如下&#xff1a; FRESULT f_mkfs (const TCHAR* path, // 磁盘路径BYTE opt, // 格式化选项DWORD a…

Anaconda下载和安装

1.概述 1&#xff09;包含conda&#xff1a;conda是一个环境管理器&#xff0c;其功能依靠conda包来实现&#xff0c;该环境管理器与pip类似。 2&#xff09;安装大量工具包&#xff1a;Anaconda会自动安装一个基本的python&#xff0c;该python的版本Anaconda的版本有关。该…

ETL工具Kettle

1 Kettle的基本概念 一个数据抽取过程&#xff0c;主要包括创建一个作业&#xff08;Job&#xff09;&#xff0c;每个作业由一个或多个作业项&#xff08;Job Entry&#xff09;和连接作业项的作业跳&#xff08;Job Hop&#xff09;组成。每个作业项可以是一个转换&#xff…

C语言 每日一题 PTA 10.27 day5

1.高速公路超速处罚 按照规定&#xff0c;在高速公路上行使的机动车&#xff0c;达到或超出本车道限速的10 % 则处200元罚款&#xff1b; 若达到或超出50 % &#xff0c;就要吊销驾驶证。请编写程序根据车速和限速自动判别对该机动车的处理。 输入格式 : 输入在一行中给出2个正…

Linux系统下配置王爽汇编语言环境

【步骤一】 先打开命令行&#xff0c;进入root模式&#xff0c;输入如下语句&#xff1a; sudo apt-get install dosbox 该语句的作用主要是安装dosbox 【步骤二】 安装完成之后&#xff0c;命令行输入dosbox 会进入dosbox页面&#xff1a; 【步骤三】 在你的主机中&…

CLIP文章精读

核心&#xff1a; loss的设计&#xff1a;分布针对固定image匹配text和固定text匹配image设计了两个交叉熵loss

2-Java进阶知识总结-6-多线程

文章目录 多线程--基本概念并发和并行进程和线程多线程 多线程--实现方式一&#xff0c;继承Thread类方法介绍实现步骤注意事项 方式二&#xff0c;实现Runnable接口Thread构造方法实现步骤 方式三&#xff0c;实现Callable接口方法介绍实现步骤 三种多线程实现方法对比 多线程…

MongoDB的安装

MongoDB的安装 1、Windows下MongoDB的安装及配置 1.1 下载Mongodb安装包 下载地址&#xff1a; https://www.mongodb.com/try/download http://www.mongodb.org/dl/win32 MongoDB Windows系统64位下载地址&#xff1a;http://www.mongodb.org/dl/win32/x86_64 MongoDB W…

【安装tensorflow-CPU版本】

一、安装目的二、安装过程三、总结 一、安装目的 使自己的jupyter能用tensorflow 二、安装过程 首先打开anaconda prompt 接着输入conda list 查看自己是否安装了tensorflow 在 Python 中使用 pip 工具来升级 pip 自身并指定了使用清华大学的镜像源进行安装 python -m pip …

电脑报错由于找不到vcruntime140.dll文件怎么修复

VCruntime140.dll是一个重要的动态链接库文件&#xff0c;它对于许多应用程序的运行起着关键作用。如果计算机中丢失了这个文件&#xff0c;可能会导致一些程序无法正常启动或运行&#xff0c;从而影响到用户的正常使用。在本文中&#xff0c;我们将详细介绍vcruntime140.dll文…

Vue进阶(幺陆玖)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨

文章目录 一、前言二、组件懒加载2.1 什么是懒加载2.2 如何实现懒加载 三、延伸阅读 软件程序唤醒3.1 protocolCheck 实现3.2 自定义实现 四、拓展阅读 一、前言 Vue项目改造升级后&#xff0c;原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误…

TensorFlow图像多标签分类实例

接下来&#xff0c;我们将从零开始讲解一个基于TensorFlow的图像多标签分类实例&#xff0c;这里以图片验证码为例进行讲解。 在我们访问某个网站的时候&#xff0c;经常会遇到图片验证码。图片验证码的主要目的是区分爬虫程序和人类&#xff0c;并将爬虫程序阻挡在外。 下面…

【微信小程序】实现投票功能(附源码)

一、Vant Weapp介绍 Vant Weapp 是一个基于微信小程序的组件库&#xff0c;它提供了丰富的 UI 组件和交互功能&#xff0c;能够帮助开发者快速构建出现代化的小程序应用。Vant Weapp 的设计理念注重简洁、易用和高效&#xff0c;同时提供灵活的定制化选项&#xff0c;以满足开发…

如何使用gpt提高效率

如何使用gpt提高效率 自动化替代人力工作减少创意工作需求技术依赖风险实际应用领域内容生成自动回答问题自动化编程个性化推荐 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 &#x1f369;惟余辈才疏学浅&…

[量化投资-学习笔记002]Python+TDengine从零开始搭建量化分析平台-MA均线的多种实现方式

MA 均线时最基本的技术指标&#xff0c;也是最简单&#xff0c;最不常用的&#xff08;通常使用EMA、SMA&#xff09;。 以下用两种不同的计算方法和两种不同的画图方法进行展示和说明。 MA 均线指标公式 MA (N)(C1 C2 C3 …C N )/N目录 方式一1.SQL 直接查询均值2.使用 pyp…

Unity游戏开发中打造游戏攻击技能架构与设计

一、技能系统的设计 在 MOBA 游戏中&#xff0c;每个英雄角色都会有多个技能&#xff0c;这些技能可以分为普通攻击和技能攻击两种。普通攻击是英雄角色的基本攻击方式&#xff0c;而技能攻击则需要消耗一定的资源&#xff08;如蓝量&#xff09;才能使用。在设计技能系统时&a…

TensorFlow学习:使用官方模型和自己的训练数据进行图片分类

前言 教程来源&#xff1a;清华大佬重讲机器视觉&#xff01;TensorFlowOpencv&#xff1a;深度学习机器视觉图像处理实战教程&#xff0c;物体检测/缺陷检测/图像识别 注&#xff1a; 这个教程与官网教程有些区别&#xff0c;教程里的api比较旧&#xff0c;核心思想是没有变…