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
– useState
– useEffect => Dieser Artikel
– useContext => Coming Soon

useEffect

Offizielle Dokumentation für useEffect

useEffect-Funktionsargumente

1. Während des Komponentenlebenszyklus auszuführende Funktion.
2. Array von Werten useEffect beobachtet Änderungen am Auslösen des Triggers. Das Übergeben eines leeren Arrays ahmt die Methoden und Methoden einer klassenbasierten React-Komponente nach .componentDidMountcomponentWillUnmount

Beschreibung

useEffectwird verwendet, um Code jedes Mal auszuführen (es ist möglich, das Auslösen von Funktionen auf bestimmte Bedingungen zu beschränken), wenn die Komponente auf dem Bildschirm gerendert wird. Es ist möglich, mehrere Instanzen von in einer Komponente zu verwenden useEffect, aber stellen Sie sicher, dass sie immer in derselben 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). useEffectFunktionen können auch nach sich selbst aufräumen, indem sie eine Funktion zurückgeben.

Beispiele

Verstehen der grundlegenden Verwendung und Aufräumen nach der Ausführung.

Der folgende Code wird nach jedem Rendern ausgeführt.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Persönliche Website
LinkedIn
Instagram