Eine detaillierte Erklärung der Abstraktion zwischen Komponenten in React

Dieser Artikel führt hauptsächlich eine kurze Diskussion der Abstraktion zwischen Komponenten in React ein. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Was die Abstraktion zwischen Komponenten betrifft, die ich heute lernen möchte, bin ich ein Anfänger und habe sie nach mehrmaligem Lesen noch nicht herausgefunden. Diesmal habe ich beschlossen, es herauszufinden. Bei der Komponentenkonstruktion gibt es normalerweise einen Funktionstyp, der von verschiedenen Komponenten gemeinsam genutzt werden muss. In React verstehen wir hauptsächlich Mixins und Komponenten höherer Ordnung.

mixin

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

Mixin-Methode 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'

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

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

im createClass-Objektparameter Übergeben Sie das Array-Mixin, das die von uns benötigten Module kapselt. Das Mixins-Array kann auch mehrere Mixins hinzufügen. Es gibt Überschneidungen zwischen den einzelnen Mixin-Methoden und es 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. Wenn es viele Mixins gibt, um den ComponentDidMount-Zyklus zu definieren,

dann führt React sie sehr intelligent zusammen . umsetzen.

ES6-KLASSE und Dekorator

Jetzt bevorzugen wir die Verwendung der ES6-Klassenmethode zum Erstellen von Komponenten, sie 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 erwähnt, wirkt der Dekorator nur auf Klassen und kann auch die eigenen Attribute von Methoden steuern.

Hinweis: Reagieren Sie auf 0,14 und beginnen Sie mit dem Mixin-Stripping

Mixin-Problem

zerstört die Kapselung der ursprünglichen Komponente

Mixin-Methode kann Die Mischmethode bringt neue Funktionen in die Komponente sowie neue Requisiten und Zustände, 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

Das Obige habe ich für alle zusammengestellt, ich Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verwenden Sie dreistufige Verknüpfungsselektoren in WeChat-Miniprogrammen

PHP-Schließungen und anonyme Funktionen (Details Tutorial )

Informationen zu benutzerdefinierten Ereignissen in Vue-Komponenten (ausführliches Tutorial)

So implementieren Sie das Listen-Pulldown-Aktualisierungs-Pullup im WeChat-Applet Loading Wirkung?

So verwenden Sie das digitale Scroll-Plug-in im WeChat-Miniprogramm

Was sind die Stücklistenanwendungsfähigkeiten in JS

Das obige ist der detaillierte Inhalt vonEine detaillierte Erklärung der Abstraktion zwischen Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!