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

修饰器

什么是修饰器

一句话概括：接受一个类作为参数的函数，用来修改类的行为。

参考阮一峰老师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来做一些公共的逻辑，或者向子组件注入一些属性，结合上修饰器，我们可以让语法更加简洁，维护起来更加方便。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!