高階函數:若是一個函數複合下面2個規範中任何一個,那函數就是高階函數。javascript
常見的高階函數有: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>
複製代碼