ES7装饰器、高阶函数与类

在使用装饰者模式的时候，考虑过几个方案

1. ES7的Decorator
2. 高阶函数+类

Decorator

参考文章：探秘Decorator、FED的Decorator、Object.defineProperty用法

function decorateArmour(target, key, descriptor) {
  const method = descriptor.value;
  let moreDef = 100;
  let ret;
  descriptor.value = (...args)=>{
    args[0] += moreDef;
    ret = method.apply(target, args);
    return ret;
  }
  return descriptor;
}

其中，target是需要修改的对象；key是对象中的值；descriptor包含着这个值的内容，包括value、是否可读、是否可遍历等。例如Decorator用于一个类的函数上，那么target就是这个类、key就是这个函数名、descriptor.value就是这个函数。

例如decorator，可以给每个函数（类）加上一些公用逻辑。但是有一个没有办法的就是decorator内部无法拿到函数的上下文（因为Decorator的运行上下文是window）。

高阶函数（组件）

参考文章：高阶函数写法

const TabDecorator = (DefaultComponent) => class extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        prodOptions: this.props.prodOptions
    }
    render() {
        return (
            <div>
                <Tab activeIndex={index} onChange={this.changeHandler}>
                    {tabList}
                Tab>
                <DefaultComponent {...this.props} prodOptions={prodOptions} tabOptions={tabOptions} />
            div>
        );
    }
};
export default TabDecorator;

调用的时候：

    render() {
        const ResaleHOCTab = TabDecorator(ProductList);
        return (
            <div className="mscc-hoc-tab">
                <ResaleHOCTab list={this.props.list} prodOptions={this.props.prodOptions} subTab={this.props.subTab} />
            div>
        );
    }

最内层的ProductList只负责展示，load数据以及翻页。Tab负责传递参数给ProductList。外层的Tab导航功能，则是通过一个HOC函数赋予，通过TabDecorator(ProductList)方法获得一个带有Tab切换功能的ProductList组件。这样的做法使得重用的业务逻辑隐藏在了HOC函数。

其实这样类似于高阶函数的做法，差别只是高阶函数接收一个函数，然后返回一个函数。而高阶组件则是接收一个组件，最后返回另一个组件。