Erläuterung abstrakter Beispiele zwischen Komponenten in React

Bei der Komponentenkonstruktion gibt es normalerweise einen Funktionstyp, der von verschiedenen Komponenten gemeinsam genutzt werden muss. Dabei handelt es sich um abstrakte Konzepte. In React verstehen wir hauptsächlich Mixins und Komponenten höherer Ordnung. Dieser Artikel führt hauptsächlich eine kurze Diskussion der Abstraktion zwischen Komponenten in React ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Mixin

Die Eigenschaften von Mixin sind in verschiedenen objektorientierten Sprachen weit verbreitet. In Ruby lautet das Schlüsselwort „include“ mixin, was „a“ bedeutet Modul in In ein anderes Modul oder in eine Klasse.

Mixin-Methoden kapseln

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'

Für verallgemeinerte Mixin-Methoden werden den Methoden im Mixin-Objekt Werte zugewiesen am Originalobjekt montiert, um die Vermischung von Objekten zu erreichen.

Mixin in React

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. Dem Mixins-Array können auch mehrere Mixins hinzugefügt werden, und es gibt Unterschiede zwischen den einzelnen Mixin-Methoden. Bei Überschneidungen wird zwischen gewöhnlichen Methoden und Lebenszyklusmethoden unterschieden.

Wenn Sie zwei gängige Methoden mit demselben Namen in verschiedenen Mixins implementieren, werden diese in React nicht überschrieben. In der Konsole wird ein Fehler in ReactClassInterface gemeldet, der darauf hinweist, dass Sie mehrmals versucht haben, ihn zu definieren Komponente. **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 Komponente bewirkt:

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

2. Lebenszyklusvererbung: Mixins können Lebenszyklusmethoden zusammenführen,

dann ist React sehr wichtig intelligent. Sie werden zusammengeführt und ausgeführt.

ES6-KLASSE und Dekorator

Jetzt empfehlen wir die Verwendung der ES6-Klassenmethode zum Erstellen von Komponenten, diese unterstützt jedoch keine Mixins. In der offiziellen Dokumentation gibt es keine gute Lösung.

Decorator ist eine in ES 7 definierte Funktion, die Annotationen in Java ähnelt. 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 wirkt der Dekorator nur auf Klassen und auch auf Methoden. Er kann die eigenen Attribute von Methoden steuern.

Hinweis: Bei React 0.14 beginnt das Mixin-Stripping.

Mixin-Problem

zerstört die Kapselung der ursprünglichen Komponente

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, die eine Kette von Abhängigkeiten bilden und sich gegenseitig beeinflussen.

1. Namenskonflikt

2. Erhöhte Komplexität

Verwandte Empfehlungen:

Wie kann man Komponenten in React schreiben?

Das obige ist der detaillierte Inhalt vonErläuterung abstrakter Beispiele zwischen Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!