© S&S Media GmbH
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 vorhandene Libraries wie Lodash oder Ramda bereits sehr leistungsfähige Implementationen aufweisen, die auch mit zusätzlichen Parametern und anderen komplexeren Fällen zurechtkommen.

Nun ist es in React so, dass Komponenten eine Funktion enthalten, die zum Rendern – also zum Darstellen – des visuellen Elements aufgerufen wird. Wenn Sie eine Komponente als Klasse erzeugen, implementieren Sie diese Logik in der Methode render. Selbst im Klassenkontext gibt es gewisse Erwartungen an diese Methode (wie in der Dokumentation beschrieben [1]), Sie sollten etwa nicht den Status der Komponente aus der Methode heraus ändern. Das erinnert an funktionale Ideen: Die...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang