Explication détaillée de l'utilisation des composants d'ordre supérieur de mixin

Cet article présente principalement une brève discussion sur l'abstraction entre les composants dans React. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Concernant l'abstraction entre composants que je souhaite apprendre aujourd'hui, moi, novice, je ne l'ai pas compris après l'avoir lu plusieurs fois. . Dans la construction de composants, il existe généralement un type de fonction qui doit être partagé par différents composants. À l'heure actuelle, des concepts abstraits sont impliqués. Dans React, nous comprenons principalement les mixins et les composants d'ordre élevé. Les fonctionnalités

mixin

mixin sont largement présentes dans divers langages orientés objet Dans Ruby, le mot-clé include It. est un mixin, qui mélange un module dans un autre module ou classe.

Encapsuler la méthode mixin

const mixin = function(obj, mixins) {
 const newObj = obj
 newObj.prototype = Object.create(obj.prototype)
 for(let props in mixins) {
  newObj.prototype[props] = mixins[props]
 }
 return newObj
}
const BigMixin = {
 fly: () => {
  console.log('i can fly')
 }
}
const Big = function() {
 console.log('new big')
}
const FlyBig = mixin(Big , BigMixin)
const flyBig = new FlyBig()
FlyBig.fly() //'i can fly'

Pour la méthode mixin généralisée, toutes les méthodes de l'objet mixin sont montées sur l'objet d'origine par affectation pour réaliser le mixage de l'objet.

mixin dans React

React fournit des attributs mixin lors de l'utilisation de createClass pour créer des composants, tels que le PureRenderMixin officiel :

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
  mixins: [PureRenderMixin]
  
  render() {
    return <p>foo</foo>
  }
})

dans createClass Le array mixins est passé dans le paramètre object, qui encapsule les modules dont nous avons besoin. Le tableau mixins peut également ajouter plusieurs mixins Il y a un chevauchement entre chaque méthode mixin et les méthodes cycle de vie . .

Si vous implémentez deux méthodes courantes portant le même nom dans des mixins différents, elles ne seront pas écrasées dans React. Une erreur dans ReactClassInterface sera signalée dans la console, indiquant que vous avez essayé de la définir plusieurs fois dans le fichier. composant. **Par conséquent, les mixins des méthodes ordinaires de Chongming ne sont pas autorisés dans React. S'il s'agit d'une méthode définie par le cycle de vie de React, les méthodes du cycle de vie de chaque module seront superposées et exécutées séquentiellement**.

Nous voyons que le mixin utilisant createClass fait deux choses pour le composant :

1. Méthodes d'outils : Certaines méthodes de classe d'outils sont partagées pour le composant et peuvent être utilisées dans chaque composant.

2. Héritage du cycle de vie : les accessoires et l'état sont fusionnés. S'il existe de nombreux mixins pour définir le cycle du composantDidMount,

alors React les fusionnera très intelligemment. . mettre en œuvre.

CLASSE ES6 et décorateur

Maintenant, nous préférons utiliser la méthode de classe es6 pour créer des composants, mais elle ne prend pas en charge les mixins. Il n'y a pas de bonne solution dans la documentation officielle.

Decorator est une fonctionnalité définie dans ES 7, qui est similaire aux annotations en Java. Les décorateurs sont des méthodes utilisées au moment de l'exécution. Dans le redux ou dans d'autres frameworks de couche d'application, les décorateurs sont de plus en plus utilisés pour décorer les composants.

La bibliothèque core-decorator fournit aux développeurs des décorateurs pratiques, qui implémentent le @mixin que nous voulons. Il superpose les méthodes de chaque objet mixin sur le prototype de l'objet cible pour atteindre l'objectif du mixin.

import React, { Component } from 'react'
import { mixin } from 'core-decorator'
const PuerRender = {
  setTheme()
}
const Them = {
  setTheme()
}
@mixin(PuerRender, Them)
class MyComponent extends Component {
  render() {...}
}

Comme mentionné ci-dessus, decorator n'agit que sur les classes, et il agit également sur les méthodes. Il peut contrôler les propres attributs des méthodes.

Remarque : React 0.14 commence à supprimer le mixin

problème de mixin

détruit l'encapsulation du composant d'origine

la méthode mixin peut La méthode mix-in apporte de nouvelles fonctionnalités au composant, ainsi que de nouveaux accessoires et états, ce qui signifie qu'il existe des états invisibles que nous devons conserver. Les mixins peuvent également avoir des interdépendances, qui forment une chaîne de dépendances et s'influencent mutuellement.

1. Conflit de noms

2. Complexité accrue

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Méthode JS pour obtenir les N premières valeurs de couleur d'une image

Explication détaillée de graphiques et texte à l'aide de la méthode de rendu

L'applet utilise .getImageInfo() pour obtenir des informations sur l'image

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!