Komponenten höherer Ordnung in React

Ursprünglicher Autor: Tyler McGinnis
  • Übersetzung
Wir haben kürzlich ein höheres Feature in Javascript veröffentlicht, das sich an diejenigen richtet, die Javascript studieren. Der Artikel, dessen Übersetzung wir heute veröffentlichen, ist für Anfänger von React-Entwicklern gedacht. Es ist für Komponenten höherer Ordnung (Komponenten höherer Ordnung, HOC) vorgesehen.



DRY-Prinzip und Komponenten höherer Ordnung in React


Sie werden in der Frage des Programmierens nicht weit genug vorankommen können und nicht auf das fast kultige Prinzip von DRY stoßen (Nicht wiederholen, nicht wiederholen). Manchmal gehen seine Anhänger zu weit, aber in den meisten Fällen lohnt es sich, dies zu beobachten. Hier werden wir über das bekannteste Reaktionsentwicklungsmuster sprechen, um die Einhaltung des DRY-Prinzips zu gewährleisten. Wir sprechen über Komponenten höherer Ordnung. Um den Wert von Komponenten höherer Ordnung zu verstehen, lassen Sie uns zunächst das Problem formulieren und verstehen, für das sie gedacht sind.

Angenommen, Sie müssen ein Kontrollfeld ähnlich dem Stripe-Bedienfeld neu erstellen. Viele Projekte entwickeln sich in der Regel nach einem Schema, bei dem alles gut läuft, bis das Projekt abgeschlossen ist. Wenn Sie der Meinung sind, dass die Arbeit fast abgeschlossen ist, stellen Sie fest, dass das Control Panel viele verschiedene QuickInfos enthält, die angezeigt werden sollten, wenn Sie mit der Maus über bestimmte Elemente fahren.


Systemsteuerung und QuickInfos

Um diese Funktionalität zu implementieren, können Sie verschiedene Ansätze verwenden. Sie haben sich dafür entschieden: Bestimmen Sie, ob sich der Zeiger über einer separaten Komponente befindet, und entscheiden Sie dann, ob Sie einen Hinweis dafür anzeigen oder nicht. Es gibt drei Komponenten, die mit einer ähnlichen Funktionalität ausgestattet werden müssen. Es Info, TrendChartundDailyChart.

Beginnen wir mit der Komponente Info. Im Moment ist es ein einfaches SVG-Symbol.

classInfoextendsReact.Component{
  render() {
    return (
      <svg
        className="Icon-svg Icon--hoverable-svg"
        height={this.props.height}
        viewBox="0 0 16 16" width="16">
          <path d="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
      </svg>
    )
  }
}

Nun müssen wir sicherstellen, dass diese Komponente bestimmen kann, ob sich der Mauszeiger darüber befindet oder nicht. Sie können dazu Maus onMouseOverund Ereignisse verwenden onMouseOut. Die übergebene Funktion onMouseOverwird aufgerufen, wenn der Mauszeiger auf den Komponentenbereich trifft. Die übergebene Funktion onMouseOutwird aufgerufen, wenn der Zeiger die Komponente verlässt. Um dies alles wie in React zu organisieren, fügen wir der Komponente hovering, die in einem Status gespeichert ist , eine Eigenschaft hinzu , die es uns ermöglicht, die Komponente erneut zu rendern und den Tooltip anzuzeigen oder auszublenden, falls sich diese Eigenschaft ändert.

classInfoextendsReact.Component{
  state = { hovering: false }
  mouseOver = () => this.setState({ hovering: true })
  mouseOut = () => this.setState({ hovering: false })
  render() {
    return (
      <>
        {this.state.hovering === true
          ? <Tooltip id={this.props.id} />
          : null}
        <svg
          onMouseOver={this.mouseOver}
          onMouseOut={this.mouseOut}
          className="Icon-svg Icon--hoverable-svg"
          height={this.props.height}
          viewBox="0 0 16 16" width="16">
            <path d="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
        </svg>
      </>
    )
  }
}

Es stellte sich gut heraus. Jetzt müssen wir zwei weitere Komponenten mit der gleichen Funktionalität versehen - TrendChartund DailyChart. Der obige Mechanismus für die Komponente Infofunktioniert einwandfrei. Sie müssen nicht repariert werden. Erstellen Sie also den gleichen Mechanismus in anderen Komponenten mit demselben Code. Komponentencode neu schreiben TrendChart.

classTrendChartextendsReact.Component{
  state = { hovering: false }
  mouseOver = () => this.setState({ hovering: true })
  mouseOut = () => this.setState({ hovering: false })
  render() {
    return (
      <>
        {this.state.hovering === true
          ? <Tooltip id={this.props.id}/>
          : null}
        <Chart
          type='trend'
          onMouseOver={this.mouseOver}
          onMouseOut={this.mouseOut}
        />
      </>
    )
  }
}

Sie haben wahrscheinlich bereits verstanden, was Sie als Nächstes tun sollen. Dasselbe kann mit unserer letzten Komponente gemacht werden DailyChart.

classDailyChartextendsReact.Component{
  state = { hovering: false }
  mouseOver = () => this.setState({ hovering: true })
  mouseOut = () => this.setState({ hovering: false })
  render() {
    return (
      <>
        {this.state.hovering === true
          ? <Tooltip id={this.props.id}/>
          : null}
        <Chart
          type='daily'
          onMouseOver={this.mouseOver}
          onMouseOut={this.mouseOut}
        />
      </>
    )
  }
}

Nun ist alles fertig. Möglicherweise haben Sie auf React etwas Ähnliches geschrieben. Dies ist natürlich nicht der schlechteste Code der Welt, aber er folgt DRY nicht sehr gut. Wie Sie sehen, wiederholen wir nach der Analyse des Komponentencodes die gleiche Logik.

Das Problem, mit dem wir jetzt konfrontiert sind, muss sehr deutlich werden. Dies ist ein doppelter Code. Um dies zu lösen, möchten wir die Notwendigkeit beseitigen, denselben Code zu kopieren, wenn das, was wir bereits implementiert haben, für die neue Komponente erforderlich ist. Wie löse ich das? Bevor wir darüber sprechen, wollen wir uns einige Programmierungskonzepte ansehen, die das Verständnis der hier vorgeschlagenen Lösung erheblich erleichtern werden. Dies sind Rückrufe und Funktionen höherer Ordnung.

Funktionen höherer Ordnung


Funktionen in JavaScript sind erstklassige Objekte. Das heißt, sie können wie Objekte, Arrays oder Strings Variablen zugewiesen, Funktionen als Argumente übergeben oder von anderen Funktionen zurückgegeben werden.

functionadd(x, y){
  return x + y
}
functionaddFive(x, addReference){
  return addReference(x, 5)
}
addFive(10, add) // 15

Wenn Sie sich an ein solches Verhalten nicht gewöhnt haben, kann Ihnen der obige Code fremd erscheinen. Lass uns darüber reden, was hier los ist. Wir übergeben die Funktion als Argument an die addFunktion addFive, benennen sie um addReferenceund rufen sie dann auf.

Bei Verwendung ähnlicher Konstruktionen wird eine an eine andere als Argument übergebene Funktion als Callback (Callback-Funktion) bezeichnet, und eine Funktion, die eine andere Funktion als Argument empfängt, wird als Funktion höherer Ordnung bezeichnet.

Die Benennung von Entitäten in der Programmierung ist wichtig, daher wird hier derselbe Code verwendet, in dem Namen entsprechend den Konzepten geändert werden, die sie repräsentieren.

functionadd(x,y) {
  return x + y
}
functionhigherOrderFunction(x, callback) {
  return callback(x, 5)
}
higherOrderFunction(10, add)

Dieses Muster sollte Ihnen bekannt vorkommen. Tatsache ist, dass Sie, wenn Sie beispielsweise Methoden von JavaScript-Arrays verwendet haben, mit jQuery oder mit lodash zusammengearbeitet haben, bereits sowohl Funktionen höherer Ordnung als auch Rückrufe verwendet haben.

[1,2,3].map((i) => i + 5)
_.filter([1,2,3,4], (n) => n % 2 === 0 );
$('#btn').on('click', () =>
  console.log('Callbacks are everywhere')
)

Kehren wir zu unserem Beispiel zurück. Was passiert , wenn statt einer Funktion zu schaffen addFive, haben wir mehr und Funktion erstellen möchten addTen, und addTwenty, und dergleichen. In Anbetracht dessen, wie die Funktion implementiert wird addFive, müssen wir ihren Code kopieren und ändern, um die oben genannten Funktionen zu erstellen.

functionadd(x, y){
  return x + y
}
functionaddFive(x, addReference){
  return addReference(x, 5)
}
functionaddTen(x, addReference){
  return addReference(x, 10)
}
functionaddTwenty(x, addReference){
  return addReference(x, 20)
}
addFive(10, add) // 15
addTen(10, add) // 20
addTwenty(10, add) // 30

Es sollte beachtet werden, dass der Code, den wir erhalten haben, nicht so alptraumhaft ist, aber es ist deutlich zu sehen, dass sich viele Fragmente darin wiederholen. Unser Ziel ist es, dass wir so viele Funktionen , die einige Zahlen zu den Zahlen zu ihnen (zugewiesen hinzufügen erstellen addFive, addTen, addTwenty, und so weiter) , wie viel wir brauchen, während Vervielfältigung des Codes zu minimieren. Um dieses Ziel zu erreichen, müssen wir möglicherweise eine Funktion erstellen makeAdder. Diese Funktion kann eine bestimmte Nummer und einen Link zur Funktion enthalten add. Da diese Funktion das Ziel hat, eine neue Funktion zu erstellen, die die übergebene Nummer zur angegebenen addiert, können Sie die Funktion dazu makeAdderveranlassen, eine neue Funktion zurückzugeben, in der eine bestimmte Nummer festgelegt ist (z. B. die Nummer 5 in makeFive) und die Nummern für das Hinzufügen akzeptieren könnte mit dieser Nummer.

Schauen wir uns ein Beispiel für die Implementierung der obigen Mechanismen an.

functionadd(x, y){
  return x + y
}
functionmakeAdder(x, addReference){
  returnfunction(y){
    return addReference(x, y)
  }
}
const addFive = makeAdder(5, add)
const addTen = makeAdder(10, add)
const addTwenty = makeAdder(20, add)
addFive(10) // 15
addTen(10) // 20
addTwenty(10) // 30

Jetzt können wir beliebig viele addFunktionen erstellen und gleichzeitig die Code-Duplizierung minimieren.

Wenn es interessant ist, wird das Konzept, dass es eine bestimmte Funktion gibt, die andere Funktionen so verarbeitet, dass sie mit weniger Parametern als zuvor verwendet werden können, als „teilweise Verwendung der Funktion“ bezeichnet. Dieser Ansatz wird bei der funktionalen Programmierung verwendet. Ein Beispiel für die Verwendung ist eine .bindin JavaScript verwendete Methode .

All dies ist gut, aber was haben React und das oben beschriebene Problem beim Duplizieren von Ereigniscode für Mausereignisse beim Erstellen neuer Komponenten, die diese Funktion benötigen? Die Tatsache ist genau wie eine Funktion höherer OrdnungmakeAdderhilft uns dabei, die Duplizierung von Code zu minimieren, was als „Komponente höherer Ordnung“ bezeichnet wird, hilft uns, das gleiche Problem in einer React-Anwendung zu lösen. Hier wird jedoch alles anders aussehen. Anstelle eines Arbeitsschemas, bei dem eine Funktion höherer Ordnung eine neue Funktion zurückgibt, die einen Rückruf aufruft, kann eine Komponente höherer Ordnung ihr eigenes Schema implementieren. Es kann nämlich eine neue Komponente zurückgegeben werden, die die Komponente wiedergibt, die die Rolle eines Rückrufs spielt. Vielleicht haben wir schon viele Dinge gesagt, also ist es an der Zeit, mit Beispielen fortzufahren.

Unsere Funktion höherer Ordnung


Diese Funktion verfügt über die folgenden Funktionen:

  • Es ist eine Funktion.
  • Sie nimmt einen Rückruf als Argument an.
  • Es wird eine neue Funktion zurückgegeben.
  • Die zurückgegebene Funktion kann den ursprünglichen Rückruf aufrufen, der an unsere übergeordnete Funktion übergeben wurde.

functionhigherOrderFunction(callback) {
  returnfunction() {
    return callback()
  }
}

Unsere Komponente höherer Ordnung


Diese Komponente kann wie folgt charakterisiert werden:

  • Es ist eine Komponente.
  • Es braucht eine andere Komponente als Argument.
  • Es wird eine neue Komponente zurückgegeben.
  • Die zurückgegebene Komponente kann die Quellkomponente an eine Komponente höherer Ordnung übergeben.

function higherOrderComponent (Component) {
  returnclassextendsReact.Component{
    render() {
      return <Component />
    }
  }
}

HOC-Implementierung


Nachdem wir nun allgemein herausgefunden haben, welche Aktionen eine Komponente höherer Ordnung ausführt, werden wir anfangen, Änderungen an unserem React-Code vorzunehmen. Wenn Sie sich erinnern, besteht das Wesentliche des Problems, das wir lösen, darin, dass der Code, der die Logik für die Behandlung von Mausereignissen implementiert, auf alle Komponenten kopiert werden muss, die diese Funktion benötigen.

state = { hovering: false }
mouseOver = () =>this.setState({ hovering: true })
mouseOut = () =>this.setState({ hovering: false })

In Anbetracht dessen brauchen wir unsere Komponente höherer Ordnung (nennen wir sie withHover), um den Ereignisbehandlungscode des Mausereignisses einzukapseln und die Eigenschaft dann an die hoveringKomponenten zu übergeben, die er darstellt. Auf diese Weise können wir die Duplizierung des entsprechenden Codes durch Platzieren in der Komponente verhindern withHover.

Letztendlich wollen wir dies erreichen. Wann immer wir eine Komponente benötigen, die eine Vorstellung von ihrer Eigenschaft haben muss hovering, können wir diese Komponente auf eine Komponente höherer Ordnung übertragen withHover. Das heißt, wir möchten, dass die Komponenten wie unten gezeigt betrieben werden.

const InfoWithHover = withHover(Info)
const TrendChartWithHover = withHover(TrendChart)
const DailyChartWithHover = withHover(DailyChart)

Wenn das zurückgegebene withHoverErgebnis wiedergegeben wird, handelt es sich um die ursprüngliche Komponente, an die die Eigenschaft übergeben wird hovering.

function Info ({ hovering, height }) {
  return (
    <>
      {hovering === true
        ? <Tooltipid={this.props.id} />
        : null}
      <svg
        className="Icon-svg Icon--hoverable-svg"
        height={height}
        viewBox="0 0 16 16"width="16">
          <pathd="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
      </svg>
    </>
  )
}

In der Tat müssen wir jetzt nur noch die Komponente implementieren withHover. Aus dem Obigen ist ersichtlich, dass er drei Aktionen ausführen muss:

  • Akzeptieren Sie das Component-Argument.
  • Gib eine neue Komponente zurück.
  • Rendern Sie das Component-Argument, und übergeben Sie die Eigenschaft hovering.

▍ Komponentenargument akzeptieren


functionwithHover(Component) {
}

▍ Neue Komponente zurückgeben


function withHover (Component) {
  returnclassWithHoverextendsReact.Component{
  }
}

▍ Rendern einer Komponente mit Hover-Eigenschaften


Jetzt haben wir die folgende Frage: wie kommt man zur Immobilie hovering? Tatsächlich haben wir bereits den Code für die Arbeit mit dieser Eigenschaft geschrieben. Wir müssen es nur der neuen Komponente hinzufügen und diese Eigenschaft dann übergeben, hoveringwenn die Komponente als Argument an die Komponente höherer Ordnung übergeben wird Component.

functionwithHover(Component) {
  returnclassWithHoverextendsReact.Component{
    state = { hovering: false }
    mouseOver = () =>this.setState({ hovering: true })
    mouseOut = () =>this.setState({ hovering: false })
    render() {
      return (
        <divonMouseOver={this.mouseOver}onMouseOut={this.mouseOut}>
          <Componenthovering={this.state.hovering} />
        </div>
      );
    }
  }
}

Ich ziehe es vor, über diese Dinge wie folgt zu sprechen (und dies ist in der React-Dokumentation angegeben): Eine Komponente konvertiert Eigenschaften in eine Benutzeroberfläche und eine Komponente höherer Ordnung konvertiert eine Komponente in eine andere Komponente. In unserem Fall verwandeln wir Komponenten Info, TrendChartund DailyChartin den neuen Komponenten, die dank der Eigenschaft hovering, ob der Mauszeiger über ihnen bewusst sind.

Zusätzliche Hinweise


An dieser Stelle haben wir alle grundlegenden Informationen zu Komponenten höherer Ordnung überprüft. Es gibt jedoch noch einige wichtige Dinge zu besprechen.

Wenn Sie sich unser HOC anschauen withHover, werden Sie feststellen, dass es mindestens eine Schwachstelle hat. hoveringDies bedeutet, dass die empfangende Komponente keine Probleme mit dieser Eigenschaft hat. In den meisten Fällen ist diese Annahme wahrscheinlich berechtigt, aber es kann vorkommen, dass dies inakzeptabel ist. Was passiert beispielsweise, wenn eine Komponente bereits eine Eigenschaft hat hovering? In diesem Fall liegt ein Namenskonflikt vor. Daher ist es withHovermöglich, eine Änderung an einer Komponente vorzunehmen, um dem Benutzer dieser Komponente zu ermöglichen, anzugeben, welchen Namen die Eigenschaft hoveringan die Komponenten übergeben werden soll. AlswithHover - Dies ist nur eine Funktion. Schreiben Sie sie neu, sodass das zweite Argument verwendet wird, das den Namen der an die Komponente übergebenen Eigenschaft angibt.

functionwithHover(Component, propName = 'hovering') {
  returnclassWithHoverextendsReact.Component{
    state = { hovering: false }
    mouseOver = () =>this.setState({ hovering: true })
    mouseOut = () =>this.setState({ hovering: false })
    render() {
      const props = {
        [propName]: this.state.hovering
      }
      return (
        <divonMouseOver={this.mouseOver}onMouseOut={this.mouseOut}>
          <Component {...props} />
        </div>
      );
    }
  }
}

Jetzt setzen wir dank des Default-Parameterwertmechanismus von ES6 den Standardwert des zweiten Arguments als hovering, aber wenn der Komponentenbenutzer withHoveres ändern möchte, kann er in diesem zweiten Argument den Namen übergeben, den er benötigt.

function withHover(Component, propName = 'hovering') {
  returnclassWithHoverextendsReact.Component{
    state = { hovering: false }
    mouseOver = () => this.setState({ hovering: true })
    mouseOut = () => this.setState({ hovering: false })
    render() {
      const props = {
        [propName]: this.state.hovering
      }
      return (
        <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
          <Component {...props} />
        </div>
      );
    }
  }
}
function Info ({ showTooltip, height }) {
  return (
    <>
      {showTooltip === true
        ? <Tooltip id={this.props.id} />
        : null}
      <svg
        className="Icon-svg Icon--hoverable-svg"
        height={height}
        viewBox="0 0 16 16" width="16">
          <path d="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
      </svg>
    </>
  )
}
const InfoWithHover = withHover(Info, 'showTooltip')

Das Problem bei der Implementierung von withHover


Möglicherweise haben Sie ein anderes Problem bei der Implementierung festgestellt withHover. Wenn wir unsere Komponente analysieren Info, können wir feststellen, dass sie unter anderem eine Immobilie akzeptiert height. Die Art, wie wir jetzt alles haben, bedeutet, dass es heightinstalliert wird undefined. Der Grund dafür ist, dass die Komponente die Komponente withHoverist, die für das Rendern verantwortlich ist, was als Argument übergeben wird Component. Jetzt sind wir keine Eigenschaften , aber wir haben geschaffen hovering, die Komponente Componentnicht teilen.

const InfoWithHover = withHover(Info)
...
return <InfoWithHover height="16px" />

Die Eigenschaft wird heightan die Komponente übergeben InfoWithHover. Und was ist diese Komponente? Dies ist die Komponente, aus der wir zurückkehren withHover.

functionwithHover(Component, propName = 'hovering') {
  returnclassWithHoverextendsReact.Component{
    state = { hovering: false }
    mouseOver = () =>this.setState({ hovering: true })
    mouseOut = () =>this.setState({ hovering: false })
    render() {
      console.log(this.props) // { height: "16px" }
      const props = {
        [propName]: this.state.hovering
      }
      return (
        <divonMouseOver={this.mouseOver}onMouseOut={this.mouseOut}>
          <Component {...props} />
        </div>
      );
    }
  }
}

Das Innere der Komponente WithHoverthis.props.heightist gleichwertig 16px, aber in Zukunft werden wir mit dieser Eigenschaft nichts anfangen. Wir müssen diese Eigenschaft an das Argument übergeben Component, das wir rendern.

render() {
      const props = {
        [propName]: this.state.hovering,
        ...this.props,
      }
      return (
        <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
          <Component {...props} />
        </div>
      );
}

Über die Probleme bei der Arbeit mit Komponenten höherer Ordnung


Wir glauben, dass Sie die Vorteile der Verwendung von Komponenten höherer Ordnung bei der Wiederverwendung von Logik in verschiedenen Komponenten bereits erkannt haben, ohne dass derselbe Code kopiert werden muss. Nun fragen wir uns, ob die Komponenten höherer Ordnung Fehler aufweisen. Diese Frage kann positiv beantwortet werden, und wir haben diese Mängel bereits festgestellt.

Bei Verwendung von HOC erfolgt eine Steuerungsinversion . Stellen Sie sich vor, wir verwenden eine Komponente höherer Ordnung, die nicht von uns entwickelt wurde, wie den HOC withRouterReact Router. Gemäß der Dokumentation, withRouterdie Eigenschaften geben match, locationund historywickelte sie in seiner Rendering - Komponente.

classGameextendsReact.Component{
  render() {
    const { match, location, history } = this.props // From React Router
    ...
  }
}
export default withRouter(Game)

Beachten Sie, dass wir kein Element Game(dh - <Game />) erstellen . Wir übertragen unsere React Router-Komponente vollständig und vertrauen darauf, dass diese Komponente nicht nur gerendert wird, sondern auch die korrekten Eigenschaften auf unsere Komponente überträgt. Oben haben wir dieses Problem bereits festgestellt, als wir bei der Eigentumsübertragung von einem möglichen Namenskonflikt gesprochen haben hovering. Um dies zu beheben, haben wir beschlossen, dem HOC-Benutzer die withHoverVerwendung des zweiten Arguments zu erlauben , um den Namen der entsprechenden Eigenschaft festzulegen. Mit dem HOC einer anderen Person haben withRouterwir diese Gelegenheit nicht. Wenn eine Komponente Gamebereits Eigenschaften verwendet wird match, locationoder historykann man sagen, dass wir nicht das Glück haben. Wir müssen entweder diese Namen in unserer Komponente ändern oder die Verwendung von HOC ablehnen withRouter.

Ergebnisse


Wenn Sie in Reaktion von HOC sprechen, müssen Sie sich zwei wichtige Dinge merken. Erstens ist HOC nur ein Muster. Komponenten höherer Ordnung sind nicht einmal spezifisch für React, obwohl sie sich auf die Anwendungsarchitektur beziehen. Zweitens, um React-Anwendungen zu entwickeln, ist es nicht notwendig, über Komponenten höherer Ordnung Bescheid zu wissen. Sie sind vielleicht nicht vertraut mit ihnen, schreiben aber gleichzeitig hervorragende Programme. Wie in jedem Unternehmen gilt jedoch auch: Je mehr Tools Sie haben, desto besser kann das Ergebnis Ihrer Arbeit sein. Wenn Sie mit React Anwendungen schreiben, werden Sie sich selbst schaden, wenn Sie Ihrem Arsenal kein HOC hinzufügen.

Liebe Leserinnen und Leser! Verwenden Sie in React Komponenten höherer Ordnung?


Jetzt auch beliebt: