react学习高阶函数与函数柯里化

34 阅读1分钟

​本文已参与「新人创作礼」活动,一起开启掘金创作之路

第一节:高阶函数

定义:如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数

·若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数 ·若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数 常见的高阶函数有:Promise、setTimeout()、arr.map()等等

代码举例:

 

class Demo extends React.Component{

                //初始化状态

               state = {username:'',password:''};

   

   savedata = (dataType)=>{

   

   return (event)=>{

   

   this.setState({[dataType]:event.target.value});

   

   }

   

   }

             showdata = (event)=>{

 event.preventDefault();//阻止默认事件

let {username,password} = this.state;

alert(username + '-' + password);

 }

 render(){

 return (

    <form action="" onSubmit={this.showdata}>

  用户名: <input onChange={this.savedata('username')} type="text" name="username"/><br/>

   密    码:<input onChange={this.savedata('password')} type="password" name="password"/><br/>

   <input type="submit" name="dosubmit" value="提交信息"/>

</form>

 );

 }

 }

 ReactDOM.render(<Demo/>,document.getElementById("hello"));

 

第二节:函数柯里化

 

通过函数调用继续返回函数的方式,实现对此接受参数最后统一处理的函数编码形式。

 

function sum(a){ return (b)=>{return c=>{ return a+b+c} }}

 

 

第三节:不用函数柯里化实现事件的绑定

 

<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>