react es6 装饰器

作者:frank 发表日期:2016-04-24 11:24:34 更新日期:2016-04-24 11:28:20 分类:猿文色

摘要

  如何使用es6装饰器?

正文

  ES6不支持Mixins,但是ES7支持Decorator,使用Decorator可以实现Mixins功能。Decorator本质上是一个高阶函数(高阶组件),在面向对象的语言中被定义为一个包装类。也就是说,使用Decorator,会为React组件添加一些通用的新功能。

  在React中,Decorator定义为一个函数,这个函数将一个组件A作为参数,并且重新render一个以A为基础的组件。此时只需要在A组件定义的时候加上@Decorator。

Component => {
  constructor(props) {
    super(props);
    ...
  }

  ...

  render() {
    <Component {...this.props} ... />
  }
}

  有些时候需要使用this.context,此时应该手动将contextTypes传入Decorator。此时需要在A组件定义的时候加上@Decorator(contextTypes, context)。

(contextTypes = {}, context = {}) => Component => {
  static childContextTypes = contextTypes;
  static contextTypes = contextTypes;

  constructor(props) {
    super(props);
    ...
  }

  ...

  render() {
    <Component {...this.props} ... />
  }
}

  可以在Decorator中定义通用函数,将此函数作为props传入A组件中,此时A组件可以通过this.props.doSomething()使用此函数。

doSomething() {
  ...
}

render() {
  <Component {...this.props} 
    doSomething={this.doSomething.bind(this)} />
}

  也可以重新封装A组件。

render() {
  <Wrap ...>
    <Component {...this.props} ... />
  </Wrap>
}

  Decorator不但可以装饰组件类,还可以装饰函数,多个装饰器也可以同时使用装饰同一个组件类,但是要保证每次装饰后不影响源组件的基本功能。

  Decorator虽好,但是在使用之前还是要深思熟虑,props的来源会增加代码阅读和维护的难度,尤其是使用多个Decorator的时候。Decorator的使用对A来说应该是透明的,不能影响A的基本功能。