[S7L2] React Lifecycle Flashcards
Was ist eine React Component?
- Erhält eine Component wenn sie von React.Component extended wird
- Kann mit Methoden über Lifecycle manipuliert werden
Welche Phasen des LifeCycles gibt es?
- Mounting (Geburt)
- Updating (Update)
- Unmounting (Tod)
Was geschieht beim Mounting/Geburt einer Component?
- Constructor Funktion wird gecalled und Data initialisiert
- Props werden erhalten und in Component als State geladen
- Render wird invoked und JSX Elemente werden in DOM Element gewandelt
- Danach wird componentDidMount invoked
Was geschieht beim Updating einer Component?
- Neue Props triggern as Updating
- this.setState ist kein Teil des Lifecycles, aber beeinflusst es, da alle Veränderungen durch setState laufen
- setState called render by default
- Dann wird componentDidMount invoked
Was geschieht beim Death/Unmounting einer Component?
-ComponentWillUmount wird invoked
Warum möchte man manchmal Components töten?
-Um den DOM sauber zu halten können nicht mehr benötigte und angezeigte Elemente getötet werden
Was meint v = fn(s)
view ist eine Funktion des States
- View ist was der Nutzer sieht/scrollt/klickt
- Fn ist die Component oder Klasse die Views oder Daten beinhlatet oder kapselt
- S Sind die Daten die vom View angezeigt werden
Wofür gibt es den constructor einer Component?
- Lädt Daten wie Props in die Componente als State
- Initialisiert die Componente bevor sie gemounted wird
- Kann genutzt werden um Klassenmethoden wie ClickHandler an die Renderfunction zu binden
Wofür gibt es die render Funktion einer Component?
- Ist Pflicht für alle Class Components
- Wenn getriggered wird UI zum DOM gerendert
- Involviert in Mounting und Updating Lifecycle
Was ist ein einer Class Component der State?
-Alles in this.state in dem Constructor
Was ist ein einer Class Component der View?
Alles in der render() Function
Wann wird componentDidMount() invoked?
- Nur einmal nachdem eine Component gemounted wird/geboren wird.
- Wird nach render() ausgeführt
- Wird für async data loading genutzt wo man Daten nach dem Rendern haben muss
Wie nutzt man componentDidMount()?
Under dem Constructor als Class Methode
componentDidMount(){
magic()
}
Was heißt es wenn eine Component gemounted wird?
-Die Component wird dem DOM hinzugefügt
Kann man in Function Components constructor, componentDidMount, componentDidUpdate oder componenWillUnmount nutzen?
- Nein Functional Components besitzen keine Methoden dieser Art
- Hooks können genutzt werden um dem zu entkommen
