用修饰器优雅的使用高阶组件

修饰器

什么是修饰器

一句话归纳：接受一个类做为参数的函数，用来修改类的行为。

参考阮一峰老师es6语法介绍

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

高阶组件

什么是高阶组件

一句话归纳：接受一个组件做为参数，返回一个组件的函数。

e.g.

// Target 是一个组件，它做为参数传给了Hoc这个函数
function Hoc(Target) {
  class Wrap extends Component {
    render() {
      return (
          <div className='wrap'>
            <Target />
          </div>
      );
    }
  }
  return Wrap;
}

使用高阶组件

import Hoc from './Hoc';

class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default Hoc(A); //在这里调用一下Hoc

让高阶组件接受其余参数

function Hoc(Target, className) {
  class Wrap extends Component {
    render() {
      return (
          <div className={className}>
            <Target />
          </div>
      );
    }
  }
  return Wrap;
}

//A.js
...
export default Hoc(A, 'wrap');

修饰器 + 高阶组件

使用无参数的高阶组件

import Hoc from './Hoc';

//这这里@一下，A就会被当作参数传给Hoc
@Hoc
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default A;

使用带参数的高阶组件

改写一下修饰器

function Hoc(className) {
  //由于修饰器是一个只接受一个参数的函数，因此咱们返回一个函数出来，它才是修饰器也是高阶组件
  //至关于执行 Hoc(className) 返回出来的才是修饰器
  return (Target) => {
    class Wrap extends Component {
      render() {
        return (
          <div className={className}>
          <Target />
          </div>
        );
      }
    }
    return Wrap;
  };
}

//A.js
@Hoc('wrap')
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default A;

//等同于
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default Hoc('wrap')(A);

到这里不知道小伙伴们看懂了没有。

总结

咱们一般使用Hoc来作一些公共的逻辑，或者向子组件注入一些属性，结合上修饰器，咱们能够让语法更加简洁，维护起来更加方便。