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{
	//…
}

 

展开阅读全文

没有更多推荐了,返回首页