高阶组件装饰器

高阶组件装饰器

 注意利用函数式组件进行化简！

import React from 'react';

//1 组件原型
class Reg extends React.Component{
    render(){
        return <_Reg service={service} />;
    }
}

//2 匿名组件
const Reg = class extends React.Component{
    render(){
        return <_Reg service={service} />;
    }
}

//3 提参数
function inject(Comp){
    return class extends React.Component{
        render(){
            return <Comp service={service} />;
        }
    }
}

//继续提参数
function inject(service,Comp){
    return class extends React.Component{
        render(){
            return <Comp service={service} />;
        }
    }
}

//4 props
function inject(obj,Comp){
    return class extends React.Component{
        render(){
            return <Comp {...obj} />;
        }
    }
}

//5 柯里化
function inject(obj){
    function wrapper(Comp){
        return class extends React.Component{
            render(){
                return <Comp {...obj} />;
            }
        }
    }
    return wrapper;
}

//变形 + 箭头函数化简 v1
const inject = obj => Comp => {
    class extends React.Component{
        render(){
            return <Comp {...obj} />;
        }
    }
}

//变形 + 箭头函数化简 + 函数式组件化简 v2
const inject = obj => Comp => {
    return () => <Comp {...obj} />;
}

//finally
const inject = ovj => Comp => props =>  <Comp {...obj}/>;
const inject = ovj => Comp => props =>  <Comp {...obj} {...props}/>;

 

import React from 'react';
const inject = obj => Comp => props => <Comp {...obj}{...props}/>;
export {inject};

//src/component/login.js修改如下：
import React from 'react';
import '../css/login.css';
import UserService from '../service/user';
import {Link,Redirect} from 'react-router-dom'
import {observer} from 'mobx-react';
import {message} from 'antd';
import 'antd/lib/message/style';
//新增
import {inject} from '../utils';


const service = new UserService();

//注意装饰器顺序
@inject({service})  //生成{service:service}对象
@observer
export default class Login extends React.Component{
    handleClick(event){
        event.preventDefault();
        let fm = event.target.form;
        this.props.service.login(
            fm[0].value,fm[1].value
        );
    }
    render(){
        console.log('in login.js')
        if (this.props.service.loggedin){
            return <Redirect to='/about' />; 
        }
        if (this.props.service.errMsg){
            message.info(this.props.service.errMsg,3,
                ()=> SetTimeout(()=>this.props.service.errMsg=''),1000);
        }
        
        return (
            <div className="login-page">
                <div className="form">
                    <form className="login-form">
                    <input type="text" placeholder="邮箱"/>
                    <input type="password" placeholder="密码"/>
                    <button onClick={this.handleClick.bind(this)}>登录</button>
                    <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                    </form>
                </div>
            </div>
        ); 
    }
}

//src/component/reg.js修改如下：
import React from 'react';
import {Redirect,Link} from 'react-router-dom';
import '../css/login.css'
import UserService from '../service/user';
import {observer} from 'mobx-react';
import {message} from 'antd';
import 'antd/lib/message/style';
//新增
import {inject} from '../utils';

const service = new UserService();

@inject({service})  //生成{service:service}对象并注入组件<Reg />
@observer
export default class Reg extends React.Component{
    handleClick(event){
        event.preventDefault();
        let fm = event.target.form;
        this.props.service.reg(fm[0].value,fm[1].value,fm[2].value);
    }

    render(){
        console.log('component reg!!')
        if(this.props.service.loggedin){
            return <Redirect to='/'/>;
        }
        if(this.props.service.errMsg){
            message.info(this.props.service.errMsg,3,()=>{
                setTimeout(()=>this.props.service.errMsg='',1000);
            })
        }
        return (
            <div className="login-page">
                <div className="form">
                    <form className="register-form">
                    <input type="text" placeholder="姓名"/>
                    <input type="text" placeholder="邮箱"/>
                    <input type="password" placeholder="密码"/>
                    <input type="password" placeholder="确认密码"/>
                    <button onClick={this.handleClick.bind(this)}>注册</button>
                    <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                    </form>
                </div>
            </div>
        ); 
    }
}