Einführung in React, Folge 2: Ein tieferer Einblick

the next big thing  –  0 Kommentare

React basiert auf vielen Konzepten der funktionalen Programmierung. Besonders wichtig ist die Unveränderlichkeit von Datentypen, die in React die Grundlage für das effiziente Rendern der Anzeige bildet. Wie funktioniert das für eigenen Code, und worauf gilt es in JSX außerdem zu achten?

Nach den ersten Schritten wird es Zeit, die Konzepte von React näher zu betrachten. Dazu zählt vor allem der Umgang mit Werte- und Referenztypen, was sich in React in dem Konzept der Unveränderlichkeit widerspiegelt.

Einführung in React

Alle Folgen und Kurse zu weiteren Themen finden sich in der tech:lounge.

Wertetypen sind von Haus aus unveränderlich. Versucht man beispielsweise, eine Zeichenkette zu verändern, erhält man stets eine neue Instanz als Ergebnis. Anders verhalten sich in JavaScript Objekte und Arrays, die sich tatsächlich in-place modifizieren lassen.

Die Effizienz von React beruht aber zu einem Großteil darauf, dass sich anhand von Referenzvergleichen feststellen lässt, ob Daten verändert wurden oder nicht. Das kann jedoch nur dann funktionieren, wenn sich auch Objekte und Arrays wie Zeichenketten verhalten, sie also unveränderlich sind.

Außerdem gibt es noch einige weitere Stolperfallen zu beachten, wozu vor allem der Umgang mit dem Schlüsselwort this zählt. Das ist insbesondere im Zusammenhang mit JSX relevant, wenn auf UI-Ereignisse reagiert werden soll.

Wie das alles funktioniert, zeigt das folgende Video:

Einführung in React, Folge 2: Ein tieferer Einblick

tl;dr: Die Unveränderlichkeit von Objekten und Arrays ist ein wesentlicher Faktor, damit React die Anzeige effizient rendern kann. Dazu gilt es, einige Vorkehrungen zu treffen, da JavaScript das Konzept der Unveränderlichkeit nicht von Haus aus unterstützt.