Was ist Hook-In-Reaktion?

In React ist Hook eine neue Funktion von React16.8, mit der Status- und andere React-Features verwendet werden können, ohne dass Klassen geschrieben werden müssen. Sie können Funktionskomponenten verwenden, um einige Features in React zu verwenden, oder Sie können Funktionskomponenten verwenden state und implementiert gemeinsame Statusoperationen zwischen Komponenten über benutzerdefinierte Hooks.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist Hook in React?

React-Hook ist eine neue Funktion, die in React eingeführt wurde und es React-Funktionskomponenten ermöglicht, auch einen Status zu haben Neue Funktionen in 16.8. Sie können damit Status- und andere React-Funktionen verwenden, ohne Klassen schreiben zu müssen. Um es einfach auszudrücken: Sie können Funktionskomponenten verwenden, um einige Funktionen in React zu verwenden.

Zu lösende Probleme:

Lösen Sie das schwierige Problem der Wiederverwendung der Zustandslogik zwischen Komponenten. Was Hooks lösen können, ist, dass Sie dies nicht tun müssen Wenn Sie die vorherige Komponentenstruktur wiederverwenden, ohne Hooks zu verwenden, müssen Sie einige erweiterte Verwendungszwecke wie erweiterte Komponenten, Anbieter, Kunden usw. verwenden. Diese Methode ist für Anfänger nicht sehr benutzerfreundlich und möglicherweise einfacher zu verstehen Bei komplexen Komponenten können Sie deren Logik aufteilen. Wenn Sie beispielsweise Lebenszyklusfunktionen verwenden, müssen zu unterschiedlichen Zeiten unterschiedliche Lebenszyklen ausgeführt werden. Daher gibt es zu diesem Zeitpunkt einige Lebenszyklusfunktionen der Logik, was die Lesbarkeit erheblich beeinträchtigt. Wenn Sie Hooks verwenden, können Sie die Komponentenlogik aufteilen und dieselbe Logik integrieren, was einerseits die Lesbarkeit erheblich erhöht und andererseits die Wartung erleichtert. Beim ersten Mal müssen Sie die Bedeutung verstehen dieses Schlüsselworts in der aktuellen Komponente, wird aber im Hook nicht benötigt. Es kann das Problem lösen, die Eigenschaften von React ohne die Verwendung von Klassenkomponenten zu verkörpern. Beachten Sie, dass Hook- und Klassenkomponenten nicht gleichzeitig verwendet werden können. Sie müssen während des tatsächlichen Verwendungsprozesses aufpassen, da sonst ein Fehler auftritt .

Verwendung von React-Hook

React bietet zwei Hook-Funktionen, useState und useEffect, um Stack-Hooks und Effect-Hooks zu erstellen

Der Eingabeparameter von useState ist der Anfangszustand und der Ausgabeparameter ist der aktuelle Zustand und die Funktion, die den Zustand aktualisiert.

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState erstellt einen Zustand, wenn er zum ersten Mal ausgeführt wird, und dieser Zustand wird verwendet in nachfolgenden Ausführungen;

effect Hook

useEffect kann Komponenten Nebeneffektlogik hinzufügen

Mein persönliches Verständnis der sogenannten Nebeneffekte ist die Interaktion mit der Welt außerhalb des Reaktionsbereichs, wie z. B. DOM-Operationen , Netzwerkanfragen usw. (Um ehrlich zu sein, habe ich nicht vollständig verstanden, was Nebenwirkungen sind); useEffect hat zwei Eingabeparameter. Der erste Parameter ist eine Nebeneffektfunktion und der zweite Parameter ist ein Array, das zur Bestimmung verwendet wird ob der Nebeneffekt ausgeführt werden soll;

rrree

Der Nebeneffekt definiert den Ausführungsprozess, seine Rückgabewertfunktion definiert den Bereinigungsprozess Komponentenfunktionen sind wie Teil des Rendering-Ergebnisses. Die vorherigen Nebenwirkungen werden vor dem Rendern und vor der Zerstörung der Komponente gelöscht. Dadurch können unsere Nebenwirkungen alle Requisiten lesen und angeben

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

Wenn Sie nicht bei jedem Rendern Nebenwirkungen ausführen möchten, können Sie ein Array an den zweiten Parameter von useEffect übergeben. Wenn sich die Elemente im Array nicht ändern, werden die Nebenwirkungen nicht ausgelöst. ;

Benutzerdefinierter Hook

Ein benutzerdefinierter Hook ist eigentlich eine gewöhnliche Funktion, die intern useState und useEffect verwendet, und der Funktionsname beginnt mit use;

Mit einem benutzerdefinierten Hook kann Komponentenlogik in eine wiederverwendbare Funktion extrahiert werden ;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

TODO

Render-Requisiten, höherwertige Komponenten und Hinweise zur Effektleistungsoptimierung

Empfohlenes Lernen: „

React-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas ist Hook-In-Reaktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!