React入门学习笔记3

事件处理

  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.hqwc.cn/news/64105.html

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

相关文章

spark 图计算 助力解决 dataframe中的链式依赖

链式依赖说明 name newName a b c d b c 我们需要的结果 即我们可以支持获取到链式转换的 起点 重点 以及链式的中间转换过程顺序数组. 特别说明: 出版只支持 单向 无分叉的图,其他复杂场景暂时未测试. 场景举例: 比如某件商品价格变化,我们需要知…

Python爬虫——requests_cookie登陆古诗文网

寻找登陆需要的参数 __VIEWSTATE:aiMG0UXAfCzak10C7436ZC/RXoZbM2lDlX1iU/4wjjdUNsW8QUs6W2/3M6XIKagQZrC7ooD8Upj8uCnpQMXjDAp6fS/NM2nGhnKO0KOSXfT3jGHhJAOBouMI3QnlpJCQKPXfVDJPYwh169MGLFC6trY __VIEWSTATEGENERATOR: C93BE1AE from: http://so.gushiwen.cn/user/collect.…

关系型数据库MySQL及其优化

写在前面 本文看下MySQL的基础内容以及常见的优化方式。 1:MySQL基础内容 1.1:什么是关系型数据库 以二维的数据格式来存储数据的数据库叫做关系型数据库,其中关系包括一对一,一对多,多对多,都通过二位…

nextjs中使用image图片

使用nextjs的组件&#xff1a; import Image from "next/image";<Image src"xxx" alt"图片" width{300} height{300} />加入允许跨域&#xff1a; 在next.config.js中加入 const nextConfig {images: {domains: ["images.doc.ceo&q…

[Leetcode] [Tutorial] 多维动态规划

文章目录 62. 不同路径Solution 62. 不同路径 一个机器人位于一个 m ∗ * ∗ n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角。 问总共有多少条不同的路径&#xff1f; 示例…

无感部署 - 蓝绿部署、AB测试、灰度发布

蓝绿部署 蓝绿部署&#xff08;Blue-Green Deployment&#xff09;是一种软件发布和部署的策略&#xff0c;旨在实现无缝的应用程序升级和回滚。在蓝绿部署中&#xff0c;同时存在两个环境&#xff1a;一个是当前稳定的生产环境&#xff08;蓝色环境&#xff09;&#xff0c;另…

springboot 设置自定义启动banner背景图 教程

springboot banner Spring Boot中的banner是在应用程序启动时显示的一个ASCII艺术字符或文本。它被用来给用户展示一些关于应用程序的信息&#xff0c;例如名称、版本号或者公司标志等。 使用Spring Boot的默认设置&#xff0c;如果项目中有一个名为“banner.txt”的文件放置…

CSS—选择器

目录 一、CSS简介 二、HTML页面中常用的元素 三、CSS语法规则 四、常用的选择器 五、CSS的三种使用方法 六、选择器参考 一、CSS简介 CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档&#xff08;如 HTML 文档或 XML 应…

vuejs 设计与实现 - 快速diff算法

Vue.js 2 所采用的双端 Diff 算法。既然快速 Diff 算法如此高效&#xff0c;我们有必要了解它的思路。接下来&#xff0c;我们就着重讨论快速 Diff 算法的实现原理。 相同的前置元素和后置元素 快速 Diff 算法借鉴了纯文本 Diff 算法中预处理的步骤。 案例&#xff1a; 旧的…

中科亿海微FIFO使用

引言 FPGA&#xff08;现场可编程门阵列&#xff09;是一种可编程逻辑器件&#xff0c;具有灵活性和可重构性&#xff0c;广泛用于数字电路设计和嵌入式系统开发。在FPGA中&#xff0c;FIFO&#xff08;First-In, First-Out&#xff09;是一种常见的存储器结构&#xff0c;用于…

Spring源码解析(八):bean后置处理器CommonAnnotationBeanPostProcessor

Spring源码系列文章 Spring源码解析(一)&#xff1a;环境搭建 Spring源码解析(二)&#xff1a;bean容器的创建、默认后置处理器、扫描包路径bean Spring源码解析(三)&#xff1a;bean容器的刷新 Spring源码解析(四)&#xff1a;单例bean的创建流程 Spring源码解析(五)&…

2023河南萌新联赛第(五)场:郑州轻工业大学-F 布鲁特佛斯

2023河南萌新联赛第&#xff08;五&#xff09;场&#xff1a;郑州轻工业大学-F 布鲁特佛斯 https://ac.nowcoder.com/acm/contest/62977/F 文章目录 2023河南萌新联赛第&#xff08;五&#xff09;场&#xff1a;郑州轻工业大学-F 布鲁特佛斯题意解题思路代码 题意 给定一个…