So erstellen Sie Komponenten in React

Vorwort

In diesem Abschnitt stellen wir die Komponententypen in React vor und zeigen, wie Komponenten erstellt und verwendet werden.

In diesem Artikel erfahren Sie mehr über:

• Erstellen einer Klassenkomponente
• Erstellen einer Funktionskomponente
• Rendering-Komponenten
• Synthetische Komponenten
• Extrahieren von Komponenten
• Requisiten sind schreibgeschützt

Komponenteneinführung

Komponenten ermöglichen es Ihnen, Ihre Benutzeroberfläche in unabhängige, wiederverwendbare Widgets aufzuteilen und jedes Widget individuell zu gestalten.

Komponenten sind per Definition wie JavaScript-Funktionen. Komponenten können beliebige Eingaben (sogenannte „Props“) empfangen und React-Elemente zurückgeben, die beschreiben, was auf dem Bildschirm angezeigt werden soll.

Props, also Eigenschaften, werden im Code als Props geschrieben und können daher zum Verweisen auf Eigenschaften verwendet werden.
Es gibt zwei Arten von Komponenten in React: Klassenkomponenten und Funktionskomponenten

Erstellen einer Klassenkomponente

An die Definition einer Klassenkomponente werden folgende Anforderungen gestellt:

• Klassenkomponenten müssen von React.Component erben
• Klassenkomponenten müssen die Renderfunktion implementieren

Vor ES6 konnten Klassenkomponenten mit dem Modul „create-react-class“ definiert werden, die offizielle Website empfiehlt derzeit jedoch die Verwendung von ES6-Klassendefinitionen.

Verwenden Sie eine Klasse, um eine Komponente zu definieren:

Klasse App erweitert Komponente {
  Konstruktor() {
    super()
    dieser.Zustand = {}
  }

  rendern() {
    return <h2>Hallo App</h2>
  }
}

Lassen Sie uns die Teile der Klassenkomponente im Detail analysieren.

• Konstruktor: Dies ist der Konstruktor der Klassenkomponente. Er ist optional. Normalerweise initialisieren wir einige Daten im Konstruktor.
• this.state: Wir fügen der Klassenkomponente im Konstruktor eine Statuseigenschaft hinzu. Man kann sie als Statusobjekt in der Komponente verstehen, das verschiedene Eigenschaften zur Pflege der Daten innerhalb der Komponente enthält. Gleichzeitig können Sie über this.state.<Eigenschaftsname> auf die Eigenschaft zugreifen.
• render(): Diese Methode ist die einzige Methode, die in einer Klassenkomponente implementiert werden muss. Die Klassenkomponente gibt den Anzeigeinhalt der Komponente über render() zurück.

Über den Staat

Über this.state können wir Datenobjekte zu Klassenkomponenten hinzufügen und über this.state.<Eigenschaftsname> auf die Eigenschaften in unserem setState zugreifen.

Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Name: „xhs-rookies“
    }
  }

machen(){
    return <h2>{diesen.Bundesstaatsnamen}</h2>
  }

Wenn wir jedoch das Namensattribut im obigen Beispiel ändern möchten, müssen wir die von react angegebene Methode setState() verwenden, um den Wert im Status hinzuzufügen oder zu ändern.

this.state.name = 'new xhs-rookies' //Falscher Weg, nicht erlaubt this.setState({ name: 'new xhs-rookies' }) //Richtiger Weg

Einfach ausgedrückt wird die Seite in React basierend auf Daten gerendert. Wenn wir setState() verwenden, um die Daten zu aktualisieren, hilft uns React dabei, render() auszuführen, um die Seite zu aktualisieren. Dadurch werden alle im Status der Seite verwendeten Daten aktualisiert.

Über Render

Wenn render aufgerufen wird, prüft es die Änderungen von this.props und this.state und gibt viele Typen zurück. Häufig lassen wir diese Methode ein React-Element zurückgeben und lassen es dann von React rendern und anzeigen:

Reaktionselemente:

• Normalerweise über JSX erstellt.
• Beispielsweise wird <div/> von React als DOM-Knoten gerendert und <MyComponent/> von React als benutzerdefinierte Komponente gerendert.
• Sowohl <div/> als auch <MyComponent/> sind React-Elemente.

Weitere Informationen zur render()-Methode finden Sie unter React.Component – ​​Render)

Erstellen einer Funktionskomponente

Eine Funktionskomponente ist eine mithilfe einer Funktion definierte Funktion, die jedoch denselben Inhalt zurückgibt wie die Renderfunktion in einer Klassenkomponente.

Im Vergleich zu Klassenkomponenten haben Funktionskomponenten ihre eigenen Eigenschaften:

• Es gibt keinen Lebenszyklus, es wird aktualisiert und gemountet, aber es gibt keine Lebenszyklusfunktion;
• Es gibt kein this (Komponenteninstanz);
• Kein interner Zustand;

Definieren wir eine Funktionskomponente:

exportiere Standardfunktion App() {
  Rückkehr <div>xhs Rookies</div>
}

Rendering-Komponenten

In den vorherigen Artikeln sind uns nur React-Elemente begegnet, die DOM-Tags darstellten:

const-Element = <div />

Elemente können jedoch auch benutzerdefinierte Komponenten darstellen:

const element = <Willkommen name="xhs rookies" />

Wenn React auf ein Element stößt, das eine benutzerdefinierte Komponente darstellt, übergibt es die JSX-Attribute in einem separaten Objekt an die entsprechende Komponente. Wir nennen dies das „Requisiten“-Objekt.

Beispielsweise rendert der folgende Code „xhs rookies“ auf der Seite:

Funktion Willkommen (Requisiten) {
  return <h1>Hallo, {props.name}</h1>
}

const element = <Willkommen name="xhs rookies" />
ReactDOM.render(Element, Dokument.getElementById('root'))

Lassen Sie uns das obige Beispiel kurz erklären:

• Wir haben die Methode ReactDOM.render() aufgerufen und ihr das Element <Welcome name="xhs rookies" /> übergeben.
• React ruft die Welcome-Komponente auf und übergibt ihr {name: 'xhs rookies'} als Props-Objekt.
• Die Willkommenskomponente gibt <h1>xhs Rookies</h1> zurück.
• React DOM aktualisiert das DOM schnell, um <h1>xhs-Rookies</h1> anzuzeigen.

Hinweis: Komponentennamen beginnen immer mit einem Großbuchstaben.

Beispielsweise stellt <div/> ein DOM-Tag dar, während <Welcome/> eine Komponente darstellt und eine Willkommenskomponente im Gültigkeitsbereich erfordert.

Weitere Informationen zu den Gründen hierfür finden Sie in „Dive into JSX“.

Synthetische Komponenten

Komponenten können in ihrer Ausgabe auf andere Komponenten verweisen. Dies ermöglicht uns, auf jeder Abstraktionsebene dieselben Komponenten zu verwenden. Eine Schaltfläche, ein Formular, ein Dialog, ein Bildschirm: In einer React-Anwendung werden all dies normalerweise als Komponenten beschrieben.

Beispielsweise können wir eine App-Komponente erstellen und „Willkommen“ darin mehrmals rendern:

Funktion Willkommen (Requisiten) {
  return <h1>Hallo, {props.name}</h1>
}

Funktion App() {
  zurückkehren (
    <div>
      <Willkommen name="rookie-Sara" />
      <Willkommen name="rookie-Cahal" />
      <Willkommen name="rookie-Edite" />
    </div>
  )
}

 
ReactDOM.render(<App />, document.getElementById('root'))

Normalerweise haben neue React-Apps eine einzelne App-Komponente der obersten Ebene. Wenn Sie React jedoch in eine vorhandene Anwendung integrieren, müssen Sie möglicherweise von unten nach oben beginnen, mit kleinen Komponenten wie Button anfangen und diese schrittweise in die oberste Ebene der Ansichtsebene integrieren.

Extrahieren von Komponenten

Scheuen Sie sich nicht, eine Komponente in mehrere kleinere Komponenten aufzuteilen.

Betrachten Sie beispielsweise die Kommentarkomponente:

Funktion Kommentar(Eigenschaften) {
  zurückkehren (
    <div Klassenname="Kommentar">
      <div Klassenname="Benutzerinfo">
        <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} />
        <div className="Benutzerinfo-name">{props.author.name}</div>
      </div>
      <div className="Kommentartext">{props.text}</div>
      <div className="Kommentar-Datum">{formatDate(props.date)}</div>
    </div>
  )
}

Es akzeptiert Autor (ein Objekt), Text (eine Zeichenfolge) und Datum (ein Datum) als Eigenschaften.

Diese Komponente lässt sich nur schwer ändern, da sie verschachtelt ist und sich Teile davon nur schwer wiederverwenden lassen. Lassen Sie uns einige Komponenten daraus extrahieren.

Extrahieren Sie zuerst den Avatar:

Funktion Avatar(Requisiten) {
  zurück <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
}

Der Avatar-Komponente ist es egal, wie sie in einem Kommentar gerendert wird. Aus diesem Grund haben wir der Eigenschaft einen allgemeineren Namen gegeben: „Benutzer“ statt „Autor“.

Wir empfehlen, Props aus der Perspektive der Komponente selbst und nicht aus dem Kontext zu benennen, in dem sie verwendet wird.

Wir können die Kommentarkomponente etwas vereinfachen:

Funktion Kommentar(Eigenschaften) {
  zurückkehren (
    <div Klassenname="Kommentar">
      <div Klassenname="Benutzerinfo">
        <Avatar-Benutzer={props.author} />
        <div className="Benutzerinfo-name">{props.author.name}</div>
      </div>
      <div className="Kommentartext">{props.text}</div>
      <div className="Kommentar-Datum">{formatDate(props.date)}</div>
    </div>
  )
}

Als nächstes extrahieren wir die UserInfo-Komponente, die verwendet wird, um den Avatar neben dem Benutzernamen anzuzeigen:

Funktion UserInfo(Eigenschaften) {
  zurückkehren (
    <div Klassenname="Benutzerinfo">
      <Avatar-Benutzer={props.user} />
      <div className="Benutzerinfo-name">{props.user.name}</div>
    </div>
  )
}

Dadurch können wir die Kommentarkomponente weiter vereinfachen:

Funktion Kommentar(Eigenschaften) {
  zurückkehren (
    <div Klassenname="Kommentar">
      <UserInfo Benutzer={props.author} />
      <div className="Kommentartext">{props.text}</div>
      <div className="Kommentar-Datum">{formatDate(props.date)}</div>
    </div>
  )
}

Das Extrahieren von Komponenten scheint eine langwierige Aufgabe zu sein, bei großen Apps kann es uns jedoch mit einer großen Anzahl wiederverwendbarer Komponenten belohnen. Eine gute Faustregel lautet: Wenn ein Teil Ihrer Benutzeroberfläche mehrfach verwendet wird (Schaltfläche, Bedienfeld, Avatar) oder komplex genug ist (App, FeedStory, Kommentar), sollten Sie ihn am besten zu einer wiederverwendbaren Komponente machen.

Requisiten sind schreibgeschützt

Unabhängig davon, ob Sie eine Komponente als Funktion oder Klassenmethode deklarieren, kann sie ihre eigenen Eigenschaften nicht ändern. Betrachten Sie die folgende Summenfunktion:

Funktion Summe(a, b) {
  gib a + b zurück
}

Solche Funktionen werden „reine Funktionen“ genannt, weil sie nicht versuchen, ihre Eingaben zu ändern und bei gleichen Eingaben immer die gleichen Ergebnisse liefern.

Andererseits ist das Folgende eine unreine Funktion, weil es den Wert seiner Eingabe verändert:

Funktion abheben(Konto, Betrag) {
  account.total -= Betrag
}

Obwohl React flexibel ist, gilt eine strenge Regel:

Hinweis: Alle React-Komponenten müssen reine Funktionen sein und dürfen ihre eigenen Eigenschaften nicht ändern.
Natürlich ist die Benutzeroberfläche einer Anwendung immer dynamisch und kann sich jederzeit ändern.

Wenn wir die Benutzeroberfläche dynamisch ändern möchten, handelt es sich dabei um den oben erwähnten Status. Wir rendern die gesamte Seite, indem wir den Status dynamisch ändern, was wir später noch erwähnen werden. Weitere Einzelheiten finden Sie unter Detailliertes Verständnis von setState

Dies ist das Ende dieses Artikels zum Erstellen von Komponenten in React. Weitere Inhalte zum Erstellen von Komponenten in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!