Detaillierte Erläuterung der Verwendung von React-Komponenten höherer Ordnung

Dieses Mal werde ich Ihnen die Verwendung von React-High-End-Komponenten ausführlich erläutern. Welche Vorsichtsmaßnahmen sind bei der Verwendung von React-High-End-Komponenten zu beachten?

Was ist

Eine Komponente höherer Ordnung ist eine Funktion, die eine Komponente akzeptiert und eine neue Komponente zurückgibt. Es gibt keine Nebenwirkungen.

Warum

verwenden, um die gemeinsame Logik von Komponenten zu kapseln und zu abstrahieren, damit dieser Teil der Logik besser zwischen Komponenten wiederverwendet werden kann?

So verwenden Sie

//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。
//高阶组件可以叠加使用，可以对一个组件使用多个高阶组件
@hoc       
class Hello extends React.Component {
 //
}

So implementieren Sie den

Attribut-Proxy

Das folgende Beispiel ist das einfachste Eine Implementierung

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}
function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

Funktion: Requisiten und Refs manipulieren, um Komponenteninstanzen zu erhalten

Hinweise: Statische Methoden können nicht übergeben werden und müssen manuell kopiert werden; Refs können nicht übergeben werden.

Umgekehrte Vererbung

Das folgende Beispiel ist die einfachste Implementierung

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

Funktion: Zustand manipulieren; Render-Hijack ausführen (seine Render-Funktion ausführen)

Hinweis: Durch die Vererbung von ImportComponent können wir es zusätzlich zu einigen statischen Methoden, einschließlich Lebenszyklus, Status und verschiedenen Funktionen, erhalten.

Prinzip

1. Verändern Sie die Originalkomponente nicht, indem Sie Unterkomponenten in Containerkomponenten einschließen Nebenwirkungen.

2. Verwenden Sie innerhalb der Rendermethode keine Komponenten höherer Ordnung.

3. Komponenten höherer Ordnung können den Komponenten Funktionalität hinzufügen, sollten die Funktionalität jedoch nicht drastisch verändern.

4. Um das Debuggen zu erleichtern, wählen Sie einen Anzeigenamen, um anzugeben, dass es sich um das Ergebnis einer Komponente höherer Ordnung handelt.

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie JS, um Eingabeaufforderungstext für Platzhalterattribute in HTML zu implementieren

So verwenden Sie den JS-Countdown Klicken Sie zum Fortsetzen auf die Schaltfläche „Funktion“

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