Dieser Artikel enthält eine detaillierte Erklärung der funktionalen Unterkomponenten und Komponenten höherer Ordnung in React. Ich hoffe, dass er für Freunde hilfreich ist.
Nachdem sie mit React-Projekten in Berührung gekommen sind, sollten die meisten Menschen HOC (High-Order-Components) und FaCC (Functions as Child Components) bereits verstanden oder verwendet haben, da diese beiden Muster weit verbreitet sind Die meisten reagieren auf Open-Source-Bibliotheken. Beispielsweise ist withRouter in React-Router eine typische Komponente höherer Ordnung, die eine Komponente akzeptiert und eine andere erweiterte Komponente zurückgibt. Bewegung in Reaktionsbewegung ist eine typische FaCC-Anwendung.
HOC und FaCC machen sehr ähnliche Dinge, beide ähneln dem Dekoratormuster im Designmuster. Alle Funktionen sind gegenüber den Originalinstanzen bzw. -einheiten erweitert.
Natürlich wird es nicht nur in einigen Open-Source-Bibliotheken verwendet, sondern auch beim täglichen Schreiben von Code gibt es viele Orte, an denen es geeignet ist, HOC und FaCC zu verwenden, um eine gewisse Logik zu kapseln. Zum Beispiel Datenvergrabungspunkte, Umschalten neuer Funktionen, Abrufen von Konvertierungsdaten usw. Sehr nützlich, um die Lesbarkeit des Codes und die Wiederverwendung von Logik zu verbessern.
Wir haben alle Funktionen höherer Ordnung verwendet, die eine Funktion akzeptieren und eine gekapselte Funktion zurückgeben:
const plus = first => second => (first + second) plus(1)(2) // 3
Und Komponenten höherer Ordnung sind das Konzept von hoch- Ordnungsfunktionen, die auf Komponenten höherer Ordnung angewendet werden:
const withClassName = ComposedComponent => props => (
<ComposedComponent {...props} className='demo-class' />
)
// 使用
const Header = text => (<header>{text}</header>)
const headerWitheClass = withClassName(Header) akzeptiert eine Komponente und gibt eine neue verpackte Komponente zurück. Das von uns häufig verwendete withRouter besteht darin, der Originalkomponente props Attribute wie localtion hinzuzufügen. Zusätzlich zum Hinzufügen von Requisiten können Komponenten höherer Ordnung auch Folgendes tun:
Einige Dinge vor und nach dem eigentlichen Aufruf der Komponente tun, z. B. Daten vergraben usw.
Bestimmen Sie, ob die Komponente gerendert werden soll oder ob andere Dinge gerendert werden sollen, z. B. das Rendern der Fehlerseite nach einem Fehler.
Requisiten übergeben und neue Requisiten hinzufügen
Anstatt die Komponente zu rendern, machen Sie einige andere Dinge, wie zum Beispiel das Rendern eines externen Doms
Die ersten drei Punkte oben sind bitte relativ einfach zu verstehen Erklären Sie den vierten Punkt. Beispielsweise müssen Sie nach dem Rendern einer Seite den Titel der Seite ändern. Dies ist eine häufige Anforderung für Einzelseitenanwendungen. Normalerweise können Sie dazu Hooks in einer bestimmten Router-Bibliothek verwenden. Natürlich kann dies auch durch HOC erreicht werden:
const withTitleChange = ComposedComponent => {
return class extends React.Component {
componentDidMount () {
const { title } = this.props
document.title = title
}
render () {
const props = this.props
return <ComposedComponent {...props} />
}
}
}In ähnlicher Weise ist FaCC auch ein Modus, der zur Verbesserung der Fähigkeiten von Originalkomponenten verwendet wird. Seine Hauptfunktion wird durch die Requisiten von React realisiert. Kinder. Alles, auch Funktionen. Wir können das obige Klassenbeispiel nehmen und es erneut mit FaCC implementieren:
const ClassNameWrapper = ({ children }) => children('demo-class')
// 使用
const HeadWithClass = (props) => (
<ClassNameWrapper>
{(class) => <header classNmae={class} ></header>}
</ClassNameWrapper>
)In FaCC können Sie im Lebenszyklus auch viele Dinge tun, z. B. HOC, um die ursprünglichen Komponenten zu kapseln. Grundsätzlich kann HOC dies tun es auch. Das Projekt, an dem ich arbeitete, verwendete HOC in großem Umfang. Nach einigen Diskussionen begann es, sich in großem Umfang in FaCC umzuwandeln.
Beide werden zur Verbesserung der Originalkomponenten verwendet. Welches sollte verwendet werden? Welches ist das richtige Modell? Darüber gibt es in der Community viele Diskussionen. Einige Leute sagen beispielsweise, dass FaCC ein Anti-Pattern sei: Function as Child Components Are an Anti-Pattern. Als Grund gab er an, dass Kinder nicht semantisch sind und Verwirrung stiften würden. Dann schlug er das Component Injection-Muster vor, das interessierte Schüler lesen können.
Lassen Sie uns einen Vergleich aus mehreren Aspekten anstellen:
Kompositionsphase
Die Kombinationsphase bedeutet HOC, FaCC und Beim Kombinieren verbesserte Komponenten. Es ist deutlich zu erkennen, dass FaCC mehr Abhängigkeitsinformationen zum Andocken von vorderen und hinteren Komponenten anzeigt, was relativ einfacher zu verstehen ist. Was HOC betrifft, wie kann man einander überbrücken? Man muss tief in das HOC eintauchen und den Code lesen, um zu wissen, was dieses HOC bewirkt.
// HOC example import View from './View' const DetailPage = withServerData(withNavigator(View))
Wenn Sie zwei weitere HOCs hinzufügen, wird der obige Kombinationsprozess sehr hässlich. Relativ gesehen fällt bei FaCC deutlicher auf, wie es gekapselt ist, woher die Datenquelle kommt und welche Daten die Komponente empfängt.
Leistungsoptimierung
In HOC können wir Requisiten vom Host erhalten, da Requisiten von HOC weitergegeben werden, also haben wir auch Für die Für den gesamten Lebenszyklus können wir die Optimierung von ShouldComponentUpdate verwenden. Dies ist bei FaCC nicht der Fall, da die Requisiten nicht intern verglichen werden können. Nur bei der Kombination einer externen Komponente können die Requisiten verglichen werden.
Flexibilität
FaCC ist in der Kombinationsphase flexibler als HOC. Es legt nicht fest, wie die erweiterte Komponente die von ihr übergebenen Attribute verwendet. . Das HOC ist grundsätzlich fertiggestellt, nachdem es geschrieben wurde.
Außerdem erstellt FaCC keine neue Komponente, während HOC eine neue Komponente erstellt und Requisiten an diese weitergibt.
Viele Open-Source-Bibliotheken in der Community haben die beiden Modi verwendet, und es gibt viele Artikel, in denen sie verglichen werden. Es gab auch viele hitzige Diskussionen und natürlich waren beide Modelle gut, um das Problem endlich zu lösen. Aufgrund unterschiedlicher Überlegungen kann die Auswahl unterschiedlich ausfallen.
Verwandte Empfehlungen:
React-Komponenteninstanzanalyse höherer Ordnung
Instanzen kontrollierter und unkontrollierter Komponenten in React Detaillierte Erklärung
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung funktionaler Unterkomponenten und Komponenten höherer Ordnung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
