Explication des exemples abstraits entre les composants dans React

Dans la construction de composants, il existe généralement un type de fonction qui doit être partagé par différents composants. Cela implique des concepts abstraits. Dans React, nous comprenons principalement les mixins et les composants d'ordre supérieur. 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 et jetons un œil. J'espère que cela pourra aider tout le monde.

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 Dans un autre module, ou dans une classe.

Encapsuler les méthodes 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 les méthodes mixin généralisées, les méthodes de l'objet mixin reçoivent toutes des valeurs. monté sur l'objet original pour réaliser le mélange des objets.

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>
  }
})

Transmettez le tableau mixins dans le paramètre d'objet createClass, qui encapsule les modules dont nous avons besoin. Plusieurs mixins peuvent également être ajoutés au tableau mixins, et il existe des différences entre chaque méthode mixin. Chevauchement, il existe une distinction entre les méthodes ordinaires et les méthodes du 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. Les mixins peuvent fusionner les méthodes du cycle de vie pour définir le cycle du composantDidMount,

alors React sera très. intelligents. Ils sont fusionnés et exécutés ensemble.

CLASSE ES6 et décorateur

Nous recommandons désormais d'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 ci-dessus, le décorateur n'agit que sur les classes, et é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 mélanger des méthodes pour apporter de nouvelles fonctionnalités au composant, et elle apportera également de nouveaux accessoires et de nouveaux états, ce qui signifie qu'il existe des états invisibles que nous devons maintenir. 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

Recommandations associées :

Quelles sont les façons d'écrire des composants dans React

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!