015.高阶函数-函数柯里化-一一网

高阶函数&柯里化

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

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

常见的高阶函数有：Promise、setTimeout、arr.map等

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Login extends React.Component{
            /*
                高阶函数：如果一个函数复合下面2个规范中任何一个，那函数就是高阶函数。
                        1. 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数
                        2. 若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。
                        常见的高阶函数有：Promise、setTimeout、arr.map等
                函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
            */
            // 初始化状态
            state={
                username:'',
                password:'',
            } 
            // 随着输入维护状态是受控组件 ref有性能上的缺陷 推荐使用受控组件
            handleSubmit=()=>{
                event.preventDefault()
                console.log('this',this)
                const {username,password} = this.state
                console.log(`用户名是${username},密码是${password}`)
            }
            // onChange后面是this.saveFormData时调用的是saveFormData函数
            // 后面是this.saveFormData('username')时调用的是saveFormData的返回值
            saveFormData = (type)=>{
                console.log('type',type)
                return (e)=>{
                    console.log('e',e)
                    this.setState({[type]:e.target.value})
                }
            }
            // userNameChange=(e)=>{
            //     console.log(e.target.value);
            //     this.setState({username:e.target.value})
            // }
            // passwordChange=(e)=>{
            //     console.log(e.target.value);
            //     this.setState({password:e.target.value})
            // }
            render(){
                return(
                    <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>
                )
            }
        }

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

鹅服烤斯不使用柯里化也能解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Login extends React.Component{
            /*
                高阶函数：如果一个函数复合下面2个规范中任何一个，那函数就是高阶函数。
                        1. 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数
                        2. 若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。
                        常见的高阶函数有：Promise、setTimeout、arr.map等
                函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
            */
            // 初始化状态
            state={
                username:'',
                password:'',
            } 
            // 随着输入维护状态是受控组件 ref有性能上的缺陷 推荐使用受控组件
            handleSubmit=()=>{
                event.preventDefault()
                console.log('this',this)
                const {username,password} = this.state
                console.log(`用户名是${username},密码是${password}`)
            }
            // onChange后面是this.saveFormData时调用的是saveFormData函数
            // 后面是this.saveFormData('username')时调用的是saveFormData的返回值
            saveFormData = (type,event)=>{
                // 柯里化写法
                // console.log('type',type)
                // return (e)=>{
                //     console.log('e',e)
                //     this.setState({[type]:e.target.value})
                // }

                // 不使用柯里化
                this.setState({[type]:event.target.value})

            }
            // userNameChange=(e)=>{
            //     console.log(e.target.value);
            //     this.setState({username:e.target.value})
            // }
            // passwordChange=(e)=>{
            //     console.log(e.target.value);
            //     this.setState({password:e.target.value})
            // }
            render(){
                return(
                    // <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>
                    // 不同柯里化的写法
                    <form onSubmit={this.handleSubmit}>
                        用户名<input onChange={event=>this.saveFormData('username',event)} type="text" name="username"/>
                        密码  <input onChange={event=>this.saveFormData('password',event)} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

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