React Tutorial Teil 20: Erste Lektion zum bedingten Rendern

In der Übersetzung des nächsten Teils des React-Tutorials werden wir heute über das bedingte Rendern sprechen.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 36. Bedingtes Rendern, Teil 1

→ Original

Bedingte Rendering-Technologien werden in Fällen verwendet, in denen gemäß einer bestimmten Bedingung etwas auf einer Seite angezeigt werden muss. In dieser Lektion wird erläutert, wie eine spezielle Nachricht angezeigt wird (möglicherweise durch einen Ladebildschirm dargestellt), während die Anwendung betriebsbereit ist, Daten lädt und nach dem Ersetzen ersetzt wird Diese Nachricht ist für etwas anderes.

Heute werden wir mit einer Anwendung experimentieren, die mit den Tools zum Erstellen und Reagieren von App.js Datei App.js enthält den folgenden Code:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

Darüber hinaus befindet sich in demselben Ordner, in dem sich die Datei App.js befindet, eine Conditional.js Komponentendatei mit den folgenden Inhalten:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

In dieser Phase der Arbeit wird diese Anwendung noch nicht funktionieren. Bei der Analyse des Materials werden wir sie reparieren.

Eine der Herausforderungen für React-Entwickler besteht darin, dass sie viele Tools erlernen müssen, die auf verschiedene Arten verwendet werden können. Ein Programmierer ist nicht unbedingt auf nur eine Möglichkeit beschränkt, ein bestimmtes Werkzeug zu verwenden. Dies wird durch die Tatsache beeinflusst, dass die React-Entwicklung der Entwicklung in einfachem JavaScript sehr nahe kommt.

Daher haben wir die Möglichkeit, unterschiedliche Ansätze zur Lösung derselben Probleme zu verwenden, sodass dieselben Tools auf unterschiedliche Weise verwendet werden können. Bedingtes Rendern ist der Bereich von React, in dem sich die oben genannten Ideen besonders stark manifestieren. Bevor wir beginnen, möchte ich darauf hinweisen, dass wir zwar verschiedene Ansätze für die Anwendung dieser Technologie analysieren werden, die tatsächlichen Optionen für ihre Verwendung jedoch nicht auf diese beschränkt sind.

Lassen Sie uns über den Code sprechen, mit dem wir jetzt experimentieren werden. Wir haben in der Datei App.js eine Komponente, die auf der Klasse basiert. Der Konstruktor hat einen Status initialisiert, der die auf true isLoading Eigenschaft isLoading enthält. Ein solches Design wird häufig in Fällen verwendet, in denen es beispielsweise erforderlich ist, Anforderungen an eine bestimmte API auszuführen, um eine Komponente in einen funktionsfähigen Zustand zu versetzen, und während die Komponente auf das Eintreffen von Daten wartet und diese analysiert, muss etwas auf dem Bildschirm angezeigt werden. Es kann 3-4 Sekunden dauern, bis der API-Aufruf abgeschlossen ist, und Sie möchten nicht, dass der Benutzer auf dem Bildschirm denkt, dass Ihre Anwendung abgestürzt ist. Infolgedessen verfügt der Status über eine Eigenschaft, die angibt, ob die Anwendung derzeit bestimmte Dienstaktionen ausführt. Das bedingte Rendern wird verwendet, um etwas anzuzeigen, das dem Benutzer mitteilt, dass die Anwendung gerade etwas im Hintergrund lädt.

Der App Komponentencode verfügt über eine componentDidMount() -Methode, die wir in Kürze diskutieren werden. In der Zwischenzeit achten wir auf die render() -Methode. Hier geben wir die Condition , die in den Code oben in der Datei App.js wird. Die Komponente isLoading an diese Komponente übergeben. Dies ist der aktuelle Wert der isLoading Eigenschaft aus dem Status der App Komponente. Der Code der Conditional Komponente gibt nichts zurück, was auf dem Bildschirm angezeigt werden kann. Wir werden uns etwas später mit dieser Komponente befassen. In der Zwischenzeit kehren wir aus dem App Komponentencode zur Methode componentDidMount() .

Denken Sie daran, dass wir mit der componentDidMount() -Methode unmittelbar nach der ersten Anzeige der Komponente, in unserem Fall der App Komponente, Code ausführen können. Im Code dieser Methode simulieren wir einen Aufruf an eine bestimmte API. Hier stellen wir den Timer auf eineinhalb Sekunden ein. Nach setTimeout() dieser Zeit wird der Code der an setTimeout() Funktion gestartet. In dieser Funktion wird basierend auf der Annahme, dass der Aufruf das Ende des Datenladens aus der API symbolisiert, eine Statusänderung durchgeführt. Die isLoading Eigenschaft wird nämlich auf false . Dies zeigt an, dass der Daten-Download abgeschlossen ist und die Anwendung danach normal funktionieren kann. In zukünftigen Klassen werden wir über die Verwendung der Funktion fetch() zum Laden von Daten sprechen. Im fetch() beschränken wir uns auf die obige Simulation dieses Prozesses.

Übrigens ist es hier noch einmal angebracht, das Thema der Methoden des Komponentenlebenszyklus anzusprechen. Tatsache ist, dass die Conditional Komponente einen neuen Eigenschaftswert erhält, sobald sich die Eigenschaft isLoading state von true in false ändert. isLoading die Komponente zum ersten Mal angezeigt wird, empfängt sie in der Eigenschaft isLoading true und nach Änderung des Status dieselbe Eigenschaft mit dem neuen Wert. Wenn sich der Status ändert, wird die render() -Methode erneut aufgerufen. Infolgedessen wird auch die Conditional Komponente erneut angezeigt. Denken Sie daran, dass Conditional eine gewöhnliche Funktionskomponente ist, dh, dass das erneute Rendern den wiederholten Aufruf der Funktion bedeutet, der es präsentiert wird. Was wir jedoch von dieser Funktion zurückgeben, wenn wir die Komponente erneut rendern, kann von dem abweichen, was zuvor zurückgegeben wurde. Der Grund für diese Änderung ist die Änderung dessen, was wir an die Komponente übergeben.

Die Conditional Komponente akzeptiert also die Eigenschaft isLoading . Bevor wir mit der Arbeit an dem Code beginnen, werden wir prüfen, ob die bereits vorhandenen Mechanismen funktionieren. Dazu geben wir ein Markup von der Komponente zurück und zeigen den Wert props.isLoading in der Konsole an. Danach sieht der Komponentencode folgendermaßen aus:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

Die darauf folgende Anwendungsseite sieht wie in der folgenden Abbildung dargestellt aus.


Anwendungsseite im Browser

Bitte beachten Sie, dass true unmittelbar nach dem Laden der Anwendung in der Konsole angezeigt wird und false - nach 1,5 Sekunden. Dies ist auf die Funktionsweise des obigen Mechanismus in der componentDidMount() -Methode der App Komponente zurückzuführen.

Lassen Sie uns nun über das bedingte Rendern sprechen. Seine Essenz liegt in der Tatsache, dass wir etwas nur dann auf dem Bildschirm anzeigen, wenn eine bestimmte Bedingung erfüllt ist. In diesem Fall können wir anstelle der Zeichenfolge Temp auf der Seite in der Conditional den Wert von props.isLoading überprüfen und, falls dies true , den Text Loading... auf der Seite anzeigen. Wenn dieser Wert false , was das Ende des Downloads angibt, können Sie einen anderen Text von der Komponente zurückgeben. Im Code sieht es folgendermaßen aus:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

Versuchen Sie, diesen Code bei Ihnen zu Hause auszuführen, die Seite zu aktualisieren und zu beobachten, wie beim Laden der Seite ein Text angezeigt wird und nach einer Weile ein anderer.

Angesichts der JavaScript-Funktionen können wir den obigen Code folgendermaßen vereinfachen:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

Wenn die im if Block überprüfte Bedingung wahr ist, funktioniert die return in diesem Block. Danach wird die Funktion abgeschlossen. Wenn die Bedingung falsch ist, ist der return aus diesem Block nicht erfüllt und die Funktion gibt zurück, was in der zweiten return der Funktion angegeben ist.

Lassen Sie uns nun darüber sprechen, wie Sie die Probleme des bedingten Renderns mit dem ternären Operator lösen können. Dieses Konstrukt existiert sehr lange in JavaScript. Es wird häufig in React verwendet, um bedingte Rendering-Aufgaben zu lösen. So sieht es aus:

  ? 1 : 2 

Der Wert von Ausdruck 1 wird zurückgegeben, wenn die Bedingung wahr ist, der Wert von Ausdruck 2 wird zurückgegeben, wenn die Bedingung falsch ist.

In unserem Fall kann der Code der Conditional Komponente mithilfe des ternären Operators wie folgt umgeschrieben werden:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

Dieses Design, obwohl es funktioniert, sieht ungewöhnlich aus. Tatsache ist, dass Komponenten normalerweise komplexere Designs zurückgeben. Wickeln Sie daher alles in ein <div> -Element:

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

Ein solcher Code funktioniert auch, obwohl er nicht mehr so ​​ist, wie er sollte. Alles, was im <div&gtl; . Um dies zu beheben, erinnern wir uns, dass die JS-Konstrukte, die in dem von den Komponenten zurückgegebenen Markup verwendet werden, in geschweiften Klammern eingeschlossen sein müssen und den Code entsprechend umschreiben müssen:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

Jetzt funktioniert alles wieder so wie es sollte.

Es ist zu beachten, dass in der realen Komponente das von ihnen zurückgegebene Markup komplizierter aussehen würde. Hier kann beispielsweise im oberen Teil der Anzeige der Komponente eine Navigationsleiste vorhanden sein, im unteren Teil kann eine „Fußzeile“ der Seite bereitgestellt werden und so weiter. Es kann so aussehen:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Darüber hinaus beeinträchtigt das Vorhandensein zusätzlicher Elemente in dem Markup, das von der Komponente zusätzlicher Elemente zurückgegeben wird, nicht die Mechanismen des bedingten Renderns. Außerdem werden diese Elemente sowohl angezeigt, wenn props.isLoading true , als auch wenn diese Eigenschaft false .

Eine weitere Verbesserung, die an diesem Code vorgenommen werden kann, basiert auf der Tatsache, dass props.isLoading , da props.isLoading um eine boolesche Eigenschaft handelt, die den Wert true oder false annimmt, direkt verwendet werden kann, ohne den strengen Vergleichsoperator mit true . Das Ergebnis ist folgendes:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Jetzt sind wir zu einem funktionierenden Beispiel für die Verwendung der bedingten Rendering-Technologie gekommen, aber die gleichen Ergebnisse können auf viele Arten erzielt werden. Beispielsweise werden in Komponenten wie unserer normalerweise Navigationsfelder und Seitenfußzeilen nicht angezeigt. Solche Seitenelemente werden normalerweise entweder von der App Komponente selbst oder von speziellen Komponenten angezeigt, die von der App Komponente angezeigt werden.

Darüber hinaus sollte beachtet werden, dass sich hier die gesamte Logik des bedingten Renderns innerhalb der render() -Methode der Funktionskomponente befindet, die nur durchgeführt wurde, um kompakten Code zu demonstrieren, der an einer Stelle zusammengestellt wurde. Wahrscheinlich sollte die App Komponente für das bedingte Rendern verantwortlich sein, und eine Komponente, die unserer Conditional Komponente ähnelt, sollte einfach anzeigen, was an sie übergeben wurde. Wenn die App Komponente dafür verantwortlich ist, herauszufinden, ob zu einem bestimmten Zeitpunkt etwas geladen wird, und wenn dieser Vorgang abgeschlossen ist, sollte sie höchstwahrscheinlich dafür verantwortlich sein, zu bestimmen, was auf der Seite angezeigt werden soll. Das heißt, in unserem Fall könnte der Code neu organisiert werden, indem die isLoading Eigenschaft in der render() -Methode der App Komponente überprüft und der Text wie Loading... isLoading falls der Download nicht abgeschlossen ist, oder indem eine Komponente ähnlich der Conditional Komponente in Conditional wird Wenn der Download abgeschlossen ist. Gleichzeitig akzeptiert die Conditional Komponente möglicherweise keine Eigenschaften aus der App und zeigt in jedem Fall nur an, was sie ausgeben soll.

So sieht der App-Komponentencode aus, der gemäß diesen Überlegungen konvertiert wurde:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

Und hier ist der aktualisierte Code der Conditional Komponente, in dem jetzt keine Überprüfung von Bedingungen erfolgt:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

Hier haben wir jedoch die Navigationsleiste und den "Keller" entfernt, was in diesem Fall jedoch nicht wichtig ist.

Zusammenfassung

In dieser Lektion fand Ihre erste Einführung in bedingte Rendering-Technologien statt. Nächstes Mal werden wir uns weiter mit ihnen befassen. Insbesondere erhalten Sie eine zweite Lektion zum bedingten Rendern und zur praktischen Arbeit zu diesem Thema.

Liebe Leser! Wenn Sie React-Anwendungen entwickeln, bitten wir Sie, uns mitzuteilen, wie Sie das bedingte Rendern durchführen.