React学习（七）高阶函数及函数的柯里化

qq_52551375

已于 2024-01-28 18:26:33 修改

阅读量242

点赞数 6

分类专栏： React学习文章标签： react.js 学习前端

于 2024-01-27 14:38:17 首次发布

本文链接：https://blog.csdn.net/qq_52551375/article/details/135882442

版权

React学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.高阶函数及函数的柯里化

1.高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
（1）若A函数，接收的参数是一个函数，那A就可以称之为高阶函数
（2）若A函数，调用的返回值依然是一个函数，那么A就是高阶函数
（3）常见的高阶函数有：Promise、setTimeout、arr.map()d等等
2. 函数的柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式
3. 注意：this.setState({[dataType]:event.target.value})中dataType需要使用[ ]，否则无法正确使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        /*
            高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
                    1.若A函数，接收的参数是一个函数，那A就可以称之为高阶函数
                    2、若A函数，调用的返回值依然是一个函数，那么A就是高阶函数
                    常见的高阶函数有：Promise、setTimeout、arr.map()d等等
                    
            函数的柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式

        */
        class Login extends React.Component {
            // 初始化状态
            state={
                username:'',//用户名
                password:''//密码
            }
            // 通过event.target得到发生事件的DOM元素对象,发生事件的元素正好是需要操作的元素就可以不使用refs，使用event.target.value
            saveFormData=(dataType)=>{
                // 将表单数据存入状态中
                return (event)=>{
                    // console.log(dataType,event.target.value)
                    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" placeholder="请输入用户名"/>&nbsp;
                        
                        密码：<input onChange={this.saveFormData('password')} type = "password" name = "password" placeholder="请输入密码" />&nbsp;
                        <button >登录</button>&nbsp;
                    </form>
                )

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

4.不用柯里化实现
通过回调函数中传入两个参数实现，直接获取到value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        /*
            高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
                    1.若A函数，接收的参数是一个函数，那A就可以称之为高阶函数
                    2、若A函数，调用的返回值依然是一个函数，那么A就是高阶函数
                    常见的高阶函数有：Promise、setTimeout、arr.map()d等等
                    
            函数的柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式

        */
        class Login extends React.Component {
            // 初始化状态
            state={
                username:'',//用户名
                password:''//密码
            }
            // 通过event.target得到发生事件的DOM元素对象,发生事件的元素正好是需要操作的元素就可以不使用refs，使用event.target.value
            saveFormData=(dataType,value)=>{
                // 将表单数据存入状态中
                this.setState({[dataType]: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.target.value)}} type = "text" name = "username" placeholder="请输入用户名"/>&nbsp;
                        
                        密码：<input onChange={(event)=>{this.saveFormData('password',event.target.value)}} type = "password" name = "password" placeholder="请输入密码" />&nbsp;
                        <button >登录</button>&nbsp;
                    </form>
                )

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

二.复习

1.对象的相关知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let a ='name'
        let obj ={}
        obj[a] = 'tom'
    </script>
</body>
</html>

2.函数的柯里化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // function sum(a,b,c){
        //     return a + b + c;
        // }
        function sum(a){
            return (b)=>{
                return (c)=>{
                    return a + b + c
                }
            }
        }
        // const re=sum(1,2,3)
        const re=sum(1)(2)(3)
        console.log(re)
    </script>
</body>
</html>

qq_52551375

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React学习（七）高阶函数及函数的柯里化

1.高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数（1）若A函数，接收的参数是一个函数，那A就可以称之为高阶函数（2）若A函数，调用的返回值依然是一个函数，那么A就是高阶函数（3）常见的高阶函数有：Promise、setTimeout、arr.map()d等等2. 函数的柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式中dataType需要使用[ ]，否则无法正确使用${${4.不用柯里化实现。
复制链接

扫一扫

专栏目录