Deklarativ vs Imperativ

Übergang von Javascript in React

Dieser Artikel ist bestrebt, diese Unterscheidung zwischen deklarativ und imperativ speziell für Personen zu treffen, die von Vanille-Javascript zu React wechseln. Außerdem schreibe ich dies während eines ähnlichen Übergangs, sodass ich mich für etwaige Fehlinformationen entschuldige. Aber ich bin eine Person, die nicht nur untätig mit „Reagieren ist ein deklarativer Schreibstil“ umgehen kann. Deshalb werde ich versuchen, das auseinander zu ziehen, was Reagieren deklarativ macht, und es mit seinem imperativen Gegenstück zu vergleichen.

Zunächst einmal konzentriert sich deklarative Programmierung von einer sehr hohen Ebene auf das WAS und nicht auf das WIE. Was bedeutet das? Die deklarative Programmierung ist viel stärker vom Ergebnis und der Beschreibung dieses Endergebnisses abhängig, als vom schrittweisen Prozess, um zum Ergebnis zu gelangen (wobei der Prozess, um dorthin zu gelangen, häufig ignoriert wird). Dies steht im Gegensatz zur imperativen Programmierung, die viel lehrreicher ist und sich um den schrittweisen Prozess kümmert. Wie in jedem Artikel "Deklarativ gegen Imperativ" steht hier eine Richtungsmetapher für den Weg zur Penn Station von der Hafenbehörde aus:

Das zwingende Programmierparadigma: „Fahren Sie nach dem Verlassen der Port Authority in südwestlicher Richtung auf der 8th Ave in Richtung W 41st St, biegen Sie links in die W 33rd St ab und Sie sollten an der Penn Station ankommen.“

Das deklarative Programmierparadigma: „Die Penn Station befindet sich in der 7. und 8. Straße zwischen der 31. und 33. Straße in New York, NY 10001“

Wie Sie sehen können, listet das erste Beispiel die Richtungen Schritt für Schritt auf und zeigt damit einen zwingenden Ansatz an. Das zweite Beispiel beschreibt lediglich den Endstandort / das Ergebnis mit einer Adresse, unabhängig davon, wie der Reisende / Benutzer dorthin gelangt. Um diese Unterscheidung wirklich zu veranschaulichen, lassen Sie uns zunächst ein einfaches Codebeispiel durch Ruby durchgehen, bevor wir uns mit React und Javascript befassen. Hier sind zwei Ansätze zur Implementierung eines einfachen linearen Suchalgorithmus in Ruby:

//Imperativ
def imperative_search (Array, Element)
  für ich in Array zu tun
    wenn ich == item
      Artikel zurückgeben
    Ende
  Ende
  falsch zurückgeben
Ende
// deklarativ
def declarative_search (Array, Element)
  array.find (item)
Ende

Das erste ist ein hervorragendes Beispiel für die zwingende Suche, da es jeden Schritt der Funktionsweise der Suchfunktion und des Ergebnisses beschreibt. Dies veranschaulicht wirklich das WIE und gibt diskrete Anweisungen, um zum gewünschten Ergebnis zu gelangen. Im Gegensatz dazu konzentriert sich das deklarative Beispiel auf das reine Ergebnis und beschreibt, wie dieses Ergebnis aussehen wird. Wenn Sie mit Rubys Enumerator-Methoden wie each, collect, select usw. gearbeitet haben, raten Sie mal, was? Sie haben die ganze Zeit deklarativen Code geschrieben!

Imperativ = SCHRITTE

Deklarative Reaktion

Zum Schluss gehen wir zum Kern dieses Blogs über: Warum ist React deklarativ? Wenn Sie wie ich sind, hat das von Ihnen bisher geschriebene Javascript einen zwingenden Stil. Nehmen Sie zum Beispiel dieses Beispiel eines sehr zwingenden Codes, der das DOM manipuliert, indem Sie dem Body ein div und ein h1 mit meinem Lieblingskünstler „Mitski“ hinzufügen:

Funktion addArtistNameToBody () {
  const bodyTag = document.querySelector ('body')
  const divTag = document.createElement ('div')
  let h1Tag = document.createElement ('h1')
  h1Tag.innerText = "Mitski"
  divTag.append (h1Tag)
  bodyTag.append (divTag)
}

Dies ist sehr wichtig, da es über schrittweise Anweisungen die erforderlichen Tags findet und die erforderlichen Elemente anfügt. Im Gegensatz dazu würde es ungefähr so ​​aussehen, wenn Sie dasselbe Ergebnis durch "Reagieren" erzielen:

Klasse Artist erweitert Component {
  render () {
    Rückkehr(
      
        

{this.props.name}       )   } }

Wie Sie sehen können, konzentriert sich der React-Weg auf das Ergebnis und beschreibt es im Rendering-Codeblock weiter. Einfach ausgedrückt: "Das, was ich auf der Seite rendern möchte, wird so aussehen, und es ist mir egal, wie Sie dorthin gelangen." In Bezug auf die Metapher: "Dies ist meine Adresse. So sieht mein Haus aus. Es ist mir egal, wie Sie hierher kommen, aber hierher! "Daher ist die Implementierung von React deklarativ, da Sie im Code das Ergebnis angeben, was letztendlich auf der Seite angezeigt werden soll, und nicht die Anweisungen oder Schritte, um dorthin zu gelangen.

Bevor ich diesen Blog recherchierte und schrieb, beruhte mein Verständnis des deklarativen Programmierparadigmas hauptsächlich auf der mangelnden Unterscheidung zwischen deklarativer und funktionaler Programmierung. Funktionale Programmierung ist ein Paradebeispiel für den deklarativen Ansatz, aber sie sind nicht dasselbe. Mir wurde klar, dass ich die Grenze zwischen deklarativ und imperativ und funktional und objektorientiert ziehen musste. Natürlich weist React eine Menge funktionaler Programmiereigenschaften auf (Dinge, die mit dem virtuellen DOM und den Übergabefunktionen zu tun haben), was dann sehr kompliziert wird (ein guter Follow-up-Blog). Im Moment hoffe ich, dass dies klarstellt, warum React einen deklarativen Ansatz aufweist, wie er es für mich getan hat.

Ressourcen

  • https://tylermcginnis.com/imperative-vs-declarative-programming/
  • https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
  • https://medium.com/defmethod-works/declarative-ruby-programming-4b5c62719d6b