Spezifische Verwendung von useRef in React

Ich glaube, dass Leute, die Erfahrung mit React haben, mit ref vertraut sind, das verwendet werden kann, um Komponenteninstanzobjekte oder DOM-Objekte abzurufen.

Neben der herkömmlichen Verwendung kann die useRef-Hook-Funktion Daten auch „über Rendering-Zyklen hinweg“ speichern.

Schauen wir uns zunächst die traditionelle Verwendung an:

importiere React, { useState, useEffect, useMemo, useRef } von „react“;

exportiere Standardfunktion App(props){
  const [Anzahl, Anzahl festlegen] = useState(0);

  const doubleCount = useMemo(() => {
    gibt 2 * Anzahl zurück;
  }, [zählen]);

  const counterRef = useRef();

  useEffect(() => {
    document.title = `Der Wert ist ${count}`;
    Konsole.log(counterRef.current);
  }, [zählen]);
  
  zurückkehren (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Anzahl: {count}, double: {doubleCount}</button>
    </>
  );
}

Der Code verwendet useRef, um ein counterRef-Objekt zu erstellen und weist es dem ref-Attribut der Schaltfläche zu. Auf diese Weise können Sie durch Zugriff auf couterRef.current auf das der Schaltfläche entsprechende DOM-Objekt zugreifen.

Dann schauen wir uns an, wie man Daten speichert.

Gibt es in einer Komponente etwas, das Renderzyklen überdauern kann, d. h. Eigenschaften, die unverändert bleiben, nachdem die Komponente mehrmalig gerendert wurde? Das erste, was einem in den Sinn kommt, sollte der Staat sein. Das stimmt, der Zustand einer Komponente kann nach mehreren Renderings unverändert bleiben. Das Problem mit dem Status besteht jedoch darin, dass nach seiner Änderung eine erneute Darstellung der Komponente erfolgt.

Derzeit kann useRef zum Speichern von Daten über Rendering-Zyklen hinweg verwendet werden, und eine Änderung führt nicht zum Rendern der Komponente.

importiere React, { useState, useEffect, useMemo, useRef } von „react“;

exportiere Standardfunktion App(props){
  const [Anzahl, Anzahl festlegen] = useState(0);

  const doubleCount = useMemo(() => {
    gibt 2 * Anzahl zurück;
  }, [zählen]);

  const timerID = useRef();
  
  useEffect(() => {
    timerID.current = setzeIntervall(()=>{
        setCount(Anzahl => Anzahl + 1);
    }, 1000); 
  }, []);
  
  Effekt verwenden(()=>{
      wenn(Anzahl > 10){
          LöschenInterval(TimerID.aktuell);
      }
  });
  
  zurückkehren (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Anzahl: {count}, double: {doubleCount}</button>
    </>
  );
}

Im obigen Beispiel verwende ich die aktuelle Eigenschaft des Ref-Objekts, um die Timer-ID zu speichern, sodass die Timer-ID nach mehreren Renderings gespeichert werden kann, sodass der Timer normal gelöscht werden kann.

Dies ist das Ende dieses Artikels über die spezifische Verwendung von useRef in React. Weitere relevante React useRef-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!