Heim > Web-Frontend > js-Tutorial > Meine Reaktionsreise: Tag 26

Meine Reaktionsreise: Tag 26

Barbara Streisand
Freigeben: 2024-12-30 18:59:09
Original
974 Leute haben es durchsucht

My React Journey: Day 26

Lebenszyklusmethoden und bedingtes Rendering

Heute markiert einen weiteren Schritt auf meiner React-Lernreise und dreht sich alles um Lebenszyklusmethoden und bedingtes Rendering. Zu verstehen, wie React-Komponenten entstehen, wachsen und schließlich das DOM verlassen, hat für mich das Spiel verändert. Hinzu kommt die Möglichkeit, Inhalte basierend auf Benutzerinteraktionen bedingt anzuzeigen, und plötzlich fühlt sich die Entwicklung dynamischer, benutzerfreundlicher Apps so süß an!

Lebenszyklusmethoden in Reaktionsfunktionskomponenten
Der Lebenszyklus besteht aus 3 Schritten:

1.Anfangsschritt (Montagephase):

  • Passiert, wenn die Komponente zum ersten Mal gerendert wird.
  • useEffect mit einem leeren Abhängigkeitsarray ([]) wird nur während dieser Phase ausgeführt. Beispiel:
useEffect(() => {
  console.log("Component mounted");
}, []);
Nach dem Login kopieren

2.Aktualisierungsschritt:

  • Wird ausgelöst, wenn sich der Status oder die Requisiten ändern.
  • React führt Ihre Funktionskomponente erneut aus, berechnet Zustände neu und übergibt aktualisierte Requisiten.
  • Verwenden Sie useEffect mit bestimmten Abhängigkeiten, um Änderungen zu verarbeiten:
useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);
Nach dem Login kopieren

3. Ausgangs-/Abmeldephase:

  • Passiert, wenn die Komponente aus dem DOM entfernt wird.
  • Bereinigungscode kann in der Rückgabefunktion von useEffect hinzugefügt werden, um Speicher freizugeben. Beispiel:
useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

Nach dem Login kopieren

Bedingtes Rendering

Diese Technik ist für das dynamische Rendern von Komponenten oder Elementen basierend auf Bedingungen unerlässlich.

Ternärer Operator
Beispiel für UserGreetings:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);
Nach dem Login kopieren

Kurzschlussbewertung
Für einfachere Bedingungen können Sie && verwenden, um Komponenten nur dann zu rendern, wenn eine Bedingung wahr ist:

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;
Nach dem Login kopieren

Inline-Bedingungsstile
Sie können Komponenten auch dynamisch formatieren:

const messageStyle = props.isLoggedIn
  ? {Farbe: „grün“}
  : { Farbe: "rot" };

return <h2>



<p><em>Das wird von Tag zu Tag besser</em></p>


          

            
        
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 26. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage