React HooK= { Kurz erklärt};

useState ist ein React Hook, mit dem Sie Ihren Komponenten einen Status hinzufügen können, indem Sie ein Array mit zwei Variablen zurückgeben: state, setState. Der aktuelle Status und die Funktion, die beim Aufruf zur Setter-Funktion wird. Es kann zum Verfolgen von Daten oder Eigenschaften verwendet werden, die in einer Anwendung verfolgt werden müssen, z. B. Zeichenfolgen, Zahlen, boolesche Werte, Arrays oder Objekte.
Beispiel:

const [state, setState] = useState();

Einfach ausgedrückt ändert sich der Status irgendwann und muss aktualisiert werden. Daher aktualisiert „setState“ den Status und löst im Laufe der Zeit ein erneutes Rendern Ihrer Komponenten aus.

Darüber hinaus kann useState jede Art von Javascript-Wert enthalten, einschließlich Objekten. Denken Sie IMMER daran, dass Sie Objekte, die Sie im Reagieren-Zustand halten, niemals direkt ändern sollten. Zuerst müssen Sie ein neues erstellen oder eine Kopie eines vorhandenen erstellen und dann State auf die neue Kopie setzen. Zum Beispiel:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

Um useState in einer React-Komponente zu verwenden, müssen Sie es zunächst aus React importieren, indem Sie den folgenden Code oben auf der Seite der Komponente auf zwei verschiedene Arten schreiben. Beide funktionieren perfekt, damit Sie Ihr Gift auswählen können.

import React from 'react'; 
import {useState} from 'react';

Oder Sie können in einer Zeile schreiben

import React, {useState} from 'react';

Reagieren Der Hook useState kann auf der obersten Ebene einer Komponente oder innerhalb benutzerdefinierter Hooks aufgerufen werden, jedoch nicht innerhalb von Schleifen oder Bedingungen.

const [initialState, setInitialState] = useState();

Der InitialState wird nur während des ersten Renderings verwendet und wird bei nachfolgenden Renderings ignoriert.
Die initialState-Funktion wird an die setInitialState-Funktion übergeben, sie verwendet den vorherigen Status als Argument und gibt einen newState zurück.

Außerdem gibt es meiner Meinung nach keine besonderen Regeln darüber, wo man Hooks in React verwenden darf und wo nicht. Natürlich müssen Sie vorsichtig und taktisch vorgehen, um Ihren Code organisiert zu halten.

In einem meiner Projekte, dem Aufbau einer SPA (Single Page App), gab es verschiedene Komponenten, um mein Ziel zu erreichen. Das Geheimnis einer guten Organisation besteht darin, den Überblick über Ihre Komponenten zu behalten. Beispielsweise verwendet Ihre App.js-Komponente {useState}, je nachdem, welche Art von Daten aktualisiert werden müssen.
Lassen Sie uns einen weiteren leistungsstarken Hook von React namens {useEffect} vorstellen und ihn zusammen mit {useState} verwenden, um zu erklären, wie dieser Hook Operationen an Daten durchführt. Das folgende Beispiel stammt aus meiner App.js-Komponente, die ich kürzlich in einem Projekt verwendet habe. Ich habe mit einer db.json-Dateidaten für Spielzeug gearbeitet, die die Entwicklung von Kindern im ersten Jahr unterstützen soll. Dies ist mein Endpunkt http://localhost:4000/toys, um Ihnen zu helfen, den Prozess zu verstehen, wie {useState} und {useEffect} innerhalb einer Anwendungskomponente funktionieren.

Zuerst:Initialisierungsstatus:

const [toys, setToys] = useState([]);

• Diese Zeile initialisiert eine Zustandsvariable mit einem leeren Array [] als Anfangswert.
• setToys ist eine Funktion, die zum Aktualisieren des Spielzeugstatus verwendet wird.

Zweitens:Daten zur Komponentenmontage abrufen:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• Der {useEffect}-Hook wird verwendet, um Nebenwirkungen in der Komponente auszuführen.
• Die Funktion in {useEffect} wird einmal ausgeführt, wenn die Komponente bereitgestellt wird, da das Abhängigkeitsarray ([]) leer ist.

Drittens:Spielzeugdaten abrufen:

• fetch("http://localhost:4000/toys")
  • Diese Zeile sendet eine GET-Anfrage an die angegebene URL, um Spielzeugdaten abzurufen.
• .then(response => Response.json())
  • Die Antwort der Abrufanforderung wird in das JSON-Format konvertiert.
• .then(toysData => setToyData(toysData));
  • Die JSON-Daten (toysData) werden verwendet, um den Spielzeugstatus mithilfe der setToys-Funktion zu aktualisieren.

Um genauer zu verstehen, wie beide {useState, useEffect} funktionieren, können Sie die offizielle React-Website besuchen. Eine weitere hilfreiche Quelle ist außerdem die Website von w3schools, die mein persönlicher Favorit ist. Mit Beispielen, die Sie im eigenen Browser ausprobieren können, geht es direkt auf den Punkt. Wenn Sie schließlich eine eher technische Quelle benötigen, helfen Ihnen die MDN-Webdokumente weiter.

Das obige ist der detaillierte Inhalt vonReact HooK= { Kurz erklärt};. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!