Einführung in useRef und useState in JavaScript

1. useState-Hook

useState ist ein integrierter React hook , der es Ihnen ermöglicht, Informationen als Status in Variablen zu speichern. Es ermöglicht Ihnen, funktionalen Komponenten React Status hinzuzufügen. Im folgenden Beispiel deklariert useState() eine Statusvariable und der Wert wird in einer Zählvariable gespeichert. setCount ist die Funktion, die zum Aktualisieren dieses Werts verwendet wird.

//Importiere useState aus react

importiere React, { useState } von 'react';

Funktion Zählen() {

  //Deklariere eine neue Statusvariable namens count const [count, setCount] = useState(0);

2. useRef-Hook

useRef hook ist ein integrierter React hook , der ein Argument oder Parameter als Anfangswert annimmt und eine Referenz oder einen dauerhaften, veränderbaren Wert zurückgibt. Diese Referenz, kurz ref , enthält einen Wert, der mit der aktuellen Eigenschaft abgerufen werden kann.

Wir können die Benutzereingaben auch in Referenzen speichern und die gesammelten Daten wie folgt anzeigen:

//useRef-Hook importieren

importiere React, { useRef } von "react"

exportiere Standardfunktion App() {

  //Erstellen Sie eine Variable zum Speichern der Referenz const nameRef = useRef();

  Funktion handleSubmit(e) {

    //Verhindert das Neuladen der Seite beim Absenden e.preventDefault()

    // Ausgabename

    Konsole.log(NameRef.aktueller.Wert)

  }

  zurückkehren (

    <div Klassenname="Container">

      <form onSubmit={handleSubmit}>

        <div Klassenname="Eingabegruppe">

          <label>Name</label>

          <Eingabetyp="text" ref={nameRef}/>

        </div>

        <Eingabetyp="Senden"/>

      </form>

    </div>

  )

}

3. useRef und useState

• Im Gegensatz zum Status bleiben die in einem Verweis oder einer Referenz gespeicherten Daten oder Werte unverändert, auch nachdem die Komponente erneut gerendert wurde. Deshalb haben Referenzen keinen Einfluss auf die Komponentendarstellung, der Status jedoch schon.
• useState gibt 2 Eigenschaften oder ein Array zurück. Einer ist der Wert oder Status und der andere ist eine Funktion, die den Status aktualisiert. Im Gegensatz dazu gibt useRef nur einen Wert zurück, die tatsächlich gespeicherten Daten.
• Wenn sich der Referenzwert ändert, wird er ohne Neuladen oder erneutes Rendern aktualisiert. Aber in useState muss die Komponente erneut gerendert werden, um den Status oder seinen Wert zu aktualisieren.

4. Wann werden Refs und States verwendet?

refs sind nützlich, um Benutzereingaben und DOM Elementattribute abzurufen und kontinuierlich aktualisierte Werte zu speichern. Wenn Sie jedoch Informationen zu einer Komponente speichern oder Methoden in Ihrer Komponente verwenden möchten, sind states die beste Wahl.

Zusammenfassend lässt sich also sagen, dass diese beiden hook ihre eigenen Vor- und Nachteile haben und je nach Situation und Zweck verwendet werden.

Dies ist das Ende dieses Artikels über useRef und useState in JavaScript . Weitere Informationen zu useRef und useState in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!