015.高阶函数-函数柯里化
高阶函数&柯里化
高阶函数：若是一个函数复合下面2个规范中任何一个，那函数就是高阶函数。javascript
- 若A函数，接收的参数是一个函数，那么A就能够称为高阶函数
- 若A函数，调用的返回值依然是一个函数，那么A就能够称为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map等html
函数的柯里化：经过函数调用继续返回函数的方式，实现屡次接收参数最后统一处理的函数编码形式。java
<!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>
复制代码
鹅服烤斯 不使用柯里化也能解决react
<!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>
复制代码
相关文章
- 1. 偏函数、高阶函数、柯里化、匿名函数
- 2. js 高阶函数之柯里化
- 3. Scala高阶函数、闭包、柯里化
- 4. js高阶函数应用—函数柯里化和反柯里化(二)
- 5. js高阶函数应用—函数柯里化和反柯里化
- 6. 高阶函数应用 —— 柯里化与反柯里化
- 7. Python高阶函数及函数柯里化
- 8. 柯里化函数---高阶函数编程
- 9. JS高阶函数与函数柯里化
- 10. 从 ES6 高阶箭头函数理解函数柯里化
- 更多相关文章...
- • Scala 函数柯里化(Currying) - Scala教程
- • Scala 高阶函数 - Scala教程
- • Flink 数据传输及反压详解
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章