Une explication détaillée de l'abstraction entre les composants dans React

Cet article présente principalement une brève discussion sur l'abstraction entre les composants dans React. Maintenant, je le partage avec vous et vous donne une référence.

Quant à l'abstraction entre les composants que je souhaite apprendre aujourd'hui, je suis novice et je ne l'ai pas compris après l'avoir lu plusieurs fois. Cette fois, j'ai décidé de le découvrir. 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é.

mixin

Les caractéristiques de mixin se retrouvent largement dans divers langages orientés objet. En Ruby, le mot-clé include est mixin, qui consiste à mélanger un module dans un autre. module dans ou dans une 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 Le tableau 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 existe un chevauchement entre chaque méthode mixin et il existe une distinction entre les méthodes ordinaires et les méthodes de 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 de mixage 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

Ce qui précède est ce que j'ai compilé pour tout le monde, je j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser les sélecteurs de liens à trois niveaux dans les mini-programmes WeChat

Fermetures PHP et fonctions anonymes (tutoriel détaillé )

À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Comment implémenter l'actualisation de la liste déroulante dans l'applet WeChat effet?

Comment utiliser le plug-in de défilement numérique dans le mini programme WeChat

Quelles sont les compétences d'application de nomenclature en JS

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!