React vs Vue -sovelluksen peruskierros

Aika lentää Flatiron-koulussa. Kääritimme juuri viikon 10 oppimalla React-kehystä. React koostuu JavaScripistä ja JSX: stä (yhdistelmä vanilja JavaScriptiä ja tietty syntaksi, joka näyttää HTML: ltä). JSX on esikäsittelyvaihe, joka lisää XML-syntaksin JavaScriptiin. Voit ehdottomasti käyttää Reaktia ilman JSX: tä, mutta JSX tekee Reaktista paljon elegantimman. JSX-katkelmien avulla voit rakentaa komponentteja, joista tulee verkkosovelluksen rakennuspalikoita. Pidän siitä toistaiseksi todella, mutta olin kiinnostunut muiden puitteiden, erityisesti Vue, eduista ja haitoista.

Reaktorin kanssa komponentin ollessa muuttumassa se laukaisee koko komponenttipuun uusinnan. Voit käsitellä näitä uudelleenmuodostuksia käyttämällä joko shouldComponentUpdate tai React.PureComponent. Jos käytät React.PureComponent-ohjelmaa React.Component-tiedoston sijasta, sen tulee olla ComponentUpdate automaattisesti.

React-sovelluksessa tulisiComponentUpdate-menetelmää käyttää vain suorituskyvyn optimointiin. Sinun tulisi käyttää IfComponentUpdate-menetelmää ilmoittaaksesi Reaktiolle, jos tilan tai rekvisiittien nykyinen muutos ei vaikuta komponentin tuotokseen.

Vue-järjestelmässä Vue-järjestelmä tietää, mitkä komponentit on tehtävä uudelleen, kun tila muuttuu. Tämä vie komponentin tarpeettoman uudelleen renderoinnin.

Selvimmät erot Reaktin ja Vue: n välillä ovat syntaksissa

Kuten aiemmin todettiin, React koostuu JavaScripistä ja (valinnaisesti) JSX: stä komponenttien luomiseksi, joista tulee sovelluksen rakennuspalikoita. Vue voi myös käyttää renderöintitoimintoja ja tukea JSX: ää, mutta ne tarjoavat myös oletusmalleja. Voimassa oleva HTML toimii mallina Vue-sovelluksessa. Tämä antaa aloittelijoillekin mahdollisuuden työskennellä koodin läpi ja lisätä sitä, koska lukeminen ja kirjoittaminen on luonnollisempaa. Vue-komponentit voidaan kuvata joko esitysmuotoisina tai loogisina. On suositeltavaa käyttää malleja esityskomponentteihin ja renderöintitoimintoihin JSX: n kanssa loogisille komponenteille.

CSS-muotoilu Reaktissa tehdään pääosin CSS: nä JS: ssä. Vue-oletusmuotoilumenetelmä on kuin tyylilaatikot yksitiedostokomponenteissa. Yksitiedostokomponenttien tyylikoodi on samassa tiedostossa kuin komponentikoodi.

Reaktilla ja Vuellä on myös joitain samankaltaisuuksia

Suurempia sovelluksia varten React ja Vue tarjoavat hyviä ratkaisuja. Reduxia voidaan käyttää Reaktin kanssa tilan hallintaan ja käyttäjän toimiin vastaamiseen. Vue voi käyttää myös Reduxia, mutta on jotain nimeltään Vuex, joka on toinen tarkempi valtionhallintajärjestelmä, joka on tarkoitettu erityisesti Vuelle. Toinen samankaltaisuus Reaktin ja Vue: n välillä on heidän suoritusaikainen suorituskyky. Ne ovat hyvin samankaltaisia, joten siellä ei ole etua tai haittaa.

Onko React tai Vue suositumpia?

Kaikki valtion hallintoon tarkoitetut Venen kirjastot päivitetään ydinkirjastolla, kun taas React käyttää yhteisöänsä huolehtimaan siitä. Reakty on kuitenkin suositumpi, joten se pystyy pysymään huolenaiheissa. StackOverflow-tutkimuksen mukaan React on kehittäjien joukossa kolmanneksi suosituin kirjasto. LinkedIn: n mukaan React-kehittäjät ovat enemmän kysyttyä kuin Vue 5: 1-suhteella.

Jos haluat projektin aloittajan Reaktille tai Vuelle, olet onnea!

Sekä Vue että React tarjoavat projektin aloittajia. Reaktin on luo-reagoi-sovellus, kun taas Vuellä on CLI-generaattori. Yksi haitta Reaktin projektialoittajalle on, että se tarjoaa vain yhden mallin olettaen, että teet SPA: n (yhden sivun sovellus), kun taas Vue tarjoaa enemmän erilaisia.

Mielestäni Reaktillä on jyrkempi oppimiskäyrä kuin Vuella. Vue-sovelluksen avulla sinun täytyy laittaa vain yksi komentotunniste aloittaaksesi pienten sovellusten rakentamisen. Reaktin kanssa sinun on tiedettävä JavaScript (ES2015 +) ja JSX voidaksesi aloittaa.

Kuten kaikki muutkin kehykset, käytä sitä, mikä on sinulle järkevinä (tai mitä tahansa yrityksesi käyttää!). Molemmilla on etuja ja haittoja, ja lisäksi siellä on monia muita kehyksiä, kuten Angular tai AngularJS.

Minkä käyttöliittymän työkalun valitset työtäsi nykyään? Hyvää koodausta!

Lähteet: