Explication détaillée du décorateur dans es7 (avec exemples)

Cet article vous apporte une explication détaillée du Decorator dans es7 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Connaissance de base de Decorator

On peut le voir dans de nombreux frameworks et bibliothèques, notamment React, Redux et mobx. Alors, qu'est-ce qu'un décorateur ?

Decorator est une fonction utilisée pour modifier le comportement d'une classe. Je ne comprends pas très bien ce concept abstrait, il vaut donc mieux regarder le code pour l'expliquer de manière plus pratique.

//定义一个函数，也就是定义一个Decorator，target参数就是传进来的Class。
//这里是为类添加了一个静态属性
function addAge(target) {
  target.age = 2;
}

//在Decorator后面跟着Class，Decorator是函数的话，怎么不是addAge(MyGeekjcProject)这样写呢？
//我只能这样理解：因为语法就这样，只要Decorator后面是Class，默认就已经把Class当成参数隐形传进Decorator了(就是所谓的语法糖)。
@addAge
class MyGeekjcProject {}

console.log(MyGeekjcProject.age) // 2

1.1 Passer des paramètres pour modifier les classes

Mais que dois-je faire si la méthode ci-dessus ne passe qu'une seule classe en paramètre et qu'elle n'est pas assez flexible ?
Nous pouvons envelopper une fonction dans la couche externe, tant que le résultat final est un décorateur, peu importe le nombre de fonctions que vous enveloppez et le nombre de paramètres que vous transmettez.

function addAge(age) {
  return function(target) {
    target.age = age;
  }
}

//注意这里，隐形传入了Class，语法类似于addAge(2)(MyGeekjcProject)
@testable(2)
class MyGeekjcProject {}
MyGeekjcProject.age // 2

@addAge(3)
class MyGeekjcProject {}
MyGeekjcProject.age // 3

1.2 Attributs des classes modifiées

Ce qui suit est l'objet prototype de la classe modifiée

function description(target) {
  target.prototype.url = 'https://www.geekjc.com';
}

@description
class MyGeekjcProject {}

let geekjc = new MyGeekjcProject();
geekjc.url // https://www.geekjc.com

Le concept est grossièrement compris. Les modificateurs ne peuvent pas seulement modifier. classes; Attributs des classes modifiées

//假如修饰类的属性则传入三个参数，对应Object.defineProperty()里三个参数，具体不细说
//target为目标对象，对应为Class的实例
//name为所要修饰的属性名，这里就是修饰器紧跟其后的name属性
//descriptor为该属性的描述对象
//这里的Decorator作用是使name属性不可写，并返回修改后的descriptor
function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Concernant Object.defineProperty(), vous pouvez lire l'article pour apprendre Object.defineProperty

Regardez un exemple complexe

//定义一个Class并在其add上使用了修饰器
class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

//定义一个修饰器
function log(target, name, descriptor) {
  //这里是缓存旧的方法，也就是上面那个add()原始方法
  var oldValue = descriptor.value;

  //这里修改了方法，使其作用变成一个打印函数
  //最后依旧返回旧的方法，真是巧妙
  descriptor.value = function() {
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();
math.add(2, 4);

Après avoir lu ce qui précède Si vous regardez le code, vous saurez à quoi sert le décorateur. Les décorateurs peuvent non seulement modifier le comportement d'une classe, mais également modifier les attributs de la classe.

2. Composants d'ordre élevé de React

Plus communément décrits comme suit, les composants d'ordre élevé sont transmis en enveloppant (encapsulés) les composants React, et après une série de traitement, Enfin, un composant React relativement amélioré est renvoyé pour que d'autres composants puissent l'appeler.

3. Implémentez un composant d'ordre supérieur

Implémentons le composant (fonction) d'ordre élevé le plus simple, qui accepte un composant React, l'encapsule et renvoie .

export default function withDescription(WrappedComponent) {
  return class HOC extends Component {
    render() {
      return <div>
        <div>
          极客教程(https://www.geekjc.com)致力于推广各种编程语言技术，也为了未来数字化世界，让人更容易找到操作数字化的方式，为了未来而生的编程学习平台，
          大部分资源是完全免费的，并且会根据当前互联网的变化实时更新本站内容。
        </div>
        <wrappedcomponent></wrappedcomponent>
      </div>
    }
  }
}

Dans d'autres composants, nous référençons ce composant d'ordre supérieur pour l'améliorer.

@withDescription
export default class Geekjc extends Component {
  render() {
    return (
      <div>
        我是一个普通组件
      </div>
    );
  }
}

Le décorateur dans ES7 est utilisé ici (voir Décorateur dans la première section) pour améliorer l'élégance de l'écriture, mais en fait ce n'est que du sucre syntaxique. La méthode d'écriture suivante est également possible.

const EnhanceDemo = withDescription(Geekjc);

Ensuite, observez les changements qui ont eu lieu dans l'arborescence des composants React. Comme le montre la figure, vous pouvez constater que le composant Geekjc est enveloppé par le composant HOC, ce qui est conforme aux attentes. de composants d'ordre élevé, c'est-à-dire que les composants sont enveloppés couche par couche. Il lève comme un oignon.

Mais le problème qui en découle est que si ce composant d'ordre élevé est utilisé plusieurs fois, alors lors du débogage, vous verrez qu'il y a beaucoup de HOC, donc une petite optimisation doit être faite à ce moment-là, c'est-à-dire qu'une fois le composant d'ordre élevé enveloppé, son nom d'origine doit être conservé.

Réécrivons le code du composant d'ordre supérieur ci-dessus et ajoutons des getDisplayName fonctions et attributs statiques displayName Observons DOM Tree à ce moment.

function getDisplayName(component) {
  return component.displayName || component.name || 'Component';
}
export default function (WrappedComponent) {
  return class HOC extends Component {
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`
    render() {
      return <div>
        <div>
          极客教程(https://www.geekjc.com)致力于推广各种编程语言技术，也为了未来数字化世界，让人更容易找到操作数字化的方式，为了未来而生的编程学习平台，
          大部分资源是完全免费的，并且会根据当前互联网的变化实时更新本站内容。
        </div>
        <wrappedcomponent></wrappedcomponent>
      </div>
    }
  }
}

À ce stade, le nom du composant d'origine s'affiche correctement dans l'arborescence DOM.

Dans cet exemple simple, le composant d'ordre supérieur ne fait qu'une seule chose, qui consiste à ajouter un style de titre au composant encapsulé. Ce composant d'ordre supérieur peut être utilisé sur n'importe quel composant nécessitant d'ajouter cette logique, et il doit uniquement être modifié par ce composant d'ordre supérieur.

On peut voir de là que la fonction principale des composants d'ordre élevé est d'encapsuler et d'abstraire la logique commune des composants, afin que cette partie de la logique puisse être mieux réutilisée entre les composants.

4. Utilisation avancée des composants de haut niveau

4.1 Paramètres des composants

En prenant l'exemple ci-dessus comme exemple, ce composant de haut niveau affiche uniquement des informations sur la description du site Web, mais pour une meilleure abstraction, cette description doit être paramétrable et appelée comme suit.

@withDescription('欢迎大家访问收藏(https://www.geekjc.com)')
export default class Geekjc extends Component {
  render() {
    return (
      //...
    );
  }
}

withDescription doit être réécrit sous la forme suivante, qui accepte un paramètre et renvoie un composant (fonction) d'ordre supérieur.

export default function (description) {
  return function (WrappedComponent) {
    return class HOC extends Component {
      render() {
        return <div>
          <div>
            {description
              ?description
              : '我是描述'}
          </div>
          <wrappedcomponent></wrappedcomponent>
        </div>
      }
    }
  }
}

L'utilisation d'ES6 peut être plus concise.

export default(description) => (WrappedComponent) => class HOC extends Component {
  render() {
    return <div>
      <div>
        {description
          ? description
          : '我是描述'}
      </div>
      <wrappedcomponent></wrappedcomponent>
    </div>
  }
}

Comme vous pouvez le voir sur l'image, les paramètres transmis ont été reflétés dans l'arborescence DOM.

Curry
Concept : transmettre seulement une partie des paramètres de la fonction pour l'appeler, et la laisser renvoyer une fonction pour gérer les paramètres restants.
Signature de fonction : fun(params)(otherParams)
Application : Dans React, grâce au curry, nous pouvons obtenir différents composants d'ordre supérieur en passant différents paramètres.

4.2 Méthode basée sur le proxy d'attribut

Le proxy d'attribut est la manière la plus courante d'utiliser des composants d'ordre élevé. Les composants d'ordre supérieur décrits ci-dessus sont de cette manière. Il effectue certaines opérations pour transmettre les accessoires du composant encapsulé et les accessoires nouvellement générés à ce composant, appelé proxy de propriété.

export default function withHeader(WrappedComponent) {
  return class HOC extends Component {
    render() {
      const newProps = {
        test:'hoc'
      }
      // 透传props，并且传递新的newProps
      return <p>
        <wrappedcomponent></wrappedcomponent>
      </p>
    }
  }
}

4.3 Méthode basée sur l'héritage inverse

Le composant React renvoyé de cette manière hérite du composant passé, il peut donc accéder à plus de zones et d'autorisations, et est relativement C'est plus comme une intrusion une organisation et la modifier qu'une approche de proxy d'attribut. Pour plus de détails, vous pouvez vous référer aux liens fournis en annexe pour une étude approfondie.

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 可以方便地得到state，做一些更深入的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}

4.4 组合多个高阶组件

上述高阶组件为React组件增强了一个功能，如果需要同时增加多个功能需要怎么做？这种场景非常常见，例如我既需要增加一个组件标题，又需要在此组件未加载完成时显示Loading。

@withDescription
@withLoading
class Demo extends Component{

}

使用compose可以简化上述过程，也能体现函数式编程的思想。

const enhance = compose(withHeader,withLoading);
@enhance
class Demo extends Component{

}

组合 Compose
compose可以帮助我们组合任意个（包括0个）高阶函数，例如compose(a,b,c)返回一个新的函数d，函数d依然接受一个函数作为入参，只不过在内部会依次调用c,b,a，从表现层对使用者保持透明。
基于这个特性，我们便可以非常便捷地为某个组件增强或减弱其特征，只需要去变更compose函数里的参数个数便可。

compose函数实现方式有很多种，这里推荐其中一个recompact.compose，详情见下方参考类库，也可以看我之前写的一篇文章reduce与redux中compose函数

5. 与父组件区别

高阶组件作为一个函数，它可以更加纯粹地关注业务逻辑层面的代码，比如数据处理，数据校验，发送请求等，可以改善目前代码里业务逻辑和UI逻辑混杂在一起的现状。父组件则是UI层的东西，我们先前经常把一些业务逻辑处理放在父组件里，这样会造成父组件混乱的情况。为了代码进一步解耦，可以考虑使用高阶组件这种模式。

6. 开源的高阶组件使用

6.1 recompact

recompact提供了一系列使用的高阶组件，可以增强组件的行为，可以利用此库学习高阶组件的写法。

import recompact from 'recompact'
import { pure, withProps } from 'recompact'

const enhance = recompact.compose(
  withProps({ className: 'beautiful' }),
  pure,
)
@enhance
class Demo extends Component{

}

6.2 React Sortable

通过使用此库提供的高阶组件，可以方便地让列表元素可拖动。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!