React：三、函数柯里化

最新推荐文章于 2022-11-01 12:39:15 发布

小徐也要努力鸭

最新推荐文章于 2022-11-01 12:39:15 发布

阅读量382

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/a232884c/article/details/125219086

版权

react.js javascript

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

React：三、函数柯里化

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>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src = "../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class Loign extends React.Component{
            state = {
                user:"",
                pwd:""
            }
            /* 
            高阶函数：如果一个函数符合下面2个规范中任何一个，那该函数就是高阶函数
            1.若A函数，接受的参数是一个函数，那么A就可以称之为高阶函数
            2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
            函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
            常见的高阶函数有：Promise、setTimeOut、arr.map()等等
            */
            saveFromData(dataType){
                return ()=>{
                    this.setState({[dataType]:event.target.value});
                }
            }
            handleSubmit(){

            }
            render(){
                return (
                    <form onSubmit = {this.saveFromData}>
                        用户:<input onChange = {this.saveFromData('user')} type="text" name = "user"/>
                        密码:<input onChange = {this.saveFromData('pwd')} type="password" name = "pwd"/>
                    </form>
                )
            }
        }

        ReactDOM.render(<Loign/>,document.getElementById("app"))
    </script>
</body>
</html>

且input通过onChage实时更新数据到state中，为受控组件（类似vue的双向绑定）；即取即用，数据不做存储二次利用为非受控组件。
在这里插入图片描述
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>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src = "../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class Loign extends React.Component{
            state = {
                user:"",
                pwd:""
            }
            /* 
            高阶函数：如果一个函数符合下面2个规范中任何一个，那该函数就是高阶函数
            1.若A函数，接受的参数是一个函数，那么A就可以称之为高阶函数
            2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
            函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
            常见的高阶函数有：Promise、setTimeOut、arr.map()等等
            */
            // saveFromData(dataType){
            //     return ()=>{
            //         this.setState({[dataType]:event.target.value});
            //     }
            // }
            saveFromData(dataType,value){
                this.setState({[dataType]:value});
            }
            handleSubmit(){

            }
            render(){
                return (
                    <form onSubmit = {this.saveFromData}>
                        用户:<input onChange = {(event)=>{this.saveFromData('user',event.target.value)}} type="text" name = "user"/>
                        密码:<input onChange = {(event)=>{this.saveFromData('pwd',event.target.value)}} type="password" name = "pwd"/>
                    </form>
                )
            }
        }

        ReactDOM.render(<Loign/>,document.getElementById("app"))
    </script>
</body>
</html>

在这里插入图片描述
简化写法：

<!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>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src = "../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class Loign extends React.Component{
            state = {
                user:"",
                pwd:""
            }
            /* 
            高阶函数：如果一个函数符合下面2个规范中任何一个，那该函数就是高阶函数
            1.若A函数，接受的参数是一个函数，那么A就可以称之为高阶函数
            2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
            函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
            常见的高阶函数有：Promise、setTimeOut、arr.map()等等
            */
            // saveFromData(dataType){
            //     return ()=>{
            //         this.setState({[dataType]:event.target.value});
            //     }
            // }
            saveFromData(dataType,event){
                this.setState({[dataType]:event.target.value});
            }
            handleSubmit(){

            }
            render(){
                return (
                    <form onSubmit = {this.saveFromData}>
                        用户:<input onChange = {event=>this.saveFromData('user',event)} type="text" name = "user"/>
                        密码:<input onChange = {event=>this.saveFromData('pwd',event)} type="password" name = "pwd"/>
                    </form>
                )
            }
        }

        ReactDOM.render(<Loign/>,document.getElementById("app"))
    </script>
</body>
</html>

小徐也要努力鸭

关注

0
点赞
踩
1

收藏

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

1.高阶函数和函数的柯里化且input通过onChage实时更新数据到state中，为受控组件（类似vue的双向绑定）；即取即用，数据不做存储二次利用为非受控组件。2.不使用函数柯里化的方法简化写法：...
复制链接

扫一扫

专栏目录