Luokka vs. toiminnalliset komponentit reagoinnissa ja supersalaisuus kolmas vaihtoehto

Pidän chewables.

Aloittaessani taisteluani Reaktoriin, useimmin kuulen kysymyksen, ”miksi en käyttäisi vain luokkakomponenttia kaikkeen? Miksi edes häiritä toiminnallisia komponentteja? "

Huolimatta siitä, mitä jotkut toiminnalliset ohjelmointimallit saattavat sanoa, se ei ole välttämättä huono kysymys. Loppujen lopuksi luokkakomponentit antavat meille paljon enemmän joustavuutta, paljon enemmän potentiaalia kuin yksinkertainen, tyhmä komponentti. On varmasti muutamia hyviä syitä, miksi edes häiritsemme funktionaalisia (tai "valtiottomia") komponentteja aluksi.

No, kaivamisen jälkeen vastaus on ...

Subjektiivinen.

Joten siirrytään nopeasti näiden kahden tyypin yli ja miksi kannattaa käyttää yhtä toisen yli.

Toiminnalliset komponentit

Ehkä tunnetaan sitä paremmin React-yhteisössä kuin "valtiottomia" komponentteja, nämä ovat juuri sitä, mitä se sanoo tinalla: valtiottomat toiminnot. Koska kansalaisuudeton komponentti ei todellakaan pysty omistamaan omia menetelmiään tai viittaamaan tähän, se todella on renderöinti palauttamalla JSX (tai React.createElement (), jos olet vanha koulu).

Heillä ei ole pääsyä tähän, joten heillä ei voi olla omaa tilaa, eikä heillä voi olla samasta syystä elinkaarimenetelmiä. Niille tarvitset…

Luokan komponentit

Reaktin kehyksen leipä ja voi, luokkakomponentit voivat tehdä kaiken: tila, elinkaarimenetelmät, säännölliset menetelmät ja renderointi, kaikki käärittynä siistillä luokkakappaleella.

Siisti! Nyt mitä käyttää?

Valinnan illuusio

Mikä huolestuttava tekstitys! Kun olet lukenut mitä nämä kaikki ovat, ajattelet todennäköisesti ”tietysti käyttää kansalaisuudetonta komponenttia, jos sinun tarvitsee vain tuottaa jotain rekvisiittapohjalta!” Ja olit oikeassa! Yleensä tämä on juuri miksi ajattelee käyttää kansalaisuudetonta komponenttia, mutta entä suorituskyky? Muisti?

Ne riippuvat lähinnä luokkakomponentin koosta. Muista, että molemmat näistä tyypeistä on siirrettävä, mikä itsessään vaikuttaa muistiin. On selvää, että yksityiskohtaisempi tiedosto käyttää enemmän muistia ja vaikuttaa suorituskykyyn enemmän kuin yksinkertainen valtioton komponentti, jonka hyvyyden vuoksi se voi olla vain niin suuri, ennen kuin sinun pitäisi todennäköisesti arvioida uudelleen, jos sen pitäisi olla vain yksi tai useampi komponentti.

Entä se pelottava tekstitys? Kysymme itse React-asiantuntija Dan Abramovilta.

Ota tämä suolajyvällä, koska se on tässä vaiheessa hieman vanhentunut ja asiaa koskevia päivityksiä on vaikea löytää, ja muut Reakt-tiimin kehittäjät ovat sanoneet, että toiminnallisten komponenttien nopeuteen on tehty joitain parannuksia. Myös kansalaisuudettomien komponenttien optimoinnista on jo pitkään puhuttu, jotta ne osoittautuvat hyödyllisemmiksi linja-alueella.

Jonkin oman vertailukokeen jälkeen näyttää siltä, ​​että toiminnallisilla komponenteilla on potentiaalia ajaa keskimäärin noin 20% nopeammin, mikä ei ole mitään, jolla ravistaa sauvaa.

Ja silti ... on toinen tapa ...

Spoilerihälytys: todellinen on JavaScript

Velkaa tämän, suoraan sanottuna mielenkiintoiselle havainnolle Philippe Lehouxin Medium Artikkelin 45-prosenttisesta nopeammasta reagoinnista vastaavista toiminnallisista komponenteista, nyt. Syy siihen, miksi toiminnalliset komponentit eivät ole heti paljon nopeampia kuin luokkakomponentit, johtuu siitä, että ne jatkavat React.Componentin laajentamista ja lataavat siten edelleen kaikki luokkakomponenttien logiikat!

Joten näiden tyhmien komponenttien nopeuttamiseksi meidän on ohitettava tarpeeton matkatavara, jonka React.Component luovuttaa meille, ja jos joudumme luopumaan Reaktista, vastaus on hyvä ol 'JS.

Puomi.

Tiedän. Se on niin yksinkertainen, mutta niin kaunis. Lisäksi vertailukokeissani se huomasi normaaliluokan komponentin 51 prosentilla. 51!

Katsotaanpa katsomaan transpilaatiota ja selvittämään miksi näin on.

Suora toimintokutsu vs. komponenttihavaitseminen

Normaalissa komponenttihetkeyksessä olemme sisäkkäisiä .createElement () -kutsuja rakentaaksemme DOM-puumme, mutta suorilla funktiokutsuilla voimme yksinkertaisesti pudottaa funktion palautusarvon.

Joten mikä on totuus?

(anteeksi, ei pahoillani)

Mitkä ovat päivän aikana loput?

  1. Luokat ovat tehokkaampia ja joustavampia,
  2. Valtiottomat ovat hieman nopeampia (ja vaativat vähemmän kirjoittamista!), Ja lupaavat optimoinnin tuulen,
  3. Sinulle on tarjolla (hieman testaamaton) nopeushakki, jos joudut puristamaan kaiken mahdollisen suorituskyvyn,
  4. Tee päivän päätteeksi mikä tahansa komponentin vähimmäisvaatimus. Se on todennäköisesti oikea valinta.