React高阶组件（表单）应用回顾

1. 首先介绍函数式编程：

function hello(){
    console.log('大家好，我是harry!')
}

function getWord(fn){
    return function(){
        console.log('大家好，我是林宇航');
        fn();
        console.log('大家好，我是猪猪侠')
    }
}

let h = getWord(hello);

h();

//打印结果：
大家好，我是林宇航
大家好，我是harry!
大家好，我是猪猪侠

2. 高阶组件的定义：

就是一个函数，这个函数传入一个组件，然后返回一个新的组件；为了代码的复用性，减少代码的冗余；“ 所谓的组件本质上都是函数 ” 

2-1. 高阶组件属性代理：

（1）普通高阶组件写法

class Hello extends Component{
    render(){
        return ( <h3> 深圳，你好！ </h3> )
    }
}


function WrapperHello(Comp){
    class WrapComp extends Component{
        render(){
            return ( 
                <div>
                    <h3> 高阶组件，你好！ </h3>  
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }

    return WrapComp;
}

Hello = WrapperHello(Hello);

<Hello></Hello>

//结果：
高阶组件，你好！
深圳，你好！

（2）ES7 装饰器写法：

function WrapperHello(Comp){
    class WrapComp extends Component{
        render(){
            return ( 
                <div>
                    <h3> 高阶组件，你好！ </h3>  
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }

    return WrapComp;
}

@WrapperHello
class Hello extends Component{
    render(){
        return ( <h3> 深圳，你好！ </h3> )
    }
}

//结果：
高阶组件，你好！
深圳，你好！

3. 高阶组件反向继承

function WrapperHello(Comp){
    class WrapComp extends Comp{

        componentDidMount(){
           //进行加载完成后的处理 
           console.log('高阶组件加载完成！');   
        }

        render(){
            return ( 
                <div>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }

    return WrapComp;
}

@WrapperHello
class Hello extends Component{
    render(){
        return ( <h3> 深圳，你好！ </h3> )
    }
}

<Hello></Hello>

4. 登录注册高阶组件封装

export default function LRForm(Comp){

	return class WrapFromComp extends Component{
		
		constructor(props){
			super(props);
			this.state = {};
		}

		handleChange = (k,v)=>{
			console.log(k,v);
	        this.setState({
	            [k]: v
	        })
	    }

		render(){
			return (
				<div>
					<Comp {...this.props} handleChange={this.handleChange} state={this.state}></Comp>
				</div>
			);
		}
	}
}

5. 表单数据封装的高阶组件调用：

import LRForm from ‘@/component/form/form.js';

@LRForm
class Login extends Component{
	//…
}

@LRForm
class Register extends Component{
	//…
}