React中高阶函数和函数的柯里化

news/2024/7/23 21:22:38 标签: react, js

一、高阶函数:

如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

  1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
  2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。

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

二、函数的柯里化:

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

function sum(a){
	return(b)=>{
		return (c)=>{
			return a+b+c
		}
	}
}
const result = sum(1)(2)(3)
console.log(result);//6

通过函数的柯里化简化onChange里的函数:

//创建组件
class Login extends React.Component{
	//初始化状态
	state = {
		username:'', //用户名
		password:'' //密码
	}

	//保存表单数据到状态中
	saveFormData = (dataType)=>{
		return (event)=>{
			this.setState({[dataType]:event.target.value})
		}
	}

	//表单提交的回调
	handleSubmit = (event)=>{
		event.preventDefault() //阻止表单提交
		const {username,password} = this.state
		alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
	}
	render(){
		return(
			<form onSubmit={this.handleSubmit}>
				用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/>
				密码:<input onChange={this.saveFormData('password')} type="password" name="password"/>
				<button>登录</button>
			</form>
		)
	}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

不用函数的柯里化也可以简化:

//创建组件
class Login extends React.Component{
	//初始化状态
	state = {
		username:'', //用户名
		password:'' //密码
	}

	//保存表单数据到状态中
	saveFormData = (dataType,event)=>{
		this.setState({[dataType]:event.target.value})
	}

	//表单提交的回调
	handleSubmit = (event)=>{
		event.preventDefault() //阻止表单提交
		const {username,password} = this.state
		alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
	}
	render(){
		return(
			<form onSubmit={this.handleSubmit}>
				用户名:<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
				密码:<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
				<button>登录</button>
			</form>
		)
	}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

http://www.niftyadmin.cn/n/1527255.html

相关文章

maven安装与配置到idea中

maven安装 在官网下载压缩包,网址: https://maven.apache.org/download.cgi?.解压到一个目录,目录最好不要有中文和空格配置环境变量: 新建一个变量: M2_HOME , 变量值为maven的路径(不带bin目录),在PATH变量中追加值: %M2_HOME%\bin 打开cmd输入 mvn -v出现以下内容安装成功…

Elementui中在表格中插入图片

效果&#xff1a; 插入单张选中放大&#xff1a; <el-table-column label"商品详情"><template slot-scope"scope"><el-popover placement"top-start" title"" trigger"hover"><img :src"scope…

React脚手架public文件介绍

public文件夹下index.js <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel"icon" href"%PUBLIC_URL%/favicon.ico" /><…

Elementui实现面包屑($route.matched)

this.$route.matched匹配到的会是一个数组&#xff0c;包含当前页面之前所有路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。 //demo <template><div class"nav-wrap"><router-link v-for"(item, index) in navList" :key&…

Vue中$router和$route的常用api

一、$router router是VueRouter的一个对象&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所有的路由包含了许多关键的对象和属性。 $router.push // 字符串 this.$router.push…

Vue动态组件(:is)

概念&#xff1a; 让多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件。 通过使用保留的 <component> 元素&#xff0c;动态地绑定到它的 is 特性&#xff0c;可以实现动态组件 1、基础用法 <div id"example"><button c…

Vue中路由表单缓存(keep-alive)

vue 中从一个路由切换到另一个路由的时候&#xff0c;第一个路由可能有表单信息&#xff0c;但切换到第二个路由时&#xff0c;第一个路由里的组件会被销毁&#xff0c;表单里填写的 value 也会消失&#xff0c;keep-alive 就可以帮我们缓存我们不想被销毁的组件。 页面效果&a…

TCP总结:socket

文章目录 参考简介正常TCP 建链、拆链示例半连接定义(TCP, 已建立的链接,收到PUSH包,不带ACK,会被drop)TCP 发送rst的情况已建立的链接,收到PUSH包,不带ACK,会被drop导致进程假死的表面现象TCP push 消息重传次数设置为什么tcp/udp 端口个数时65535个?tcpdump 抓包忽略T…