Grundlagen von React Hooks, useState Hooks

In dieser Geschichte werden wir alle Grundlagen zu React Hooks behandeln und den eingebauten React Hook namens useState () kennenlernen.

Voraussetzung -

Sie sollten die Grundlagen von HTML, Javascript, Was ist Reagieren und wie funktioniert es kennen .

Und wenn Sie diese Voraussetzungen erfüllen, können Sie loslegen .

Was ist React Hooks?

• React Hooks wurden in React 16.8 eingeführt .
• React-Hooks sind im Grunde genommen Funktionen, mit denen Sie den Status der Web-App verwalten und problemlos mit anderen React-Funktionen wie componenDidMount () , componenDidUpdate () arbeiten können, ohne eine Klasse zu schreiben .
• Sie können React-Hooks nur in Funktionskomponenten verwenden , nicht in klassendefinierten Komponenten.
• Mit einfachen Worten, wir können React Hooks als Funktionen definieren, mit denen Sie React State- und Lifecycle-Features von Funktionskomponenten „ einbinden “ können .
• Es gibt viele Arten von eingebauten React-Hooks -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

Was ist useState?

• useState ist einer der am häufigsten verwendeten React-Hooks.
• useState wird als Statusverwaltungs -Hooks einer bestimmten Komponente verwendet.
• Der useState-Hook wird verwendet, um den Status unserer Komponenten zu verarbeiten.
• Mit useState können wir Statusvariablen einfach und bequem erstellen und verarbeiten .
• In useState setzen wir den Anfangszustand der Zustandsvariablen und verwenden die von useState definierte Funktion , um diesen Zustand dieser Zustandsvariablen vom Anfangszustand in den aktuellen Zustand zu ändern .
• Wir können useState nur in Funktionskomponenten verwenden, nicht in klassenbasierten Komponenten .
• useState ist dasselbe wie this.stateund this.setStatein klassenbasierten React -Komponenten .
• Machen Sie sich keine Sorgen, wenn Sie den Status und den Status nicht richtig verstehen, wird dies in Ihrem Kopf völlig klar, sobald Sie ihn anhand eines Codebeispiels verstehen.

In diesem Abschnitt werde ich einen einfachen Zähler mit dem useState- Hook erstellen , damit Sie leicht verstehen können, wie useState funktioniert und wann es verwendet werden muss.

• Code -
• Code Erklärung -
• In der Zeile dieses Codes haben wir useStateHook aus importiert ‘react’.
• Danach erstellen wir eine Funktionskomponente, die Appin der Datei App.js aufgerufen wird.
• In dieser Funktionskomponente erstellen wir eine Statusvariable mit dem Namen count und die Funktion useState setCount.
• In der 6. Zeile dieses Codes verwenden wir den useState-Hook, in dem wir die Statusvariable aufgerufen haben. Um count den Status dieser Anzahl zu ändern, haben wir eine aufgerufene Funktion erstellt setCount.
• Hier in useState(0)0 indiacierter Anfangszustand des count Zustands varibale. Wenn unsere App-Komponente geladen wird, ist der Wert der count Statusvariablen zunächst 0. Mit setCountder Methode können wir den Wert der count Statusvariablen ändern .
• Jetzt haben wir eine Methode namens aufgerufen, decreamentdie den count Wert der Statusvariablen um 1 verringert, wenn wir auf die Schaltfläche (dekrementieren -) klicken . Grundsätzlich setzt diese Methode den Status der countVariablen auf die count-1Verwendung der setCountMethode.
• Jetzt haben wir eine Methode namens aufgerufen, increamentdie den count Wert der Statusvariablen um 1 erhöht, wenn wir auf die Schaltfläche (inkrementieren +) klicken . Grundsätzlich setzt diese Methode den Status der countVariablen auf die count+1Verwendung der setCountMethode.
• Im return Abschnitt dieses Codes ist selbsterklärend und in der Schaltfläche ( Inkrement +) haben wir die increament Methode im onClick Ereignis übergeben und in der Schaltfläche (Dekrement-) haben wir die decreamentMethode übergeben.

Fazit

Hier in diesem Artikel haben wir die Grundlagen von React-Hooks und was useState-Hook ist, wie es funktioniert und wie es implementiert wird behandelt .

Ich hoffe, euch hat das Lesen und Lernen gefallen.

Wenn Ihnen dieser Artikel gefallen hat, können Sie gerne einen Klatsch hinterlassen und ihn mit anderen teilen, damit auch sie daraus lernen können.