reactjs高阶函数和函数柯里化

叁歲伎倆 2023-10-02 18:07 9阅读 0赞

### 高阶函数、函数柯里化 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>高阶函数_函数柯里化</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>
    
    	<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.state
    				alert(`你输入的用户名是：${ 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>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

### 不用函数柯里化的实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>2_不用函数柯里化的实现</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>
    
    	<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.state
    				alert(`你输入的用户名是：${ 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>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8f9fd856bb344460861733ca6e1e3aea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16