Comment utiliser des composants abstraits dans React

Cette fois, je vais vous présenter l'utilisation abstraite des composants dans React. Quelles sont les précautions pour l'utilisation abstraite des composants dans React. Voici des cas pratiques, jetons un coup d'œil.

mixin

La fonctionnalité de mixin est largement présente dans divers langages orientés objet Dans Ruby, le mot-clé include est mixin, qui consiste à mélanger 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.

Mixins 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. Le tableau mixins peut également ajouter plusieurs mixins. Il y a un chevauchement entre chaque méthode mixin et cycle de vie Les méthodes sont différenciées. .

L'implémentation de deux méthodes courantes portant le même nom dans différents mixins ne sera pas écrasée dans React. Une erreur dans ReactClassInterface sera signalée dans la console, indiquant que vous avez essayé de définir une méthode plusieurs fois dans le 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**.

On voit que le mixin utilisant createClass fait deux choses pour la composition :

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

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

. Ensuite, React les fusionnera et les exécutera de manière très intelligente.

CLASSE ES6 et décorateur

Nous préférons désormais 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.

Les décorateurs sont une fonctionnalité définie dans ES 7, 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, le décorateur n'agit que sur les classes et agit également sur les méthodes. Il peut contrôler les propres attributs des méthodes.

Remarque : React 0.14 commence à supprimer les mixins

Problème de mixage

Détruit l'encapsulation des composants 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 une interdépendance. Sous cette forme, les chaînes de dépendance s'affecteront les unes les autres

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Complétion de l'adresse e-mail dans la zone de texte de l'invite JS

Comment obtenir la méthode $.ajax() depuis le serveur Obtenez les données json dans

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!