Mit React Hooks können Sie Status- und andere React-Funktionen verwenden, ohne eine React-Klassenkomponente erstellen zu müssen. Mithilfe von Hooks können Sie voll funktionsfähige React-Anwendungen ausschließlich mit Funktionskomponenten erstellen. Nicht mehr class Example extends React.component {}erforderlich.

Einfache Haken

Alltagshaken für alltägliche Anwendungsfälle.

Grundlegende Hooks reagieren
– useEffect
– useState => Dieser Artikel
– useContext => Bald verfügbar

useState

Offizielle Dokumentation für useState

const [state, setState] = useState(initialState);

1. Ausgangszustand

Ein Array mit zwei Werten.

1. Neuester Stand
2. Funktion zum Aktualisieren des Status auf neue Werte

useStateakzeptiert einen Anfangswert und gibt zwei Werte zurück: den aktuellsten Zustand und eine Funktion zum Aktualisieren des Zustands. Die Werte werden in Form eines Arrays zurückgegeben und üblicherweise unter Verwendung von Array-Destrukturierungssyntax gelesen .

setStateist eine asynchrone Funktion, daher ist es wichtig zu bedenken, dass es einige Zeit dauern kann, bis sie abgeschlossen ist. Manchmal erfordert ein neuer Zustand die Berechnung des vorherigen Zustands. Das Berechnen eines neuen Zustands basierend auf einem alten Zustand kann erreicht werden, indem eine Funktion an die setStateMethode übergeben wird, die im zweiten ( [1]in Javascript-Array) Argument des zurückgegebenen Arrays bereitgestellt wird. Es ist darauf zu achten, dass die Funktionen useStateund useEffectjedes Mal in der gleichen Reihenfolge ausgeführt werden. Wenn die Funktionen useStateund useEffectnicht in der gleichen Reihenfolge ausgelöst werden, werden Sie eine sehr schlechte Zeit haben (mehr zum Erreichen der korrekten Reihenfolge weiter unten). In genauen Berechnungen wird zurückgegeben, wenn die Funktionsreihenfolge nicht eingehalten wird.

Beispiele

Rückgabewerte verstehen .useState

Der folgende Code kann auf mehrere Arten ausgedrückt werden.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Bären in Bullen verwandeln.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Der folgende Code fügt 27 zum vorherigen Zustand hinzu.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Lazy Initialisierung von Zustandsvariablen verstehen. React Docs Offizielle Erklärung.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Persönliche Website
LinkedIn
Instagram