Detaillierte Erläuterung der Verwendung von Mixin-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 verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen.

Was die Abstraktion zwischen Komponenten betrifft, die ich heute lernen möchte, habe ich als Anfänger 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

Mixin-Funktionen sind in verschiedenen objektorientierten Sprachen weit verbreitet. In Ruby ist das Schlüsselwort include enthalten ist ein Mixin, das ein Modul in ein anderes Modul oder eine andere Klasse mischt.

Kapseln Sie die 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'

Für die verallgemeinerte 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 z. B. das offizielle PureRenderMixin:

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

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

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

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall gelesen haben Weitere spannende Informationen finden Sie in dieser Artikelmethode. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Methode zum Erhalten der Top-N-Farbwerte eines Bildes

Detaillierte Erläuterung von Grafiken und Text mit der Render-Methode

Das Applet verwendet .getImageInfo(), um Bildinformationen zu erhalten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Mixin-Komponenten höherer Ordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!