Einführung

Der Hook useEffectist einer der wichtigsten React-Hooks, die Sie kennen müssen. Es ermöglicht Ihnen, Seiteneffekte in funktionalen Komponenten auszuführen, wenn eine Änderung eintritt. Mit dem useEffectHook können Sie also viele Dinge in React tun, z. B. Daten abrufen, mit dem DOM arbeiten und vieles mehr.

In diesem Artikel lernen wir den UseEffect-Hook in React anhand einiger praktischer Beispiele kennen. Lassen Sie uns direkt darauf eingehen.

Wie verwende ich UseEffect?

Der Hook useEffectakzeptiert zwei Parameter. Der erste ist obligatorisch, was eine Callback-Funktion ist. Andererseits ist der zweite Parameter (Array von Werten oder ein leeres Array) optional und wir verwenden ihn, wenn wir möchten, dass der Hook nach dem Moment ausgeführt wird, in dem ein bestimmter Wert in unserer Anwendung gerendert wird.

Um den Hook verwenden zu useEffectkönnen, müssen Sie ihn zunächst aus dem React-Paket importieren.

Hier ist ein Beispiel:

import React, { useEffect } from 'react';

Wenn etwas in Ihrer Anwendung aktualisiert wird und Sie etwas tun möchten, sollten Sie useEffect. Das folgende Beispiel greift auf das DOM zu, um den Hintergrund des Körpers mit zu ändern useEffect:

useEffect(()=>{
  document.body.style.background = "black";
});

Hier ist das Beispiel:

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

Wir können auch Nebeneffekte ausführen, wenn sich ein bestimmter Wert in unserer Komponente ändert.

Hier ist ein Beispiel:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

Die Aufräumfunktion

Wenn Ihre Anwendung viele Nebenwirkungen definieren muss, müssen Sie eine Bereinigungsfunktion verwenden, die jede Nebenwirkung bereinigt, wenn sie auftritt. Andernfalls wird die Leistung Ihrer Anwendung beeinträchtigt.

Nehmen wir ein einfaches Beispiel, bei dem Sie eine Webseite haben, die die Bildschirmbreite in Pixeln anzeigt, wenn ein Benutzer die Größe der Seite ändert. Dazu benötigen wir ein Größenänderungsereignis.

Hier ist das Beispiel:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

Die Bereinigungsfunktion wird innerhalb der Callback-Funktion zurückgegeben und ermöglicht es uns, die Ereignisse zu entfernen, nachdem sie aufgetreten sind.

Daten mit UseEffect abrufen

Ein weiterer Nebeneffekt des Hooks useEffectist das Abrufen von Daten von APIs. Sie können Ihre Daten wie mit Vanilla JavaScript abrufen, Sie müssen dies nur innerhalb der Callback-Funktion des Hooks tun, useEffectwenn Sie verwenden, .then()und catch()um das zurückgegebene Versprechen zu verarbeiten.

Hier ist ein Beispiel für das Abrufen von Benutzerdaten aus der GitHub-API:

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

Hier ist ein Beispiel:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

Fazit

useEffectist der wichtigste Haken, den Sie verstehen müssen, wenn Sie mit React umgehen. Es ermöglicht Ihnen das einfache Hinzufügen von Funktionen und das Ausführen von Nebeneffekten in funktionalen Komponenten.

Vielen Dank für das Lesen dieses Artikels. Ich hoffe, Sie fanden es nützlich.

Weiterführende Lektüre

Wenn Sie an weiteren nützlichen Inhalten rund um JavaScript und Webentwicklung interessiert sind, können Sie meinen Newsletter abonnieren .