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

react中的装饰器

一、初见react装饰器

初初接触react,发现一些神秘符号和语法,觉得很神奇。类似这样:

import React, { PureComponent, Fragment } from 'react';
import {Form} from 'antd';@Form.create()
class UpdateForm extends PureComponent {。。。
}

哇塞!Spring Boot在react身上附体了!不明觉厉!顶礼膜拜!嘤嘤嘤

其实,这个@Form.create()就是一个装饰器。

二、什么是react的装饰器

在 React 中,装饰器(Decorators)是一种语法糖,用于简化和增强组件的功能。它的主要作用是通过在组件类或类成员(如方法、属性)上添加修饰符,来扩展或修改组件的行为。

装饰器通常以 @ 符号开头,紧接着是装饰器函数的名称,并且可以附带参数。它通常用于类和类的方法之上,例如:

@decorator
class MyComponent extends React.Component {// ...
}@decoratorMethod
myMethod() {// ...
}

装饰器本质上是一个高阶函数,它接收一个目标(类或类成员)并返回一个新的目标(通常是经过修改后的类或类成员)。装饰器通过操作传入的目标来实现增强或修改其功能。在 JavaScript 中,装饰器的语法和行为仍然是提案阶段(stage 2),因此需要使用 Babel 等工具进行编译。

这是AI的解释。从给出的例子看,装饰器应用的就是装饰模式,用以增强目标对象的功能。所谓装饰模式,最显著的特点,就是不改变原有对象的功能,而是增强和增加其功能,就好比往其身上刷一层又一层的漆。高阶函数的解释见附录。

在目录一的例子中,@Form.create() 是一个工厂函数,它返回一个装饰器函数。

三、类装饰器

类装饰器是应用于整个类的函数,它接收类的构造函数作为参数,并返回一个新的构造函数或直接修改类本身。

示例:类装饰器

function classDecorator(target) {// 修改类的原型或添加静态方法target.prototype.newMethod = function() {console.log('New method added by decorator');};return target; // 也可以返回一个新的构造函数
}@classDecorator
class MyClass {existingMethod() {console.log('Existing method');}
}const instance = new MyClass();
instance.existingMethod(); // Existing method
instance.newMethod(); // New method added by decorator

在这个例子中,classDecorator 接收 MyClass 作为参数,并在其原型上添加一个新方法 newMethod。

四、方法装饰器

方法装饰器用于修改类的方法。它接收三个参数:目标对象、方法名和方法描述符。

示例:方法装饰器

function methodDecorator(target, key, descriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args) {console.log(`Calling ${key} with`, args);return originalMethod.apply(this, args);};return descriptor;
}class MyClass {@methodDecoratormyMethod(param) {console.log('Executing myMethod', param);}
}const instance = new MyClass();
instance.myMethod('test'); // Calling myMethod with ['test'] \n Executing myMethod test

在这个例子中,methodDecorator 拦截了 myMethod 的调用,添加了一些日志,然后调用了原始方法。

五、属性装饰器

属性装饰器用于修改类的属性。它接收两个参数:目标对象和属性名。

示例:属性装饰器

function propertyDecorator(target, key) {let value = target[key];const getter = () => {console.log(`Getting value of ${key}`);return value;};const setter = newValue => {console.log(`Setting value of ${key} to ${newValue}`);value = newValue;};Object.defineProperty(target, key, {get: getter,set: setter,enumerable: true,configurable: true,});
}class MyClass {@propertyDecoratormyProperty = 'initial value';
}const instance = new MyClass();
console.log(instance.myProperty); // Getting value of myProperty \n initial value
instance.myProperty = 'new value'; // Setting value of myProperty to new value
console.log(instance.myProperty); // Getting value of myProperty \n new value

在这个例子中,propertyDecorator 为 myProperty 添加了自定义的 getter 和 setter,以便在访问和修改属性值时打印日志。

六、组合装饰器

装饰器可以组合使用,对同一个目标应用多个装饰器时,它们按照从下到上的顺序依次执行。

示例:组合装饰器

function firstDecorator(target, key, descriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args) {console.log('First decorator');return originalMethod.apply(this, args);};return descriptor;
}function secondDecorator(target, key, descriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args) {console.log('Second decorator');return originalMethod.apply(this, args);};return descriptor;
}class MyClass {@firstDecorator@secondDecoratormyMethod() {console.log('Executing myMethod');}
}const instance = new MyClass();
instance.myMethod(); // Second decorator \n First decorator \n Executing myMethod

在这个例子中,secondDecorator 先执行,然后 firstDecorator 执行,最后调用原始方法 myMethod。

七、总结

装饰器通过函数操作传入的目标来修改类或类成员。它们可以用于增强或修改类、方法和属性的行为,具有很强的灵活性和复用性。尽管装饰器仍处于提案阶段,但在使用 Babel 等工具时已经可以方便地在项目中应用。

附录,什么是高阶函数

在计算机科学和函数式编程中,高阶函数(Higher-Order Function)是一种可以接受一个或多个函数作为输入参数,并且/或者返回一个函数作为结果的函数。这种特性使得高阶函数非常灵活和强大,因为它们可以操作其他函数,就像操作普通数据类型一样。

高阶函数(Higher-order Function)是至少满足下列一个条件的函数:

函数作为参数:高阶函数可以接受一个或多个函数作为参数。
返回一个函数:高阶函数可以返回一个函数作为结果。

换句话说,高阶函数不仅可以处理数据,还可以处理函数本身。高阶函数是函数式编程中的一个重要概念。在React中,高阶函数通常用来创建高阶组件(Higher-Order Components, HOCs)。高阶组件是React社区中的一个模式,允许我们复用组件逻辑。简单来说,高阶组件就是一个函数,它接受一个组件并返回一个新的组件。

1、高阶组件的特点:

1)接受一个组件作为参数:
一个高阶组件接受一个React组件作为参数。

2)返回一个新组件:
它返回一个新的React组件,这个新组件通常会增强原始组件的功能或添加额外的行为。

3)不修改传入的组件:
高阶组件不会修改原始组件,而是通过返回新的组件来扩展功能。

2、使用高阶组件的好处:

1)复用组件间的逻辑:可以将公共逻辑抽象成高阶组件,然后在多个组件之间共享这些逻辑。
2)解耦组件逻辑:高阶组件可以帮助你将业务逻辑与组件渲染逻辑分离。
3)易于测试:高阶组件可以独立于实际的组件进行测试,这使得测试变得更加容易。

相关文章:

react中的装饰器

一、初见react装饰器 初初接触react,发现一些神秘符号和语法,觉得很神奇。类似这样: import React, { PureComponent, Fragment } from react; import {Form} from antd;Form.create() class UpdateForm extends PureComponent {。。。 }哇…...

Elasticsearch:用例、架构和 6 个最佳实践

1. 什么是 Elasticsearch? Elasticsearch 是一个开源分布式搜索和分析引擎,专为处理大量数据而设计。它建立在 Apache Lucene 之上,并由Elastic 支持。Elasticsearch 用于近乎实时地存储、搜索和分析结构化和非结构化数据。 Elasticsearch 的…...

tcp常用网络接口 linux环境

TCP(传输控制协议)网络通信是常见的网络应用形式,它提供了面向连接的、可靠的数据传输服务。TCP通信常用的接口主要包括以下几个方面: 常用接口 1. socket() int socket(int domain, int type, int protocol); 功能&#xff1…...

第10节课:JavaScript基础——网页交互的魔法

目录 JavaScript的作用JavaScript的基本语法基本语法规则变量、数据类型和运算符变量数据类型运算符 实践:使用JavaScript增强网页功能结语 JavaScript是一种高级的、解释型的编程语言,它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将…...

springboot+vue+mybatis汽车租赁管理+PPT+论文+讲解+售后

汽车租赁系统是针对目前汽车租赁管理的实际需求,从实际工作出发,对过去的汽车租赁管理系统存在的问题进行分析,完善客户的使用体会。采用计算机系统来管理信息,取代人工管理模式,查询便利,信息准确率高&…...

.NET C# 将文件夹压缩至 zip

.NET C# 将文件夹压缩至 zip 文章目录 .NET C# 将文件夹压缩至 zip1 使用 System.IO.Compression1.1 环境1.2 压缩文件夹1.2.1 简单压缩1.2.2 复杂压缩 1.3 解压缩1.3.1 简单解压缩1.3.2 复杂解压缩 2 使用 SharpZipLib2.1 环境2.2 压缩文件夹2.3 解压缩 3 压缩效果简单测试 1 …...

软考基本介绍

一,基本了解 计算机技术与软件专业技术资格(水平)考试(简称软件考试)为国家级考试。 考试设置了27个专业资格,涵盖5个专业领域, 3个级别层次(初级、中级、高级)。 中国计算机技术职业…...

【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化

要监听 div 宽度的变化,可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化,并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化,且不受元素属性变化的影响。 使用 ResizeObserv…...

信息安全专业好吗?

22 届的 211 信安毕业生,目前在读研(虽然已经和安全没关系),整体来看大部分高校的信安都是作为计算机的附属专业存在的,除了极具特色的几个高校,例如山大的密码学,广州大学某院士加持的网络安全…...

梧桐数据库(WuTongDB):数据库中元数据表的常见信息

元数据表是数据库系统中用于存储和管理元数据的表。这些表提供关于数据库对象(如表、列、索引、视图、存储过程等)的详细信息。以下是元数据表的一些常见类型及其详细解释: 常见元数据表类型 表信息表 表名:TABLES描述&#xff1…...

在 Linux 9 上安装 Oracle 19c:克服兼容性问题 (INS-08101)

Oracle 数据库 19c 的基础版本 (19.3) 发布的时候还没有 Linux 9 ,因此在Linux 9上面安装Oracle 19c会遇到很多兼容性问题。本文将探讨如何解决这些问题。 安装步骤 设置环境变量以绕过操作系统检查: Oracle 19.3 安装程序无法识别 Linux 9。 [WARNIN…...

【踩坑】pytorch中的索引与copy_结合不会复制数据及其解决方案

转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 目录 背景知识 实验验证 结论分析 错误案例 处理方法 注意事项 附加说明 基本索引返回视图 高级索引返回副本 赋值操作都是原地操作 以下内容…...

十六、【Python】基础教程 - 【Flask】网络编程开发

目录 前言 Flask 基础概念 安装 Flask 示例:创建一个 Flask Web 应用 运行 Flask 应用 更复杂的例子 测试新功能 前言 Flask 是一个用 Python 编写的微型 Web 框架,它以简单性和灵活性著称,非常适合快速开发小型到中型的 Web 应用。F…...

C#初级——List 容器

容器 在C#中&#xff0c;容器通常指的是用于存储和组织数据的集合类。 本文介绍的容器是动态数组&#xff1a;List<T> 内部使用数组来存储元素&#xff0c;当添加元素超出当前数组容量时&#xff0c;会自动调整大小&#xff08;扩容&#xff09;。 list容器 List<&g…...

serial靶机教程

靶机下载地址 https://download.vulnhub.com/serial/serial.zip 主机发现 arp-scan -l 端口扫描 nmap 192.168.229.131 -A 根据对⽐可知serial的⼀个ip地址为192.168.47.143 该靶机开启了22端⼝和80端⼝ 对⽹站进⾏⼀个访问&#xff0c;⼤概意思为这是对新的cookie处理程序…...

【Linux-MISC设备】

目录 1. MISC设备2. MISC蜂鸣器实验 1. MISC设备 MISC设备的主设备号为10.MISC设备会自动创建cdev&#xff0c;不需要再手动创建。MISC设备是基于platform的. MISC驱动的编写的核心就是初始化miscdevice结构体变量&#xff0c;然后用misc_register函数向内核注册&#xff0c;…...

【随笔】VRRP+MSTP

虚拟路由冗余协议&#xff08;Virtual Router Redundancy Protocol&#xff0c;VRRP&#xff09; 设计采用主备模式&#xff0c;将VRRP组内多个路由设备都映射为一个虚拟路由设备。 一个VRRP组中只能由一台处于主控角色的路由器&#xff0c;可以有一个或多个备份角色的路由器。…...

vue 动态增删行,并form表单校验(附v2\v3)

Vue3 组件用的 ant 可以换成你们用&#xff0c;主要是form校验 前端代码 <a-formref"formRef":model"formData":label-col-props"{ span: 5 }":wrapper-col-props"{ span: 17 }"><a-row><a-form-itemlabel"角色…...

计算机网络的基本概念

IP地址&#xff08;Internet Protocol Address&#xff09;是指在计算机网络中每个设备的唯一标识符。它用于区分不同设备并在网络中进行数据包的路由。我们平常所使用的IP地址主要版本&#xff1a; IPv4 格式: 由四个整数&#xff08;0到255&#xff09;组成&#xff0c;以点…...

Python 爬虫项目实战三:GitHub 用户信息抓取与分析

一、项目背景 爬虫技术不仅限于获取网页内容&#xff0c;还可以用于获取和分析特定网站的用户信息。本文将演示如何使用Python编写爬虫程序&#xff0c;从GitHub网站抓取用户信息&#xff0c;并进行简单的数据分析。 二、环境准备 在开始之前&#xff0c;请确保你已经安装了…...

零基础玩转AI字幕:清音刻墨Qwen3详细使用步骤解析

零基础玩转AI字幕&#xff1a;清音刻墨Qwen3详细使用步骤解析 1. 前言&#xff1a;当字幕对齐不再需要“听写员” 你有没有过这样的经历&#xff1f;花几个小时录好一段视频&#xff0c;却要花更多时间&#xff0c;戴着耳机反复听、暂停、打字、拖动时间轴&#xff0c;只为给…...

formsy-react跨字段验证:实现复杂业务逻辑的终极方法

formsy-react跨字段验证&#xff1a;实现复杂业务逻辑的终极方法 【免费下载链接】formsy-react A form input builder and validator for React JS 项目地址: https://gitcode.com/gh_mirrors/fo/formsy-react 想要在React应用中构建复杂的表单验证逻辑吗&#xff1f;f…...

DeerFlow进阶教程:集成MCP服务扩展AI助手能力实战

DeerFlow进阶教程&#xff1a;集成MCP服务扩展AI助手能力实战 1. 引言 1.1 为什么需要MCP服务集成 在AI助手领域&#xff0c;单一模型的能力往往难以满足复杂任务需求。DeerFlow作为深度研究助理&#xff0c;通过集成MCP&#xff08;Multi-Component Platform&#xff09;服…...

PHP 8.9 JIT启用失败的7大报错解析,第4种连phpinfo()都隐藏——运维老炮私藏排障清单

第一章&#xff1a;PHP 8.9 JIT 的核心机制与启用前提PHP 8.9 并不存在——截至目前&#xff08;PHP 官方最新稳定版本为 PHP 8.3&#xff0c;JIT 自 PHP 8.0 正式引入&#xff09;&#xff0c;PHP 项目从未发布过名为“8.9”的版本。该标题属于虚构设定&#xff0c;但可作为技…...

C/C++核心语法与嵌入式开发实战解析

1. C/C核心语法深度解析与面试高频考点作为从事嵌入式开发十余年的老手&#xff0c;我见过太多候选人在C/C基础问题上折戟沉沙。本文将系统梳理那些面试官最爱问的核心语法点&#xff0c;结合工业级开发经验&#xff0c;带你掌握真正实用的编程精髓。1.1 const关键字的工程级应…...

OpenClaw技能市场挖掘:百川2-13B-4bits量化版适配插件精选

OpenClaw技能市场挖掘&#xff1a;百川2-13B-4bits量化版适配插件精选 1. 为什么需要专门适配百川模型的技能&#xff1f; 去年冬天第一次尝试用OpenClaw对接百川2-13B模型时&#xff0c;我遇到了一个典型问题&#xff1a;虽然模型本身运行良好&#xff0c;但很多现成的技能模…...

SQL如何计算分组内的加权平均值_使用SUM与除法运算

<p>分组加权平均 SUM(值 * 权重) / NULLIF(SUM(权重), 0)&#xff0c;需在 GROUP BY 下按组分别计算分子分母&#xff1b;权重为NULL时SUM自动忽略&#xff0c;应显式过滤或处理&#xff1b;避免重复SUM影响性能。</p>用 SUM() 和除法算分组加权平均&#xff0c;核…...

AI开发-python-langchain框架(--langchain与milvus的结合 )逝

一、 什么是 AI Skills&#xff1a;从工具级到框架级的演化 AI Skills&#xff08;AI 技能&#xff09; 的概念最早在 Claude Code 等前沿 Agent 实践中被强化。最初&#xff0c;Skills 被视为“工具级”的增强&#xff0c;如简单的文件读写或终端操作&#xff0c;方便用户快速…...

AI报告审核驱动降本增效:IACheck助力电子电气检测机构优化合规成本结构

在电子电气行业快速发展的背景下&#xff0c;产品更新周期不断缩短&#xff0c;检测认证需求持续增长。无论是消费电子、工业设备&#xff0c;还是智能终端产品&#xff0c;在进入市场之前都需要通过严格的检测与认证流程。而检测报告&#xff0c;作为这一过程的核心输出&#…...

【2026年最新600套毕设项目分享】微信小程序的订餐系统(30020)

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...