React---高阶函数和函数柯里化的理解

react

一、高阶函数

  如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

                1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。

                2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。

                   常见的高阶函数有:Promise、setTimeout、arr.map()等等

二、函数柯里化

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

                        function sum(a){

                            return(b)=>{

                                return (c)=>{

                                    return a+b+c

                                }

                            }

                        }

      const result = sum(1)(2)(3)

                 console.log(result);

三、案例

1. 使用函数柯里化实现

 1 <script type="text/babel">

2 //创建组件

3 class Login extends React.Component{

4 //初始化状态

5 state = {

6 username:'', //用户名

7 password:'' //密码

8 }

9

10 //保存表单数据到状态中

11 saveFormData = (dataType)=>{

12 return (event)=>{

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

14 }

15 }

16

17 //表单提交的回调

18 handleSubmit = (event)=>{

19 event.preventDefault() //阻止表单提交

20 const {username,password} = this.state

21 alert(`你输入的用户名是:${username},你输入的密码是:${password}`)

22 }

23 render(){

24 return(

25 <form onSubmit={this.handleSubmit}>

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

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

28 <button>登录</button>

29 </form>

30 )

31 }

32 }

33 //渲染组件

34 ReactDOM.render(<Login/>,document.getElementById('test'))

35 </script>

2. 不用函数柯里化实现

 1 <script type="text/babel">

2 //创建组件

3 class Login extends React.Component{

4 //初始化状态

5 state = {

6 username:'', //用户名

7 password:'' //密码

8 }

9

10 //保存表单数据到状态中

11 saveFormData = (dataType,event)=>{

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

13 }

14

15 //表单提交的回调

16 handleSubmit = (event)=>{

17 event.preventDefault() //阻止表单提交

18 const {username,password} = this.state

19 alert(`你输入的用户名是:${username},你输入的密码是:${password}`)

20 }

21 render(){

22 return(

23 <form onSubmit={this.handleSubmit}>

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

25 密码:<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>

26 <button>登录</button>

27 </form>

28 )

29 }

30 }

31 //渲染组件

32 ReactDOM.render(<Login/>,document.getElementById('test'))

33 </script>

 

以上是 React---高阶函数和函数柯里化的理解 的全部内容, 来源链接: utcz.com/z/382472.html

回到顶部