Einführung in React, Folge 2: Ein tieferer Einblick
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?
- Golo Roden
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
- Folge 1: Erste Schritte
- Folge 1.1: Release von React 16
- Folge 2: Ein tieferer Einblick
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:
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier eine Vimeo-Video (Vimeo LLC) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Vimeo LLC) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
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. ()
