React —— 高阶函数和函数柯里化

文章目录

• 一、高阶函数
• 二、函数柯里化
• 三、不用函数柯里化实现事件的绑定

---

一、高阶函数

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

• 若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
• 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

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

代码举例：

<script type="text/babel">
        class Person extends React.Component {
            state = {
                realname: '',
                age: ''
            }
            // 高阶函数的使用方法
            saveDate = (filed) => {
               return (event)=>{
                // es6中的语法知识
                this.setState({[filed]:event.target.value})
               }
            }
            submit = () => {
                event.preventDefault();//阻止默认事件
               let {realname,age} = this.state;
               console.log(realname,age);
            }
            render() {
                return (
                    <form action="">
                        姓名: <input type="text" onChange={this.saveDate('realname')} />
                        <br />
                        <br />
                        年龄: <input type="text" onChange={this.saveDate('age')} />
                        <br />
                        <br />
                        <button onClick={this.submit}>提交信息</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Person />, document.getElementById('root'));
    </script>

---

二、函数柯里化

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

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

三、不用函数柯里化实现事件的绑定

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