Der Hauptgrund für das Schreiben eines benutzerdefinierten Hooks ist die Wiederverwendbarkeit des Codes. Anstatt beispielsweise denselben Code über mehrere Komponenten hinweg zu schreiben, die dieselbe gemeinsame Zustandslogik verwenden (z. B. eine „setState“- oder localStorage-Logik), können Sie diesen Code in einen benutzerdefinierten Hook einfügen und ihn wiederverwenden. Ich zeige Ihnen, wie Sie ihn implementieren einige nützliche benutzerdefinierte Hooks.

usePrevious

Eine häufig gestellte Frage lautet: „Wie erhalte ich bei der Verwendung von Hooks den vorherigen Wert von Props oder State?“ . Mit React-Klassenkomponenten verfügen Sie über die Methode „componentDidUpdate“, die frühere Requisiten und Zustände als Argumente empfängt, oder Sie können eine Instanzvariable aktualisieren (this. previous = value) und später darauf verweisen, um den vorherigen Wert zu erhalten. Wie können wir dies also innerhalb einer Funktionskomponente tun, die keine Lebenszyklusmethoden oder eine Instanz zum Speichern von Werten hat? Haken zur Rettung! Wir können einen benutzerdefinierten Hook erstellen, der den useRef-Hook intern zum Speichern des vorherigen Werts verwendet. Sehen Sie sich das Rezept unten mit Inline-Kommentaren an.

import { useRef, useEffect } from "react";

export function usePrevious<T>(value: T): T | undefined {
  /* The ref object is a generic container whose current property is mutable
  and can hold any value, similar to an instance property on a class */
  const ref = useRef();

  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes

  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

// Ref: https://usehooks.com/usePrevious/

import React, { useState } from "react";

const prices = [100, 200, 300, 400, 500, 600, 700];

const Price = ({ price }) => {
  const prevPrice = usePrevious(price);
  const icon = prevPrice && prevPrice < price ? '' : '';

  return (
    <div>
      Current price: {price}; <br />
      Previous price: {prevPrice} {icon}
    </div>
  );
};

const Page = () => {
  const [price, setPrice] = useState(100);

  const onPriceChange = (e) => setPrice(Number(e.target.value));

  return (
    <>
      <select value={price} onChange={onPriceChange}>
        {prices.map((price) => (<option value={price}>{price}$</option>))}
      </select>
      <Price price={price} />
    </>
  );
}

Ein Haken, der einfach zu verwenden ist setTimeout(callback, delay)und Folgendes sollte:

1. Setzen Sie den Timer zurück, wenn sich die Verzögerung ändert.
2. Setzen Sie den Timer NICHT zurück, wenn sich nur der Rückruf ändert.

export function useTimeout(callback: () => void, delay: number) {
  const callbackFn = React.useRef(null)
  callbackFn.current = callback

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (callbackFn.current) {
        callbackFn.current()
      }
    }, delay)

    return () => {
      clearTimeout(timeoutId)
    }
  }, [delay]) // Only re-run if delay changes
}

import { useState } from 'react'

export default function Component() {
  const [visible, setVisible] = useState(true)

  const hide = () => setVisible(false)

  useTimeout(hide, 5000)

  return (
    <div>
      <p>
        {visible
          ? "I'm visible for 5000ms"
          : 'You can no longer see this content'}
      </p>
    </div>
  )
}

3. Fragen stammen vonhttps://bigfrontend.dev/react
4. https://usehooks.com/usePrevious/

https:///@lama.ibrahim96/whats-the-difference-between-for-in-and-object-keys-6d872a3d526a

Vielen Dank fürs Lesen. Wenn Sie aus diesem Artikel etwas gelernt haben, folgen Sie mir bitte. Ich werde weitere Inhalte zu React und Javascript veröffentlichen.