React入门学习笔记3

news2024/10/6 20:25:30

事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)
    1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性 eg:οnclick==》onClick
    2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了更高效
  2. 通过event.target得到发生事件的DOM元素对象——所以不要过度使用ref
  3. 当事件项和操作项是同一个时无需使用ref

 非受控组件

数据现用现取

调用event.preventDefault()阻止表单提交 

受控组件

优势就是双向绑定,能省掉ref

很明显,这样子实在是太麻烦了。。所以就有了⬇

高阶函数——函数柯里化

如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
        1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
        2.若A函教,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。

常见的高阶函数有:Promise、setTimeout、arr.map()等等

 

函数的柯里化: 通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

重点就是分步接受参数并在最后统一处理!!

这里运用了闭包

 指定参数属性名用方括号!!!

细品上面的例子,非常巧妙。

但其实,也可以一次性获取参数和event,只需要在调用时写个内联函数

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go context.WithCancel()的使用

WithCancel可以将一个Context包装为cancelCtx,并提供一个取消函数,调用这个取消函数,可以Cancel对应的Context Go语言context包-cancelCtx 疑问 context.WithCancel()取消机制的理解 父母5s钟后出门,倒计时,父母在时要学习,父母一走就可以玩 …

视频怎么改成gif格式?简单几步就可以轻松视频转gif

平时我们使用的许多gif图片,其实都是视频片段,那么是怎么把视频转gif格式的呢?可以使用视频转gif工具来完成gif制作,下面就给大家分享一个简单的视频转gif在线制作(https://www.gif.cn)的方法,一…

pycharm离线安装依赖包

一、对于单个下载离线包,然后安装 1、先去https://pypi.org/网站下载离线包,下载到本地; 2、从磁盘中找到刚刚下载包,点击确定就可以安装了 二、将本地项目所有依赖包全部下载下来,然后批量在另一个项目&#xff…

Linux抓包工具----tcpdump

这是一个目录 一、什么是tcpdump二、为什么要用tcpdump三、tcpdump在哪里?四、怎么用tcpdump?4.1 命令格式4.2 常用选项4.2.1 对网络接口抓包 -i4.2.2 指定收取数据包的数量 -c4.2.3 不把ip转换成域名,直接显示ip -n4.2.4 显示ip和端口号 -nn…

权限校验—接口检验

一、背景介绍 最近项目中要实现根据不同用户去划分不同的角色,而不同角色具备调用不同接口的权限这个功能。用户在调用接口时需要校验用户是否具有权限访问接口,防止外界恶意调用随意篡改 二、思路&方案 为什么要进行接口鉴权? 接口鉴权…

几种常见的光纤接头有哪些?

名称: 光纤接头 光纤接头(optical fiber splice),将两根光纤永久地或可分离开地联结在一起,并有保护部件的接续部分,光纤接头是光纤的末端装置问题描述: 几种常见的光纤接头有哪些? 回答: 1.常见的光纤接头 LC 、SC 、FC 、ST、 MPO LC (Lucent connector) 小…

MySQL 事务原理:锁机制

文章目录 一、锁类型1.1 全局锁1.2 表级锁1.2.1 表锁1.2.2 元数据锁1.2.3 意向锁1.2.4 自增锁 1.3 行级锁1.3.1 记录锁1.3.2 间隙锁1.3.3 临键锁1.3.4 插入意向锁 1.4 锁的兼容性 二、锁的CUDP2.1 查询2.2 删除、更新2.3 插入 三、锁的对象四、并发死锁4.1 相反加锁顺序导致死锁…

监控Kafka的关键指标

Kafka 架构 上面绿色部分 PRODUCER(生产者)和下面紫色部分 CONSUMER(消费者)是业务程序,通常由研发人员埋点解决监控问题,如果是 Java 客户端也会暴露 JMX 指标。组件运维监控层面着重关注蓝色部分的 BROKE…

Redis 高频数据类型使用详解

目录 一、前言 二、Redis常用数据类型 2.1 常见的数据类型 三、String 类型 3.1 String 类型简介 3.2 String常用操作命令 3.2.1 String 操作命令实践 3.3 常用业务场景 3.3.1 session共享 3.3.2 登录失败计数器 3.3.3 限流 3.3.4 多线程安全控制 四、Hash类型 4…

【C++笔记】C++启航之为C语言填坑的语法

【C笔记】C启航之为C语言填坑的语法 一、命名空间1、为什么要引入命名空间?2、命名空间的基本用法3、展开命名空间4、命名空间的套娃5、命名空间的自动合并 二、缺省参数1、为什么要引入缺省参数?2、缺省参数的基本用法3、缺省的参数必须从右向左4、缺省…

为什么我们需要加快推进数字孪生技术?

数字孪生技术以其强大的潜力和应用前景,引起了各行各业的广泛关注和热切期待。那么,究竟为什么要加快推进数字孪生技术呢? 首先,数字孪生技术能够实现现实世界与虚拟世界的无缝连接,为各行业带来了前所未有的创新机遇…

Vue电商项目--VUE插件的使用及原理

图片懒加载 图片懒加载,就是图片延迟加载。只加载页面可视区域上的图片,等滚动到页面下面时,再加载对应视口上的图片 而在vue中有一个插件 vue-lazyload - npm (npmjs.com) npm i vue-lazyload 去使用他,这里我们引入了一张图片…

(九)人工智能应用--深度学习原理与实战--前馈神经网络实现MNST手写数字识别

目标: 识别手写体的数字,如图所示: 学习内容: 1、掌握MNIST数据集的加载和查看方法 2、熟练掌握Keras建立前馈神经网络的步骤【重点】 3、掌握模型的编译及拟合方法的使用,理解参数含义【重点】 4、掌握模型的评估方法 5、掌握模型的预测方法 6、掌握自定义图片的处理与预测 …

十分钟掌握使用 SolidJS 构建全栈 CRUD 应用程序

我们可以开始讨论 SolidJS,说它比React更好,但没有必要做这种比较。SolidJS只是众多前端框架之一,旨在在Web上快速创建数据驱动。那么,我们为什么要突出这个新孩子呢? 首先,我们不能忽视SolidJS不使用虚拟…

嗅探抓包工具,解决线上偶现问题来不及抓包的情况阅读目录

目录 背景 实现思路 具体实现 Python 抓包 总结 资料获取方法 背景 测试群里经常看到客户端的同学反馈发现了偶现Bug,但是来不及抓包,最后不了了之,最近出现得比较频繁,所以写个小脚本解决这个问题。 实现思路 之前写过一个…

免费实用的日记应用:Day One for Mac中文版

Day One for Mac是一款运行在Mac平台上的日记软件,你可以使用Day One for mac通过快速菜单栏条目、提醒系统和鼓舞人心的信息来编写更多内容,day one mac版还支持Dropbox同步功能,想要day one mac中文免费版的朋友赶紧来试试吧! …

IPC之一:使用匿名管道进行父子进程间通信的例子

IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本文主要介绍匿名管道(又称管道、半双工管道),尽管很多人在编程中使用过管道,但一些特殊的用法还是鲜有文章涉及,本文给出了多个具体的实例,每个实例均附…

Leetcode.1316 不同的循环子字符串

题目链接 Leetcode.1316 不同的循环子字符串 rating : 1837 题目描述 给你一个字符串 text ,请你返回满足下述条件的 不同 非空子字符串的数目: 可以写成某个字符串与其自身相连接的形式(即,可以写为 a a,其中 a 是…

服务器感染了LockBit 3.0勒索病毒,如何确保数据文件完整恢复?

引言: 在数字时代,恶意软件的威胁变得愈发严峻,而LockBit 3.0勒索病毒则是其中的顶尖恶势力之一。其先进的加密技术和毫不留情的勒索手段,使无数人蒙受损失。然而,我们不应束手无策。本文91数据恢复将带您深入了解Loc…

AndroidStudio通过Profiler查找内存泄漏

Fragment内存泄漏: AndroidStudio --> Profiler --> 勾选 show nearest Gc root only,然后查看非weakreference的引用(weakreference是不会导致内存泄漏的),往下就能找自己项目里写的代码,一般此处…