React Hooks

React Hooks ermöglichen den Einsatz von States in Function Components

    In React kennen wir zwei Typen von Components:

    • Function Components = Stateless Components. 
    • Class Components = Stateful Components. 
    Eine Function Component renderd Elemente, wie z.B. eine Headline, einen Button u.v.m. Das selbe macht eine Class Component, allerdings kann Sie Zustände (States) erzeugen und verwalten. Damit können wir interaktive UI's entwickeln. Nun ist es häufig so, dass Function Components entwickelt werden, da zu diesem Zeitpunkt kein State benötigt wird. Später stellt sich aber heraus, dass ein State doch eine gute Idee ist.

    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?

    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.

    import React, { useState } from 'react';

function Headline() {
 
const [color, setColor] = useState('red'); //This is a React Hook called useState

  return (
    <h1 className={color}
      onClick={() => setColor('green')}>
    </h1>
  );
}

    Hier ein etwas sinnvolleres Beispiel. Ein einfacher Toggler.

    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:

    • useEffect
    • useContext
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeHandle
    • useLayoutEffect
    • useDebugValue
    Hier werden sie detailliert beschrieben.