Deklarativní vs. imperativní

Přechod do React z Javascriptu

Tento článek se snaží učinit toto rozlišení deklarativního vs. imperativního zejména pro lidi přecházející z vanilky Javascript do React. Navíc to píšu během podobného přechodu, takže se omlouvám za jakékoli dezinformace. Ale já jsem člověk, který se nemůže jen tak nečinně posadit s „React je deklarativní styl psaní.“ Proto se pokusím rozebrat to, co dělá Reacta deklarativním a porovnat jej s jeho imperativním protějškem.

Za prvé, z velmi vysoké úrovně se deklarativní programování zaměřuje spíše na CO CO než na JAK. Co to znamená? Deklarativní programování je mnohem více motivováno výsledkem a popisem tohoto konečného výsledku, spíše než postupným procesem dosažení výsledku (často se tento proces nebere v úvahu). To je v rozporu s imperativním programováním, které je mnohem instruktážnější a stará se o postupný proces. Podle každého článku „Declarativní vs. imperativní“ je zde metafora směrů, jak se dostat k Penn Station od Port Authority:

Imperativní programovací paradigma: „Po opuštění přístavního úřadu se vydejte na jihozápad 8. Ave směrem na W 41st St, zahněte doleva na W 33rd St a měli byste dorazit na Penn Station.“

Deklarativní programovací paradigma: „Stanice Penn se nachází na 7. a 8. cestě mezi 31. a 33. ulicí v New Yorku, NY 10001“.

Jak vidíte, první příklad uvádí pokyny krok za krokem, což svědčí o imperativním přístupu. Druhý příklad pouze popisuje konečné umístění / výsledek s adresou, bez ohledu na to, jak by se tam cestující / uživatel mohl dostat. Abychom toto rozlišení skutečně ilustrovali, skočme do jednoduchého příkladu kódování přes Ruby, než se dostaneme do React a Javascript. Zde jsou dva přístupy k implementaci jednoduchého algoritmu lineárního vyhledávání v Ruby:

//Rozkazovací způsob
def imperative_search (pole, položka)
  pro i v poli ano
    pokud i == položka
      vrátit položku
    konec
  konec
  vrátit nepravdivé
konec
// Deklarativní
def Decrative_search (pole, položka)
  array.find (položka)
konec

První je ukázkovým příkladem imperativního vyhledávání, protože stanoví každý krok toho, jak funguje vyhledávací funkce a jak se dostala k výsledku. To opravdu ilustruje HOW a dává diskrétní „instrukce“ k dosažení požadovaného výsledku. Naproti tomu deklarativní příklad se zaměřuje pouze na výsledek a popisuje, jak bude tento výsledek vypadat. Pokud jste pracovali s metodami Rubyho ve výčtu, jako je každý, sbírejte, vyberte atd., Hádejte co? Celý čas píšete deklarativní kód!

Imperative = STEPS

Deklarativní reakce

Nakonec se přesuneme do jádra tohoto blogu: proč je React deklarativní. Pokud jste jako já, Javascript, který jste doposud napsali, měl imperativní styl. Například vezměte tento příklad velmi imperativního kódu, který manipuluje s DOM přidáním div a h1 s mým oblíbeným umělcem „Mitski“ do těla:

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

To je velmi důležité, protože prostřednictvím pokynů krok za krokem najde potřebné značky a připojí potřebné prvky. Naopak, dosažení stejného výsledku reakcí by vypadalo takto:

class Artist rozšiřuje komponentu {
  poskytnout() {
    vrátit se(
      
        

{this.props.name}

      
)   } }

Jak vidíte, způsob React se zaměřuje na výsledek a dále ho popisuje v vykreslovacím bloku kódu. Jednoduše řečeno: „to, co chci na stránce vykreslit, bude vypadat takto a je mi jedno, jak se tam dostanete.“ S odkazem na metaforu „Toto je moje adresa. Takto vypadá můj dům. Nezajímá mě, jak se sem dostanete, ale dostanete se sem! “Implementace Reactu je tedy deklarativní, protože v kódu uvedete výsledek, to, co chcete na stránce nakonec zobrazit, a ne pokyny nebo kroky, jak se tam dostat.

Před zkoumáním a psaním tohoto blogu se mé obavy z paradigmatu deklarativního programování projevily hlavně kvůli nedostatečnému rozlišování mezi deklarativním a funkčním programováním. Funkční programování je prvotním příkladem deklarativního přístupu, ale nejsou to samé. Uvědomil jsem si, že musím nakreslit hranici mezi deklarativním vs. imperativním a funkčním vs. objektovým. React samozřejmě vykazuje spoustu funkčních programovacích charakteristik (co do činění s virtuální DOM a předávání funkcí), které se pak začínají opravdu komplikovat (dobrý sledovací blog). Prozatím doufám, že to objasnilo, proč React projevuje deklarativní přístup, jako to udělal pro mě.

Zdroje

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