Testen, probieren für Vue, JS, Node, Typscript und vieles mehr
Kategorie: React
Zusammenfassung
- useEffect initial : useEffect(…, [] )
- lazy State: setState( () => {} … )
- Das setState bspw. setData wird synchron einmalig aufgerufen
- useEffect wird asynchron einmalig aufgerufen
- im useEffect Fall muss mit nicht vorhandenen Daten umgegangen werden können, da erst nach dem rendenr useEffect aufgerufen wird
- nach dem rendern wird useEffect aufgerufen, hat Daten verfügbar
- über Seiteneffekt wird Komponente neu gerendert, wenn useState Änderung bemerkt
const [data, setData] = useState();
useEffect( ()=> {
setData( {...data})
});Mit useEffect führen wir Code aus, nachdem die Komponenten gerendert, also im DOM erzeugt wurden.
useEffect( () => doStuff() ); // erwartet eine Funktion
useEffect( () => doStuff(), [] ); //2 Parameter optional übergibt Dependencies
Wird der 2 Parameter übergeben, kann damit gesteuert werden, wann die Funktion ausgeführt wird. Andernfalls wird die Funktion bei jedem rendern ausgeführt!!!
Das ist bei Schnittstellenanfragen natürlich nicht immer gewünscht, jedes mal alle Daten anzufragen.Mit dem 2ten Parameter den Dependencies, kann man das steuern.
useEffect Hook
- asynchrone Ausführung, d.h. Anwendung wird nicht blockiert
- Code wird nach rendern der Komponente ausgeführt
- kein Rückgabewert
- über Seiteneffekte arbeiten ( Übergabe von geänderten Werten an den State), der dann ein Neurendern der Komponenten auslöst
- geeignet für
- langlaufende Berechnungen
- Schnittstellenkommunikation (bspw. REST)
- PUB-SUB-PATTERN
- Dependies (Abhängikeiten), nur bei Änderung der Abhängikeiten wird useEffect ausgelöst
- intital sind alle Abhängikeiten „neu“, d.h. es werden alle useEffect ausgelöst
3 Möglichkeiten Abhängkeiten zu übergeben
- ohne Parameter – Ausführung erfolgt bei jedem rendern
useEffect( () => doStuff()); - leere Liste (leeres Array) – Ausführung erfolgt nur initial
useEffect( () => doStuff(), [] ); - mit 1 oder mehrerer Abhängikeiten – Ausführung nur bei Änderung mindestens 1 Abhängikeit
useEffect( () => doStuff(), [count] );
Altes React
- Verwaltung in Klassen
- nur 1 pro Komponente möglich
Neues React
- Verwaltung in Funktionen
- mehrere States pro Komponente möglich
useState Hooks halten den State (Datenstand) und aktualisieren Ihn. Sie werden beim erstellen und rendern der Komponente aktualisiert.
useState ist für Number, String und kleine Objekte
- setState( ()=>{}) wird synchron aufgerufen
Normale Aktualisierung
- Ausgabe erfolgt synchron
//Übergabe als Objekt, erzeugt mit Spread-Operator eine Kopie, UI //wird immer aktualisiert, da immer neue Kopie bei Aufruf
// erstellt wird
<input type="button" onClick={
setData( {...data})
}
//Übergabe als Objekt, UI wird nicht aktualisiert, da Data-Obj da
//data Objekt bekannt und react reagiert nur auf Änderungen
<input type="button" onClick={
setData(data);
}Funktionale Aktualisierung (empfehlenswert)
- Ausgabe erfolgt asynchron (Konsolenausgabe daher evlt. unterschiedliche Abfolge)
- „Stale State“ (Zustand der nicht aktuell ist), kann verhindert werden
- immer verwenden, gerade wenn Zustände von einander abhängig sind
<p>Funktionale Aktualisierung</p>
<input type="button" onClick={ ()=> setData( prev => {
return {...prev};
})} value="5 - Funktionale Aktualisierung / Neues Objekt ohne Änderungen"></input>
<input type="button" onClick={ ()=> setData( prev => {
return prev;
})} value="6 - Funktionale Aktualisierung / gleiches Objekt ohne Änderungen"></input>
<input type="button" onClick={ ()=> setData( prev => {
prev.first = prev.first +"7";
return prev;
})} value="7 - Funktionale Aktualisierung / Original Objekt mit Änderungen"></input>Lazy intital State
Einmaliges lazy loading, wenn die Komponente erzeugt wird. Zum Beispiel Berechnungen die nur einmal geladen werden sollen.
Lebt solange die Komponente lebt.
//hier wird eine Funktion ausgeführt ……mit ()=>{}
const [data, setData] = useState(()=>{ return [ ….]}) // OK
//hier wird das Ergebnis einer Funktion übergeben, das geht nicht, initData würde bei jedem rendern der Komponente ausgeführt werden
const [data, setData] = useState(initData()) // Nicht OK
// Lazy Intialization State - einmalig beim rendern wird der State initialisiert bspw. für Berechnungen
// die für die Komponente bereitstehen sollen
export function LazyStateTest(){
console.log("---called LazyStateTest---");
const [show, setShow] = useState(false);
return (<Fragment>
<p>Lazy State Initialisierung - wenn Komponente eingeblendet wird</p>
<input type="button" onClick={()=>setShow(prev=> !prev)} value="toggle"></input>
{ show && <LazySate/>}
{ !show && <p>Komponente ausgeblendet</p>}
</Fragment>);
}
function LazySate(){
console.log("---called LazyState---");
const [count, countState] = useState(1)
const [data, setData] = useState(()=>{
console.log("--lazy state init");
return [
{ name:"Name1", age:42},
{ name:"Name2", age:32},
{ name:"Name3", age:14},
{ name:"Name4", age:13},
]
})
return (<>
<p>Konsole öffnen um Ausgabe zu sehen</p>
{data && data.map((entry,key)=>{
return <p key={key}>
<span>{entry.name}</span><span>{entry.age}</span>
</p>})}
</>);
}