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