一.高阶函数及函数的柯里化
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="请输入用户名"/>
密码:<input onChange={this.saveFormData('password')} type = "password" name = "password" placeholder="请输入密码" />
<button >登录</button>
</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="请输入用户名"/>
密码:<input onChange={(event)=>{this.saveFormData('password',event.target.value)}} type = "password" name = "password" placeholder="请输入密码" />
<button >登录</button>
</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>