React ist ein Front-End-JavaScript-Framework. Während das Erstellen und Verwalten von HTML-Seiten mühsam sein kann, macht React die Dinge einfacher, indem es Bildschirmelemente und ihre Logik in Komponenten zerlegt.

React bringt viel mit, aber eine der nützlichsten Funktionen ist die Zustandsverwaltung. In diesem Artikel erfahren Sie, wie Sie den Status mit React Hooks verwalten. Bevor Sie fortfahren, wird in diesem Artikel davon ausgegangen, dass Sie die Grundlagen von React kennen.

Was sind Hooks in ReactJS?

Der Hook ist ein neues Konzept, das in React zur Verwaltung von Zuständen und anderen eingeführt wurde Funktionen von React. Durch die Verwendung von Hooks in React können Sie das Schreiben von langem Code vermeiden, der ansonsten Klassen verwenden würde. Das folgende Beispiel zeigt ein Beispiel für die useState Haken.

const [variable, setVariable] = useState (Anfangswert);

Hier das Variable ist der Staat und die setVariable ist die Funktion, die den Zustand setzt. useState ist der Haken, der den Anfangswert der Zustandsvariablen enthält. Machen Sie sich keine Sorgen, wenn dies für Sie keinen Sinn ergibt. Am Ende dieses Tutorials haben Sie Hooks im Griff.

Es gibt zwei Arten von Haken:

• Einfache Haken
  1. useState
  2. useEffekt
  3. useContext
• Zusätzliche Haken
  1. useRef
  2. useMemo
  3. useReducer

useState()

Die useState Hook hilft bei der Verwaltung des Zustands. Früher in der React-Entwicklung wurde die Zustandsverwaltung mithilfe von Klassen durchgeführt. Die Zustandssyntax wurde in den Konstruktor geschrieben und verwendet die Dies Stichwort. Mit der Einführung von React-Hooks haben Entwickler die Freiheit, den Zustand mithilfe funktionaler Komponenten zu verwalten.

Die Syntax von React-Hooks können Sie dem vorherigen Beispiel entnehmen. Das einfachste Beispiel zum Erklären useState() ist das Beispiel für die Zählvariable:

importiere {useState} aus "reagieren";
Funktion App() {
const [count, setCount] = useState (0);
Rückkehr (


Haken Beispiel

{zählen}

setCount (count+1)}>Add
setCount (count-1)}>Subtrahieren



);
}

Die useState Hook hat eine Variable und eine Methode, die verwendet wird, um den Wert der Variablen zu setzen. Die useState Hook akzeptiert den Anfangswert des Zustands als Parameter. Sie können einen beliebigen Wert für die Zählvariable mit der setCount Methode.

Der obige Code enthält zwei Schaltflächen, um den Wert des zu erhöhen und zu verringern zählen Variable. Beim Inkrementieren können Sie +1 zum aktuellen Zählerstand hinzufügen und -1 zum Verringern des Zählers um 1.

useEffekt

Die useEffekt Hook aktualisiert den Zustand auf der Webseite nach jeder Zustandsänderung. Die useEffekt Hook wurde eingeführt, um die Nebenwirkungen von klassenbasierten Komponenten zu entfernen. Vor der Einführung funktionsbasierter Komponenten wurden Zustandsänderungen anhand der Lifecycle-Komponenten verfolgt: KomponenteDidMount und KomponenteDidUpdate. Die useEffekt Hook akzeptiert ein Abhängigkeitsarray. Alle Änderungen der im Dependency-Array erwähnten Zustandsvariablen werden nachverfolgt und mit dem. angezeigt useEffekt Haken.

Ein klassisches Beispiel für die Verwendung des useEffekt Haken ist Daten von einer API abrufen oder die Likes oder Abonnements für einen Beitrag berechnen.

useEffect(()=>{
// Code
},[Abhängigkeitsarray]);

Betrachtet man das obige Beispiel

import { useState, useEffect } from "react";
Funktion App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Sie haben ${count} Mal geklickt`;
}, [zählen]);
Rückkehr (


Haken Beispiel

{zählen}

 setCount (Anzahl + 1)}>Add



);
}

Beim Passieren der zählen Zustandsvariable im useEffekt Dependency-Array überprüft es, ob sich der Zustand geändert hat oder nicht. Anschließend wird der Dokumenttitel auf die Zählvariable gesetzt.

useContext

Die useContext Hook hilft dabei, Daten durch die Komponente zu übertragen, ohne dies manuell über Requisiten zu tun. Es macht die Verwendung der Kontext-API schnell und einfach. Sie werden ein besseres Verständnis haben, nachdem Sie ein Beispiel durchgearbeitet haben.

Verstehen Sie zunächst, wie der Code ohne Kontext aussieht. Wie Sie sehen, müssen Sie den Text über Requisiten an die untergeordnete Komponente übergeben. Um Komplexitäten zu vermeiden, können Sie die useContext Haken.

Standardfunktion exportieren App() {
let text = "Hallo, Willkommen bei MUO";
Rückkehr (






);
}
const ChildComponent = ({ text }) => {
Rückkehr 
{Text}
;
};

Erstellen Sie zunächst einen Provider in Ihrer Hauptdatei (App.js).

const Context = React.createContext (null);

Die App Komponente ist die Komponente der obersten Ebene oder "übergeordnete" Komponente. Sie müssen die gesamte Komponente in die und übergeben Sie das Objekt oder die Daten, die Sie rendern möchten, an die untergeordnete Komponente.

Standardfunktion exportieren App() {
let text = "Hallo, Willkommen bei MUO";
Rückkehr (








);
}

Erstellen Sie nun eine untergeordnete Komponente und greifen Sie mit dem auf die Textstütze zu useContext Haken. Pass die Kontext variabel mit Kontext erstellen.

const ChildComponent = () => {
let text = useContext (Kontext);
Konsole.log (Text);
Rückkehr 
{Text}
;
};

Verwandt: JavaScript-Frameworks, die es wert sind, gelernt zu werden​​​​​

Viel mehr zu entdecken mit React

Sie haben gerade die Grundlagen von Hooks gelernt. Es ist eine der besten Funktionen von React und auch ziemlich entwicklerfreundlich. React ist eines der besten Frontend-Frameworks, um heute für Jobangebote zu lernen, Single-Page-Apps zu erstellen oder einfach nur Ihre Programmierkenntnisse zu erweitern.

Apropos Wissen erweitern: Die Verwaltung des Zustands ist nur eine Fähigkeit, die React-Entwickler üben müssen. Andere wichtige Funktionen wie Requisiten verdienen ebenso viel Aufmerksamkeit.

So verwenden Sie Requisiten in ReactJS

Wenn Sie Tipps zur Verwendung von Requisiten in ReactJS suchen, sind Sie hier richtig.

Weiter lesen

Über den Autor