React Hooks Essentials

Konzept-Highlights:

1. Was sind Hooks?
2. Warum Haken verwenden?
3. useState
4. useEffect
5. useReducer
6. useRef
7. Benutzerdefinierte Haken
8. Mit Dispact umschalten
9. Was ist UseHooks.com?

1. Was sind Hooks und warum?

In React sind Hooks spezielle Funktionen, die es Ihnen ermöglichen, Status- und andere React-Funktionen in Funktionskomponenten zu verwenden, ohne sie in Klassenkomponenten konvertieren zu müssen. Hooks wurden in React 16.8 eingeführt und erleichtern die Wiederverwendung von Logik zwischen Komponenten, die Verwaltung des Zustands und die Verwaltung von Nebenwirkungen wie Datenabruf oder Abonnements – alles innerhalb funktionaler Komponenten.

2. Warum Haken verwenden?

• Cleaner Code: Hooks vereinfachen die Struktur Ihrer Komponenten, indem sie es Ihnen ermöglichen, Status und Nebenwirkungen direkt in Funktionskomponenten zu verwalten.
• Wiederverwendbarkeit: Mit benutzerdefinierten Hooks können Sie zustandsbehaftete Logik wiederverwenden, ohne Code zu duplizieren oder Komponenten umzustrukturieren.
• Funktionale Komponenten: Mit Hooks können Sie funktionale Komponenten schreiben, die genauso leistungsfähig sind wie Klassenkomponenten, was zu einer konsistenteren Codebasis führt.

3. useState

Der useState-Hook ist für die Zustandsverwaltung in Funktionskomponenten von grundlegender Bedeutung. Anstatt Klassenkomponenten mit this.setState() zu verwenden, können Sie den Status mit diesem Hook nahtlos verwalten.

Syntax:

const [state, setState] = useState(initialState);

z. B.) In diesem Beispiel initialisiert es count mit einem Wert von 0 und verwendet die setCount-Funktion, um es zu aktualisieren, wenn auf die Schaltfläche geklickt wird.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. useEffect

Mit dem useEffect-Hook können Sie Nebenwirkungen in Ihren Komponenten verarbeiten, z. B. das Abrufen von Daten, das Aktualisieren des DOM oder das Abonnieren von Ereignissen.

Syntax:

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);

z. B.) In diesem Beispiel ruft useEffect Daten von einer API ab, wenn die Komponente bereitgestellt wird. Das leere Array [] als zweites Argument stellt sicher, dass der Effekt nur einmal ausgeführt wird (wie „componentDidMount“).

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

5. Verwenden SieReducer

Wenn Ihre Zustandslogik komplexer wird, sollten Sie die Verwendung von useReducer anstelle von useState in Betracht ziehen. Es ähnelt Redux, jedoch auf Komponentenebene. Sie können damit Zustandsübergänge basierend auf Aktionstypen verwalten.

Syntax:

const [state, dispatch] = useReducer(reducer, initialState);

z.B.) In diesem Beispiel verarbeitet useReducer zwei Aktionen: Inkrementieren und Dekrementieren. Sie verwenden den Versand, um Statusaktualisierungen basierend auf diesen Aktionen auszulösen.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

6. useRef

Der useRef-Hook bietet eine Möglichkeit, direkt auf DOM-Elemente zuzugreifen und diese zu bearbeiten oder veränderliche Werte über mehrere Renderings hinweg zu speichern, ohne dass es zu erneuten Renderings kommt.

Syntax:

const myRef = useRef(initialValue);

z. B.) In diesem Beispiel ermöglicht useRef den direkten Zugriff auf die Eingabedatei und ermöglicht so die programmgesteuerte Fokussierung, wenn auf die Schaltfläche geklickt wird.

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

7. Benutzerdefinierte Haken

Einer der leistungsstarken Aspekte von Hooks besteht darin, dass Sie Ihre benutzerdefinierten Hooks erstellen können, um Logik komponentenübergreifend zu kapseln und wiederzuverwenden. Benutzerdefinierte Hooks beginnen mit „use“ und sind lediglich normale JavaScript-Funktionen, die andere Hooks verwenden können.

z. B.) In diesem Beispiel verarbeitet der useFetch-Hook die Datenabruflogik und kann in mehreren Komponenten wiederverwendet werden.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}

8. Mit Versand umschalten

Die Dispatch-Methode kann in Kombination mit useReducer verwendet werden, um Umschaltzustände zu erstellen, was für die Handhabung von Komponenten wie Modalitäten, Dropdowns oder Umschaltthemen hilfreich ist.

z. B.) Die Umschaltaktion in der Versandmethode schaltet den isVisible-Status zwischen wahr und falsch um, was wiederum die Sichtbarkeit von Inhalten umschaltet.

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

function ToggleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}

9. Was ist UseHooks.com?

Wenn Sie tiefer in Hooks eintauchen oder nützliche benutzerdefinierte Hooks für Ihre Projekte erkunden möchten, empfehle ich Ihnen dringend, einen Blick auf UseHooks.com zu werfen. Es ist eine fantastische Ressource mit unzähligen praktischen, benutzerdefinierten Hooks, die Sie verwenden und von denen Sie lernen können.

Das obige ist der detaillierte Inhalt vonReact Hooks Essentials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!