React学习计划-React16--React基础(三)收集表单数据、高阶函数柯里化、类的复习

本文主要是介绍React学习计划-React16--React基础(三)收集表单数据、高阶函数柯里化、类的复习,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 收集表单数据

包含表单的组件分类

  1. 受控组件——页面中所有输入类的DOM,随着输入,把值存维护在状态里,需要用的时候去状态里取值(推荐,避免了过渡使用ref
  2. 非受控组件——页面中所有输入类的DOM,现用现取
    受控组件示例:
    在这里插入图片描述
    非受控组件示例:
    在这里插入图片描述

2. 高阶函数

  1. 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
    1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
    2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
  2. 函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后同意处理的函数编码形式

示例:
在这里插入图片描述
分析:我们在这个示例中可以看到onChange绑定事件是一个函数()=>this.handleChange('username', e),标签中呢不仅有事件,事件还绑定函数,函数的返回值也是个函数。

  1. 标签在渲染的时候呢,会执行onChange方法,这时候呢,执行了函数,返回了我们在类中定义的handleChangehandleChange方法还接收了两个参数,一个是我们想要修改的state的属性,另一个是标签的event对象,当我们在input标签里输入内容是,就会触发handleChange方法,
  2. 这种写法呢就属于标签内绑定函数,类中再定义函数。虽然能实现我们的功能,但是我们通常呢,会习惯性的只在标签内绑定一个类中定义的方法就可以了。不会在标签内绑定函数,而在类中呢再次定义函数,所以我们可以使用高阶函数来修改一下上述案例,就如下:

高阶函数——函数柯里化示例:
在这里插入图片描述

3. 类的复习

  1. 类中的构造器不是必须写的,要对实例进行一些初始化操作,如添加属性才写
  2. 如果A继承了B类,且A类中写了构造器,那么A类构造器中必须要调用super()
  3. 类中定义的方法,都是放在了类的原型对象上,供实例去使用

在这里插入图片描述

这篇关于React学习计划-React16--React基础(三)收集表单数据、高阶函数柯里化、类的复习的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/525320

相关文章

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考:mysql Innodb表空间卸载、迁移、装载的使用方法注意!此方法只适用于innodb_fi

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据

《mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据》文章主要介绍了如何从.frm和.ibd文件恢复MySQLInnoDB表结构和数据,需要的朋友可以参... 目录一、恢复表结构二、恢复表数据补充方法一、恢复表结构(从 .frm 文件)方法 1:使用 mysq

mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespace id不一致处理

《mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespaceid不一致处理》文章描述了公司服务器断电后数据库故障的过程,作者通过查看错误日志、重新初始化数据目录、恢复备... 周末突然接到一位一年多没联系的妹妹打来电话,“刘哥,快来救救我”,我脑海瞬间冒出妙瓦底,电信火苲马扁.

golang获取prometheus数据(prometheus/client_golang包)

《golang获取prometheus数据(prometheus/client_golang包)》本文主要介绍了使用Go语言的prometheus/client_golang包来获取Prometheu... 目录1. 创建链接1.1 语法1.2 完整示例2. 简单查询2.1 语法2.2 完整示例3. 范围值

golang panic 函数用法示例详解

《golangpanic函数用法示例详解》在Go语言中,panic用于触发不可恢复的错误,终止函数执行并逐层向上触发defer,最终若未被recover捕获,程序会崩溃,recover用于在def... 目录1. panic 的作用2. 基本用法3. recover 的使用规则4. 错误处理建议5. 常见错