高阶函数
<!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>helloReact</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
state = {
username: '',
password: ''
}
saveFormData = (key) => {
return (e) => {
this.setState({[key]: e.target.value})
}
}
handleSubmit = (e) => {
e.preventDefault()
const {username, password} = this.state
alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
用户名: <input onChange={this.saveFormData('username')} name="username"/>
密码: <input onChange={this.saveFormData('password')} name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>, document.getElementById('test'))
/*
高阶函数:如果遗憾函数符合下面2个规范中的任何一个,那该函数就是高阶函数
1、接收的参数是一个函数
2、调用的返回值是一个函数
函数的柯里化:
通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式
*/
</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>
</head>
<body>
<script>
// 不使用函数的柯里化
function sum (a, b, c) {
return a + b + c
}
const result = sum(1, 2, 3)
console.log(result) // 6
// 使用函数的柯里化
function sum1 (a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result1 = sum1(1)(2)(3)
console.log(result1) // 6
</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>helloReact</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
state = {
username: '',
password: ''
}
saveFormData = (key, e) => {
this.setState({[key]: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault()
const {username, password} = this.state
alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
用户名: <input onChange={e => this.saveFormData('username', e)} name="username"/>
密码: <input onChange={e => this.saveFormData('password', e)} name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>, document.getElementById('test'))
/*
页面中的所有输入类的dom都是非受控组件,现用现取
*/
</script>
</body>
</html>