Den useRef-Hook in React verstehen

Der useRefHook ist ein wesentliches Tool in React, das es uns ermöglicht, Werte zwischen Renderings zu speichern, direkt auf DOM-Elemente zuzugreifen und unnötige erneute Renderings zu vermeiden. Es wird oft mit useStateHook verglichen, dient aber einem anderen Zweck.

Was ist der useRef-Hook?

Der useRef-Hook erstellt einen Verweis auf einen Wert oder ein DOM-Element, der zwischen Komponenten-Renderings bestehen bleibt. Der Hauptunterschied zwischen useRef und useState besteht darin, dass die Aktualisierung des useRef-Werts kein erneutes Rendern auslöst, was in bestimmten Szenarien besonders nützlich sein kann.

1. Es werden keine erneuten Renderings ausgelöst, wenn sich der Wert ändert.
2. Es kann zum Speichern veränderlicher Werte verwendet werden.
3. Es kann verwendet werden, um direkt auf DOM-Elemente zuzugreifen.

Grundlegende Syntax

const refContainer = useRef(initialValue);

Beispiel 1: Werte zwischen Renderings beibehalten

import React, { useRef, useEffect } from "react";

function RenderCount() {
  const renderCount = useRef(1);

  useEffect(() => {
    renderCount.current = renderCount.current + 1;
  });

  // Inline styles
  const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100vh",
    backgroundColor: "#f4f4f4",
  };

  const headingStyle = {
    fontSize: "2rem",
    color: "#333",
    fontFamily: "Arial, sans-serif",
    backgroundColor: "#fff",
    padding: "20px",
    borderRadius: "8px",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
  };

  return (
    <div style={containerStyle}>
      <h1 style={headingStyle}>
        This component has rendered {renderCount.current} times.
      </h1>
    </div>
  );
}

export default RenderCount;

Ausgabe

Beispiel 2: Zugriff auf DOM-Elemente

import React, { useState, useRef } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);

  // Start the timer
  const startTimer = () => {
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds + 1);
      }, 1000);
    }
  };

  // Stop the timer
  const stopTimer = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  // Reset the timer
  const resetTimer = () => {
    stopTimer();
    setSeconds(0);
  };

  // Inline styles
  const timerContainerStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    height: "100vh",
    backgroundColor: "#f0f2f5", // Light neutral background
  };

  const timerDisplayStyle = {
    fontSize: "3rem",
    color: "#2c3e50", // Dark blue-gray for a professional look
  };

  const buttonStyle = {
    padding: "10px 20px",
    margin: "10px",
    fontSize: "1rem",
    backgroundColor: "#2980b9", // Professional blue
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
    transition: "background-color 0.3s ease-in-out",
  };

  const buttonHoverStyle = {
    backgroundColor: "#1a5276", // Darker shade for hover effect
  };

  return (
    <div style={timerContainerStyle}>
      <h1 style={timerDisplayStyle}>{seconds} seconds</h1>
      <div>
        <button
          style={buttonStyle}
          onClick={startTimer}
          onMouseOver={(e) => (e.currentTarget.style.backgroundColor = buttonHoverStyle.backgroundColor)}
          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = buttonStyle.backgroundColor)}
        >
          Start
        </button>
        <button
          style={buttonStyle}
          onClick={stopTimer}
          onMouseOver={(e) => (e.currentTarget.style.backgroundColor = buttonHoverStyle.backgroundColor)}
          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = buttonStyle.backgroundColor)}
        >
          Stop
        </button>
        <button
          style={buttonStyle}
          onClick={resetTimer}
          onMouseOver={(e) => (e.currentTarget.style.backgroundColor = buttonHoverStyle.backgroundColor)}
          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = buttonStyle.backgroundColor)}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

export default Timer;

Ausgabe

Wann sollte useRef anstelle von useState verwendet werden?

Hier sind einige Szenarien, in denen useRefis geeigneter ist als useState:

Wenn Sie einen Wert speichern müssen, der bei Aktualisierung kein erneutes Rendern auslösen muss (z. B. Timer, Zähler oder Tracking-Renderings).
Wenn Sie direkt auf DOM-Elemente zugreifen oder diese ändern müssen, ohne ein erneutes Rendern zu verursachen.

Das obige ist der detaillierte Inhalt vonDen useRef-Hook in React verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!