Als ich anfing, React zu lernen, sagte mein Lehrer: „JavaScript ist imperative Programmierung, während React deklarative Programmierung ist.“ Allerdings ergab das für mich zunächst keinen Sinn. Deshalb habe ich beschlossen, es aufzuschlüsseln, um den Unterschied besser zu verstehen.

Imperative und deklarative Programmierung mit Pizza vergleichen?

Um es einfacher zu veranschaulichen, vergleichen wir diese beiden Kochansätze.

Imperative Programmieranalogie:

Es ist, als würde man einem Koch Schritt-für-Schritt-Anweisungen geben, wie man eine Pizza macht?.

Analogie zur deklarativen Programmierung:

Es ist, als würde man eine Pizza bestellen, ohne sich Gedanken über die Schritte zu machen, die nötig sind, um die Pizza zuzubereiten?.

Was ist imperative Programmierung?

Imperative Programmierung ist ein Stil, bei dem der Entwickler explizit definiert, wie eine bestimmte Aufgabe ausgeführt werden soll. Sie schreiben die Schritte, wie die Benutzeroberfläche aktualisiert werden soll.

Beispiel: Text zu einem h1-Tag in HTML hinzufügen

const h1Element = document.createElement('h1');
h1Element.textContent = 'Hello, World!';
document.body.appendChild(h1Element);

In diesem Code

1. Manuelles Erstellen des h1-Elements
2. Festlegen des Textinhalts
3. Anhängen an die Seite Jeder einzelne Schritt ist schriftlich festgehalten. Dies ist ein Kennzeichen der imperativen Programmierung, bei der der Entwickler klar definieren muss, was der Computer tun soll und wie es getan werden soll.

Was ist deklarative Programmierung?

Im Gegensatz dazu konzentriert sich die deklarative Programmierung auf was Sie erreichen möchten, ohne anzugeben, wie es erreicht werden soll. Das System übernimmt die Details für Sie.

Beispiel: Text zu einem h1-Tag hinzufügen (mit React)

function App() {
  return (
    
Hello, World!
  );
}

In diesem Beispiel deklarieren Sie einfach ein h1-Element mit dem Text „Hello, World!“ sollte erscheinen. Die Details, wie es zum DOM hinzugefügt wird, werden von React verwaltet. Sie müssen nur angeben, was auf der Seite passieren soll, wodurch die deklarative Programmierung viel einfacher und effizienter wird als der imperative Ansatz.

Abschluss

• Beim imperativen Programmieren geht es darum, Schritt für Schritt anzugeben, wie Dinge erledigt werden sollen.
• Deklarative Programmierung konzentriert sich auf das, was Sie erreichen möchten.

Deklarative Bibliotheken wie React ermöglichen es Entwicklern, komplexe UI-Logik in einfacheren, besser verwaltbaren Begriffen auszudrücken, wodurch der Entwicklungsprozess schneller und intuitiver wird.

Referenz: Next.js-Tutorial

Auf die Pizza-Analogie wird im Next.js-Tutorial verwiesen