React之高阶函数_函数柯里化

最新推荐文章于 2024-06-24 14:51:36 发布

冰淇淋配马卡龙

最新推荐文章于 2024-06-24 14:51:36 发布

阅读量307

点赞数 1

分类专栏： react笔记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_51219425/article/details/123380663

版权

react笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

高阶函数_函数柯里化

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

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

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

常见的高阶函数：

Promise()
setTimeout()
arr.map()
等等

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>高阶函数_函数柯里化</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Login extends React.Component{
            //初始化状态
            state = {
                username:'',
                password:''
            }
            //表单提交的
            handleSubmit=(event)=>{
                event.preventDefault() //阻止表单提交跳转（阻止默认事件）
                const {username,password} = this.state
                alert('你输入的用户名是:${username},密码是：${password}')
            }
            //保存表单数据到状态中
            saveFormData = (dataType) =>{
                 return (event) =>{
                    this.setState({[dataType] : event.target.vaule})
                }
            }
            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveFormData('username')} type="text"/>
                        密码:<input onChange={this.saveFormData('password')} type="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'))
        
    </script>
    </body>
    </html>

其中saveFormData()就是高阶函数，它满足高阶函数的第二条要求，即调用的返回值依然是一个函数。
在这里插入图片描述
展示函数柯里化的简单例子：

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

不用函数柯里化的实现

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2_不用函数柯里化的实现</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Login extends React.Component{
            //初始化状态
            state = {
                username:'',
                password:''
            }
            //表单提交的
            handleSubmit=(event)=>{
                event.preventDefault() //阻止表单提交跳转（阻止默认事件）
                const {username,password} = this.state
                alert('你输入的用户名是:${username},密码是：${password}')
            }
            //保存表单数据到状态中
            saveFormData = (dataType,event) =>{                
                    this.setState({[dataType] : event.target.vaule})               
            }
            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={(event)=>{this.saveFormData('username',event)}} type="text"/>
                        密码:<input onChange={(event)=>{this.saveFormData('password',event)}} type="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'))
        
    </script>
    </body>
    </html>

冰淇淋配马卡龙

关注

1
点赞
踩
1

收藏

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

高阶函数_函数柯里化高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。常见的高阶函数：Promise()setTimeout()arr.map()等等代码示例：<!DOCTYPE html><html><he
复制链接

扫一扫

专栏目录