理解react中的高阶组件和高阶函数

高阶组件

ES6中使用关键字class来使它的语法有和 类 相似的写法和功能，但是它的本质还是一个函数。
因此，高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件，返回一个新的组件。

比如下面这个Login组件，在该组件中使用了Form组件，由于需要用到form对象的getFieldDecorator 方法，因此Login组件中通过this.props要能访问到form对象，使用Form.create()返回一个高阶函数，将Login组件传给该高阶函数的参数，然后返回“包装过”的新组价，新的组件中就能访问到form对象。
还有其他地方，如this.props.history.replace(’/login’); history是路由组件中的属性，因此用withRouter(ComponentName)来封装组件生产新组件。

import React, { Component } from 'react'
import { Form, Input, Icon, Button } from 'antd';

class Login extends Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='login'>
                <section className='login-content'>
                    <Form onSubmit={this.login} className="login-form">
                        <Form.Item>
                            {
                            getFieldDecorator('username', {
                            initialValue: '',
                            rules: [
                            {required: true, whitespace: true, message: '必须输入用户名'}
                            ]
                            })(
                            <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            placeholder="用户名"/>)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                            getFieldDecorator('password',{
                            rules: [
                                {required: true, whitespace: true, message: '必须输入密码'}
                            ]
                            })(<Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password" placeholder="密码"/>)
                            }
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
    )
    }
}

const WarppedLoginForm = Form.create()(Login);

export default WarppedLoginForm;

高阶函数

高阶函数：接受的参数是函数或者返回值是函数
如数组遍历相关的（map，ruduce），定时器，Promise，高阶组件也是高阶函数
高阶函数的作用就是实现一个更加强大动态的功能

如setInterval：

window.setInterval("getmessage()",3000);
     
function getmessage(){
	window.alert("111111");
}

需要注意的是，下面的getFieldDecorator()返回的函数并不是高阶函数，因为Input 是一个标签（组件的实例）而不是组件

getFieldDecorator('password',{
      rules: [
          {validator: this.validatePwd}
      ]
  })(<Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
            type="password" placeholder="密码"/>)