© best_vector/Shutterstock.com
Olis bunte Welt der IT

React Hooks - React wird funktionaler


Nachdem React schon immer parallel Ansätze zur Erzeugung von Komponenten mit Klassen oder Funktionen bot, zeigen neueste Versionen deutlich in eine funktionale Richtung.

Wie Sie vielleicht wissen, liegen mir funktionale Ansätze besonders am Herzen. Abseits aller logischen und technischen Überlegungen mag ich diese Art der Programmierung einfach besonders – es macht Spaß, aus einfachen Blöcken graduell neue Dinge zu bauen, verlässlich, testbar und konsistent.

Natürlich ist der kontinuierliche Einzug funktionaler Elemente in die verschiedensten Bereiche der Mainstreamprogrammierung nichts Neues mehr, dieser findet seit vielen Jahren statt. Im Detail sind bestimmte Entwicklungen allerdings trotzdem erwähnenswert, und so war ich vor Kurzem positiv überrascht, von einigen neuen Features und Plänen für React zu lesen. Mit diesen Neuerungen bewegt sich React deutlich in Richtung funktionaler Ideen, wesentlich deutlicher noch als das bisher der Fall war.

Als erstes Beispiel gibt es die bereits in React 16.6 verfügbare Funktion memo. Der Name stammt bereits aus der funktionalen Ecke: „Memoisierung“ nennt man die Technik, mit der in funktionalen Sprachen Rückgabewerte für spätere Aufrufe gespeichert werden. Nehmen Sie einmal an, Sie hätten eine einfache Funktion:

const calc = x => { return ...; // eine schwierige Berechnung! }

Ein kurzes Memo reicht

Ein viel gepriesener Vorteil der funktionalen Programmierung besteht in der Zustandslosigkeit von Funktionen, der Unabhängigkeit von äußeren Einflüssen, der Vermeidung sog. Nebeneffekte. Die Funktion oben ist allein abhängig von ihrem Eingabeparameter x – solange derselbe Wert für x übergeben wird, liefert diese Funktion immer dasselbe Resultat. Daher lässt sich eine solche Funktion „memoisieren“, zum Beispiel mit der Hilfsfunktion in Listing 1.

Listing 1

const memo = f => { const results = {};  // Zu Demonstrationszwecken darf f nur einen Parameter haben! return x => { if (results[x]) { return results[x]; } else { result = f(x); results[x] = result; return result; } }; }; const memoizedCalc = memo(calc); // Bei diesem ersten Aufruf findet die Berechnung in calc statt console.log(calc(10)); // Bei folgenden Aufrufen mit demselben Parameterwert wird // nur noch der gespeicherte Rückgabewert geliefert, die // Berechnung selbst muss nicht noch einmal ausgeführt werden. console.log(calc(10));

Natürlich dient die Implementierung im Beispiel nur der Demonstration – Sie brauchen solche Helper nicht selbst zu schreiben, da vor...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang