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

前端之家收集整理的这篇文章主要介绍了用修饰器优雅的使用高阶组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

修饰器

什么是修饰器

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

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

原文链接:https://www.f2er.com/react/303032.html

猜你在找的React相关文章