In React kennen wir zwei Typen von Components:
Genau das ist mit React Hooks möglich. Die folgende einfache Komponente renderd eine Headline. Fügt man einen Hook, hier useState, hinzu, hat man eine Stateful Function Component. Das Beispiel ist ziemlich sinnfrei, zeigt aber wie einfach es ist. React Hooks wurden in der Version 16.8 eingeführt. Class Components gibt es weiterhin. Man muss jetzt also nicht alles umschreiben. Aber bei neuen Stateful Components würde ich React Hooks einsetzen.
Dann muss die Component neu entwickelt werden und zwar als Class Component. Das ist nervig und zeitaufwendig. Das gilt noch mehr für Scrivito-Widgets. Wäre es nicht schön, wenn wir einfach eine Function Component erweitern könnten, um aus ihr eine stateful Component zu machen?
import React, { useState } from "react";
export default function Button() {
const [toggle, setToggle] = useState(false);
return (
<div>
<hr />
<div>
<button type="button" onClick={() => setToggle(!toggle)}>
{toggle ? 'Hide Text' : 'Show Text'}
</button>
<p className={toggle ? 'show' : 'hide'} >
Et minim tempor nostrud culpa non laborum anim officia dolor dolor deserunt dolor exercitation.
Aliqua est est laboris pariatur sint exercitation qui aute deserunt.
Irure culpa non incididunt nisi sint cillum dolore.
</p>
</div>
</div>
);
}
Das ist alles viel einfacher und mit weniger Zeilen Code, als mit Class Components und setState zu bewerkstelligen.
Außer useState gibt es noch die Hooks: