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

最新推荐文章于 2023-07-14 18:04:32 发布
最新推荐文章于 2023-07-14 18:04:32 发布
阅读量751 收藏
点赞数
分类专栏： react 文章标签： 前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qiuxuntao/article/details/124330778
版权
本文深入探讨了React中的高阶函数，包括其概念、案例分析，展示了如何将函数作为参数传递和返回。同时，文章还介绍了函数的柯里化，解释了柯里化的概念，并通过代码讲解了其实现方式。通过本文，读者能够更好地理解和应用这两种重要的函数编程技巧。
摘要由CSDN通过智能技术生成

文章目录

一、高阶函数

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
关注
专栏目录
react 高阶函数详解(附送彩蛋)
weixin_33825683的博客
12-15 763
此文适合react新手入门，react大佬可以略过(毕竟以前都是写vue,React才写了一个多月， 掩面泪奔) 主要是学习react中的一些经验总结，如果你觉得对你有帮助，可以给个赞github。 react项目入门 react版本：16.0.0 (因为工作中还是15的版本) 首先我们先来说说 有状态组件和无状态组件 有状态组件 无状态组件 有状态组件：组件内部状态发生变化，需要state来保存...
react技术全家桶（26）高阶函数 函数柯里化
weixin_41380194的博客
02-23 151
saveUserName =(event)=>{ console.log(event.target.value) this.setState({userName:event.target.value}) } savePassword =(event)=>{ console.log(event.target.value) this.setState({password:event.target.value}) .
通俗理解 React 高阶函数
weixin_30776545的博客
04-10 543
定义：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。A higher-order component is a function that takes a component and returns a new component.函数模拟高阶组件最普通的方法，一个welcome，一个goodbye。两个函数先从localStorage读...
React的高阶函数
qwqasd123456的博客
08-20 813
高阶组件：就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 函数模拟高阶组件 1 最普通的方法，一个welcome方法，一个goodbye。两个函数先从localStorage中读取username，然后对username进行一些 处理 function welcome(){ let username = localStroage.get...
React —— 高阶函数和函数柯里化
Bonsoir777的博客
11-01 1163
本文主要介绍React中有关高阶函数的相关知识点
React学习笔记九-高阶函数与函数柯里化
zhangawei123的博客
05-31 1011
此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第九篇，主要介绍高阶函数与函数柯里化。
高阶函数和函数柯里化
l529936997的博客
08-07 187
高阶函数:如果一个函数符合下面两个条件的任何一个,那该函数就是高阶函数 1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2.若B函数,调用的返回值仍然是一个函数,那么B就可以称之为高阶函数 常见的高阶函数有:promise. settimeout map等 函数的柯里化:可以通过函数调用继续返回函数的方式,实现多次接收参数,最后统一处理的函数编码方式 function sum(a){ return(b)=>{
React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）
weixin_52984349的博客
10-29 1431
React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）
React之高阶函数
y_l33的博客
01-12 150
高阶函数
React--12:高阶函数
qq_39008205的博客
08-18 495
这里写目录标题1. 引入合并方法2. 高阶函数更改回调存入状态对象复习高阶函数函数的柯里化 1. 引入 首先上篇文章的代码 class Login extends React.Component{ state ={ username:'', password:'' } handleSubmit = (event)=>{ event.preventDefault() // 阻止提交 const {username,p
React 中使用高阶函数
最新发布
chen520的博客
07-14 2398
在 React 中，高阶函数是一个函数，它接收一个组件作为参数，并返回一个新的组件。
React-函数柯里化
TO_Web的博客
02-28 451
React函数柯里化 ps: 用于记录学习,持续更新 先来看段代码 class People extends React.Component { changeData = () => { // 下面这个renturn函数 是解决函数返回值是undefined的问题 return () => { } } render() { return ( <form> <input onChange={this.changeData}" />
React高阶函数（1）
wtianheihei的博客
10-06 158
高阶函数基本概念 函数可以作为参数被传递 // eg setTimeout(() => { console.log(1) },1000) 函数可以作为返回值被输出 // eg function foo(x) { return function() { return x; } } // eg // 高阶函数在时间函数的应用 setTimeout(function() { console.log(1) }, 1000) setInterval(function() { console
react-高阶函数的简单运用
yzj_xxj的博客
08-05 428
高阶函数的功能：强化props，条件渲染，赋能组件（生命周期的劫持，事件的劫持，打印日志）通过高阶函数注入数据到组件中，那么在使用组件时，就不需要手动传入数据。高阶函数本质是一个函数，参数是一个组件，经过处理后再返回一个组件。在高阶组件里面修改state数据，达到抽离state的作用。在高阶函数里面判断是否要渲染参数组件，达到条件控制。可以将生命周期中的打印日志操作放到高阶组件中去执行。高阶组件可以直接继承自参数组件，这就是反向继承。...
React笔记之受控组件与非受控组件
qq_51219425的博客
03-09 560
包含表单的组件分类 1. 受控组件 将input这个DOM组件中的输入数据存储到state状态中，然后再在要使用的地方进行调用，是可控制的。 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>2_受控组件</title> </head> <body> <!--准备好一个容器-->
React：三、函数柯里化
a232884c的博客
06-10 398
1.高阶函数和函数的柯里化 且input通过onChage实时更新数据到state中，为受控组件（类似vue的双向绑定）；即取即用，数据不做存储二次利用为非受控组件。 2.不使用函数柯里化的方法 简化写法：...
React-16：函数柯里化
Always-Learning
03-24 438
对象中调用变量要加[] 函数柯里化的概念 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 函数柯里化的案例 不使用函数柯里化实现form表单的state更新
react中使用高阶函数
weixin_50379372的博客
07-10 623
常见的高级函数有：Promise,setTimeout（()=>{}）,map(()=>{})等等。2.若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称高阶函数。
"深入理解前端高阶函数与柯里化，实现Virtual DOM算法
在React开发中，高阶函数和函数科利华同样得到了广泛的应用。通过高阶函数，我们可以更好地实现组件之间的逻辑复用和抽象。而函数科利华则能够帮助我们更好地处理组件的props和state，使得组件的逻辑更加清晰和易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值