Verwenden Callback mit den useState-Hooks in React

Wir werden useState einführen und Callback mit useState hooks in React verwenden.

useState in React

Die useState-Funktion ist ein eingebauter Hook, der aus dem React-Paket importiert werden kann, wodurch wir unseren funktionalen Komponenten einen Zustand hinzufügen können.

useState wurde von React 16.7 eingeführt. Die Verwendung eines useState-Hooks innerhalb einer Funktionskomponente ermöglicht es uns, ein Stück Zustand zu erstellen, ohne zu Klassenkomponenten zu wechseln.

Um Callback mit useState hooks zu verwenden, können wir useEffect verwenden.

Gehen wir ein Beispiel durch. Wir werden eine Schaltfläche erstellen; auf der Button-Klick-Seite wird der Titel geändert.

Zunächst deklarieren wir in app.js innerhalb der export default function App() zwei Konstanten click und setClick mit React useState.

# react
  const [click, setClick] = React.useState(0);

Mit useEffect erstellen wir eine Funktion, die den Wert von click überprüft. Wenn der click-Wert gleich oder größer als 1 ist, ändert er document.title in Button clicked, und wenn der click-Wert kleiner als 1 ist, wird document.title geändert zu No button clicked.

# react
React.useEffect(() => {
    if (click >= 1) {
      document.title = "Button Clicked!";
    } else {
      document.title = "No Button Clicked!";
    }
  }, [click]);

Jetzt geben wir das Layout zurück.

# react
<div className="App">
      <h1>Press button to see changes</h1>
      <button type="button" onClick={() => setClick(click + 1)}>
        Change Document Title
      </button>
    </div>

Ausgabe:

Wie in der obigen Ausgabe zu sehen ist, zeigt der Titel unserer Seite No button clicked an. Lassen Sie uns nun überprüfen, nachdem Sie auf die Schaltfläche geklickt haben.

Ausgabe: