So verwenden Sie abstrakte Komponenten in React

Dieses Mal werde ich Ihnen die abstrakte Verwendung von Komponenten in React vorstellen. Was sind die Vorsichtsmaßnahmen für die abstrakte Verwendung von Komponenten in React?

Mischen

Die Funktion von Mixin ist in verschiedenen objektorientierten Sprachen weit verbreitet. In Ruby lautet das Schlüsselwort include mixin, das dazu dient, ein Modul in ein anderes Modul oder eine andere Klasse zu mischen.

Kapselungs-Mixin-Methode

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'

Bei der verallgemeinerten Mixin-Methode werden alle Methoden im Mixin-Objekt durch Zuweisung an das Originalobjekt angehängt, um die Mischung des Objekts zu realisieren.

Mixins in Reaktion

React stellt Mixin-Attribute bereit, wenn createClass zum Erstellen von Komponenten verwendet wird, wie zum Beispiel das offizielle PureRenderMixin:

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

Übergeben Sie die Array-Mixins im Objektparameter createClass, der die von uns benötigten Module kapselt. Es gibt Überschneidungen zwischen den einzelnen Mixin-Methoden und Methoden .

Die Implementierung zweier gemeinsamer Methoden mit demselben Namen in verschiedenen Mixins wird in React nicht überschrieben. In der Konsole wird ein Fehler in ReactClassInterface gemeldet, der darauf hinweist, dass Sie versucht haben, eine Methode mehrmals in der Komponente zu definieren. **Daher sind Mixins gewöhnlicher Chongming-Methoden in React nicht zulässig. Wenn es sich um eine durch den React-Lebenszyklus definierte Methode handelt, werden die Lebenszyklusmethoden jedes Moduls überlagert und nacheinander ausgeführt**.

Wir sehen, dass das Mixin mit createClass zwei Dinge für die Komposition bewirkt:

1. Tool-Methoden: Einige Tool-Methoden werden für Komponenten gemeinsam genutzt und können in jeder Komponente verwendet werden.

2. Vererbung des Lebenszyklus: Requisiten und Status werden zusammengeführt, und Mixins können Lebenszyklusmethoden zusammenführen. Wenn es viele Mixins gibt, um den ComponentDidMount-Zyklus zu definieren,

Dann wird React sie sehr intelligent zusammenführen und gemeinsam ausführen.

ES6-KLASSE und Dekorateur

Jetzt verwenden wir lieber die Klassenmethode es6 zum Erstellen von Komponenten, diese unterstützt jedoch keine Mixins. In der offiziellen Dokumentation gibt es keine gute Lösung.

Dekoratoren sind eine in ES 7 definierte Funktion, ähnlich wie Annotationen in Java. Dekoratoren sind Methoden, die zur Laufzeit verwendet werden. In Redux- oder anderen Anwendungsschicht-Frameworks werden Dekoratoren zunehmend zum Dekorieren von Komponenten verwendet.

Die Core-Decorator-Bibliothek stellt Entwicklern einige praktische Dekoratoren zur Verfügung, die das von uns gewünschte @mixin implementieren. Es überlagert die Methoden jedes Mixin-Objekts mit dem Prototyp des Zielobjekts, um den Zweck des Mixins zu erreichen.

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

Wie oben erwähnt, wirkt der Dekorator nur auf Klassen und kann auch die eigenen Attribute von Methoden steuern.

Hinweis: React 0.14 beginnt mit dem Entfernen von Mixins

Mixin-Problem

Zerstörte die Kapselung der Originalkomponenten

Die Mixin-Methode kann Methoden mischen, um der Komponente neue Funktionen hinzuzufügen, und sie bringt auch neue Requisiten und Zustände mit sich, was bedeutet, dass es einige unsichtbare Zustände gibt, die wir beibehalten müssen. Mixins können auch gegenseitige Abhängigkeiten aufweisen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Vervollständigung der E-Mail-Adresse im JS-Eingabeaufforderungstextfeld

So erhalten Sie die Methode $.ajax() vom Server Holen Sie sich JSON-Daten in

Das obige ist der detaillierte Inhalt vonSo verwenden Sie abstrakte Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!