reactjs高阶函数和函数柯里化
生活随笔
收集整理的這篇文章主要介紹了
reactjs高阶函数和函数柯里化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
高階函數、函數柯里化
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>高階函數_函數柯里化</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//#region /* 高階函數：如果一個函數符合下面2個規范中的任何一個，那該函數就是高階函數。1.若A函數，接收的參數是一個函數，那么A就可以稱之為高階函數。2.若A函數，調用的返回值依然是一個函數，那么A就可以稱之為高階函數。常見的高階函數有：Promise、setTimeout、arr.map()等等函數的柯里化：通過函數調用繼續返回函數的方式，實現多次接收參數最后統一處理的函數編碼形式。 function sum(a){return(b)=>{return (c)=>{return a+b+c}}}*///#endregion//創建組件class Login extends React.Component{//初始化狀態state = {username:'', //用戶名password:'' //密碼}//保存表單數據到狀態中saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表單提交的回調handleSubmit = (event)=>{event.preventDefault() //阻止表單提交const {username,password} = this.statealert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)}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"><title>2_不用函數柯里化的實現</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創建組件class Login extends React.Component{//初始化狀態state = {username:'', //用戶名password:'' //密碼}//保存表單數據到狀態中saveFormData = (dataType,event)=>{this.setState({[dataType]:event.target.value})}//表單提交的回調handleSubmit = (event)=>{event.preventDefault() //阻止表單提交const {username,password} = this.statealert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)}render(){return(<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> 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的reactjs高阶函数和函数柯里化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： reactjs组件的生命周期
- 下一篇： reactjs中收集表单数据：非受控组件