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):
useEffect(() => { console.log("Component mounted"); }, []);
2.Aktualisierungsschritt:
useEffect(() => { console.log("State or props updated!"); }, [dependency1, dependency2]);
3. Ausgangs-/Abmeldephase:
useEffect(() => { const handleResize = () => console.log("Resized!"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); console.log("Component unmounted, cleanup done!"); }; }, []);
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> );
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>;
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>
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!