Hooks in React ermöglichen es Ihnen, State und andere React-Funktionen zu nutzen, ohne eine Klasse schreiben zu müssen. Dieser Artikel wird Ihnen zeigen, wie Sie Hooks in ReactJS verwenden können.
1. useState Hook
useState ist ein Hook, der es Ihnen ermöglicht, in funktionalen Komponenten Zustandsvariablen zu haben.
Beispiel:
```jsx
import React, { useState } from ‘react’;
function MeinComponent() { // Deklarieren einer neuen Zustandsvariable mit dem Namen “count“ const [count, setCount] = useState(0);
return (Du hast {count} mal geklickt
In der ersten Zeile verwenden wir die Array-Destrukturierung, um setCount und count zu deklarieren. useState gibt immer ein Array mit genau zwei Elementen zurück. Das erste Element ist der aktuelle Zustand, und das zweite ist eine Funktion, die es erlaubt, diesen Zustand zu ändern.
2. useEffect Hook
Der useEffect Hook erlaubt es Ihnen, gewöhnliche Lebenszyklusmethoden, wie componentDidMount, componentDidUpdate und componentWillUnmount, in funktionalen Komponenten zu verwenden.
Beispiel:
```jsx
import React, { useState, useEffect } from ‘react’;
function MeinComponent() { const [count, setCount] = useState(0);
// Ähnlich zu componentDidMount und componentDidUpdate: useEffect(() => { document.title = `Du hast ${count} mal geklickt`; }); return (Du hast {count} mal geklickt
In diesem Fall wird bei jeder Neurenderung der Komponente useEffect ausgeführt.
Bitte beachten Sie, dass alle Zustände und Methoden, die Sie in Hooks verwenden, innerhalb der funktionalen Komponente deklariert werden müssen. Sie können keine Zustände oder Methoden außerhalb der funktionalen Komponente verwenden und dann innerhalb der Hooks darauf zugreifen.
Schließlich werden diese Hooks erst ab React Version 16.8.0 unterstützt. Bitte stellen Sie sicher, dass Sie eine kompatible Version verwenden, bevor Sie diese Funktionen verwenden.
