美文网首页
高阶组件装饰器 演变过程如下:

高阶组件装饰器 演变过程如下:

作者: 一个被程序员耽误的厨师 | 来源:发表于2019-11-27 16:34 被阅读0次

    import React from 'react'
    // 1 原始版本
    class Reg extends React.Component{
    render(){
    return <_Reg service={service} />
    }
    }

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

    // 3 inject(Comp) 返回的是类定义,提出参数Comp
    function inject(Comp){
    return class extends React.Component{
    render(){
    return <Comp service={service} />
    }
    }
    }

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

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

    // 6 柯里化
    function inject(obj){
    function wra(Comp){ // 这里可以再次简化 变成函数,返回函数定义
    return class extends React.Component{
    render(){
    return <Comp {...obj} />
    };
    };
    };
    return wra; // 只是返回函数定义
    }

    // 7
    function inject(obj){
    return function wra(Comp){
    return class extends React.Component{
    render(){
    return <Comp {...obj} />
    };
    };
    };
    }

    // 8 箭头函数
    const inject = obj =>{
    return Comp => {
    return class extends React.Component{
    render(){
    return <Comp {...obj} />
    };
    };
    };
    }

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

    // 10 函数式组件简化
    const inject = obj => Comp =>{
    return props => <Comp {...obj} />;
    }

    // 11 最终版
    const inject = obj => Comp => props => <Comp {...obj} {...props}/>;

    相关文章

      网友评论

          本文标题:高阶组件装饰器 演变过程如下:

          本文链接:https://www.haomeiwen.com/subject/toopwctx.html