Haken reagieren

Hooks wurden React in Version 16.8 hinzugefügt.

Hooks ermöglichen Funktionskomponenten den Zugriff auf Status- und andere React-Funktionen. Aus diesem Grund werden Klassenkomponenten im Allgemeinen nicht mehr benötigt.

Was ist ein Haken?

Hooks ermöglichen es uns, uns in React-Funktionen wie Zustands- und Lebenszyklusmethoden einzuklinken.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Sie müssen importHaken aus react.

Hier verwenden wir den useStateHook, um den Anwendungsstatus zu verfolgen.

Status bezieht sich im Allgemeinen auf Anwendungsdaten oder Eigenschaften, die nachverfolgt werden müssen.

Hook-Regeln

Es gibt 3 Regeln für Haken:

• Hooks können nur innerhalb von React-Funktionskomponenten aufgerufen werden.
• Hooks können nur auf der obersten Ebene einer Komponente aufgerufen werden.
• Haken können nicht bedingt sein

Benutzerdefinierte Haken

Wenn Sie eine zustandsbehaftete Logik haben, die in mehreren Komponenten wiederverwendet werden muss, können Sie Ihre eigenen benutzerdefinierten Hooks erstellen.

Wir werden im Abschnitt Custom Hooks näher darauf eingehen .