React的高阶函数、函数柯里化

最新推荐文章于 2024-04-23 13:42:04 发布

Qiuxuntao

最新推荐文章于 2024-04-23 13:42:04 发布

阅读量696

点赞数

分类专栏： react 文章标签：前端 react

本文链接：https://blog.csdn.net/Qiuxuntao/article/details/124330778

版权

文章目录

一、高阶函数
二、函数的柯里化
- 2.1、概念
- 2.2、代码讲解

一、高阶函数

1.1、概念

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等

1.2、案例

以下案例就是高阶函数

	saveFormData = (event)=>{
   
				return ()=>{
   
					console.log('@');
				}
			}

					<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>

a、this.saveFormData(‘username’) 将saveFormData返回值作为onChange的回调，不是将saveFormData作为回调

b、如果使用 this.saveFormData('username') 那么saveFormData赋值函数必须返回东西给onChange 把saveFormData赋值函数返回值（返回的函数）交给onChange作为回调

c、所以我们在saveFormData的return函数里打印一下‘@’符号，那么就会把这个打印的值返回给onChange，在input框边输入边打印@符号

请添加图片描述
d、saveFormData传的dataType其实就是username和password
e、我们在输入的时候调用的肯定是return函数 return才是真正的回调, react帮我回调的时候把event传进去了通过event.target.value可以取到我们输出的值

saveFormData = (dataType)=>{
   
				// console.log(dataType);
				return (event)=>{
   
					// console.log('@');
					console.log(dataType,event.target.value);
				}
			}

请添加图片描述
f、可以输出内容我们可以用setState存到state里面去

this.setState({
   [dataType]:event.target.value})

1.3、完整代码及效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>

最低0.47元/天解锁文章

Qiuxuntao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的高阶函数、函数柯里化

文章目录一、高阶函数1.1、概念1.2、案例1.3、完整代码及效果二、函数的柯里化2.1、概念2.2、代码讲解一、高阶函数1.1、概念高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等1.2、案例以下案例就是高阶函数 saveFormData = (even
复制链接

扫一扫