Reageerhaken
Hooks zijn toegevoegd aan React in versie 16.8.
Hooks zorgen ervoor dat functiecomponenten toegang hebben tot status- en andere React-functies. Hierdoor zijn klassecomponenten over het algemeen niet meer nodig.
Hoewel Hooks over het algemeen klassecomponenten vervangen, zijn er geen plannen om klassen uit React te verwijderen.
Wat is een haak?
Hooks stellen ons in staat om React-functies zoals status- en levenscyclusmethoden te "haken".
Voorbeeld:
Hier is een voorbeeld van een haak. Maak je geen zorgen als het geen zin heeft. We zullen in de volgende sectie meer in detail treden .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Je moet importHooks van react.
Hier gebruiken we de useStateHook om de status van de applicatie bij te houden.
Status verwijst in het algemeen naar toepassingsgegevens of eigenschappen die moeten worden gevolgd.
Hook regels
Er zijn 3 regels voor haken:
- Hooks kunnen alleen binnen React-functiecomponenten worden aangeroepen.
- Hooks kunnen alleen worden aangeroepen op het hoogste niveau van een component.
- Haken kunnen niet voorwaardelijk zijn
Opmerking: Hooks werken niet in componenten van de React-klasse.
Aangepaste haken
Als je stateful logica hebt die in verschillende componenten moet worden hergebruikt, kun je je eigen aangepaste Hooks bouwen.
We gaan dieper in op de sectie Aangepaste haken .