Frontend dev @ best it
Gerald Urschitz
count: 0
Zustand
User Interface
count: 0
Zustand
User Interface
render
count: 0
Zustand
User Interface
render
count: 0
count: 1
Zustand
User Interface
render
count: 0
count: 1
Zustand
User Interface
render
render
Vorgestellt im Oktober 2018
Vorgestellt im Oktober 2018
Stabil seit React 16.8 (Februar 2019)
Vorgestellt im Oktober 2018
Stabil seit React 16.8 (Februar 2019)
Keine Breaking Changes
normale JavaScript-Funktion
props als Argument
normale JavaScript-Funktion
props als Argument
normale JavaScript-Funktion
gibt React Element zurück (z.B. via JSX)
props als Argument
normale JavaScript-Funktion
gibt React Element zurück (z.B. via JSX)
wie render() in Class Component
useState
Zustand in FC (Function Components)
useEffect
Code mit Side Effects in FC ausführen
8 weitere nützliche Hooks von React:
https://reactjs.org/docs/hooks-reference.html#additional-hooks
Update alle 5 Sekunden
Update alle 5 Sekunden
(vereinfacht)
(vereinfacht)
Mount
Component wurde in den DOM gerendert
(vereinfacht)
Mount
Update
Component wurde in den DOM gerendert
Props wurden verändert
(vereinfacht)
Mount
Update
Unmount
Component wurde in den DOM gerendert
Props wurden verändert
Component wird aus dem DOM genommen
Wechselkurs laden
Intervall definieren (setInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
State mit useState
Keine Lifecycle-Methoden in FCs
State mit useState
Keine Lifecycle-Methoden in FCs
State mit useState
keine "Side Effects" während der Render Phase
Keine Lifecycle-Methoden in FCs
keine "Side Effects" während der Render Phase
State mit useState
z.B. Data Fetching, DOM Manipulation, etc...
Side Effekt wird nach dem Rendern ausgeführt
z.B. Daten laden, Intervall setzen
Side Effekt wird nur nach Änderung der
Abhängigkeiten ausgeführt
posts: []
Zustand
User Interface
posts: []
Zustand
User Interface
render
posts: []
Zustand
User Interface
render
loadPosts()
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
loadPosts()
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
render
loadPosts()
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
render
loadPosts()
loadPosts()
Wird bei jedem render ausgeführt.
Wird bei jedem render ausgeführt.
d.h. in diesem Fall 2x
"Cleanup"-Funktion als Rückgabewert
z.B. Intervall löschen
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
"EUR"
"EUR"
"USD"
"USD"
1
"EUR"
"USD"
"USD"
"EUR"
1
"EUR"
"USD"
"EUR"
"USD"
1
"EUR"
"USD"
"EUR"
"USD"
1
RENDER
rate:
lastUpdated:
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
z.B: setRate(1.10) setLastUpdated(new Date())
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
2
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"USD"
"EUR"
"USD"
2
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
RENDER
rate:
lastUpdated:
1.10
19:30
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
RENDER
rate:
lastUpdated:
1.10
19:30
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
1
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
z.B: setRate(0.87) setLastUpdated(new Date())
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"EUR"
"GBP"
3
"EUR"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"GBP"
"EUR"
"GBP"
4
"EUR"
"EUR"
0.87
19:35
"EUR"
"GBP"
"GBP"
"GBP"
"EUR"
"GBP"
4
"EUR"
"EUR"
0.87
19:35
"EUR"
"GBP"
"GBP"
"GBP"
RENDER
rate:
lastUpdated:
0.87
19:35
JavaScript Funktion
JavaScript Funktion
kann andere Hooks beinhalten
JavaScript Funktion
kann andere Hooks beinhalten
Name fängt mit "use" an
z.B. useRate
JavaScript Funktion
kann andere Hooks beinhalten
Name fängt mit "use" an
Nicht in Loops, Conditions oder verschachtelten Funktionen!
Nicht in normalen JavaScript-Funktionen aufrufen!
State / Side Effects in Function Components
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
Simplerer und lesbarerer Code
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
Simplerer und lesbarerer Code
...ohne Anpassung der Component-Hierarchie!
Dan Abramov, React Maintainer