高阶组件装饰器演变过程

高阶组件装饰器

• 装饰器整个函数的演变过程如下：

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

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}/>;

• 新建src/utils.js，放入以下内容

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>
 ); 
    }
}

https://www.cnblogs.com/xiaoshayu520ly/p/11442822.html