Class vs Functional Components in React, og ofur-leyndur þriðji kosturinn

Ég vil frekar tyggjó.

Þegar ég hef beitt mér fyrir React er spurningin sem ég heyri oftast „af hverju myndi ég ekki nota bekkjarhluta fyrir allt? Af hverju jafnvel að nenna yfir virkum íhlutum? “

Þrátt fyrir það sem sumir starfrænir forritun geta sagt, þá er það ekki endilega slæm spurning. Þegar öllu er á botninn hvolft gefa bekkjaríhlutir okkur svo meiri sveigjanleika, svo miklu meiri möguleika en einfaldur, ‘heimskur’ hluti. Vissulega eru nokkrar góðar ástæður fyrir því að við nennum jafnvel að starfa (eða „ríkisfangslausir“) íhlutir til að byrja með.

Jæja, eftir nokkra grafa er svarið ...

Huglægur.

Svo skulum fljótt fara yfir þessar tvær gerðir og hvers vegna þú gætir viljað nota eina yfir hina.

Hagnýtur íhlutir

Kannski betur þekktur í React samfélaginu sem „ríkisfangslausir“ þættir, þetta eru nákvæmlega það sem það segir á tini: ríkisfangslausar aðgerðir. Vegna vanhæfni til að hafa sínar eigin aðferðir eða vísa til þessa, er allt ríkisfangslaust hluti raunverulega náð með því að skila einhverjum JSX (eða React.createElement () ef þú ert í gamla skólanum).

Þeir hafa engan aðgang að þessu, svo þeir geta ekki haft sitt eigið ríki, né geta þeir haft líftímaaðferðir af sömu ástæðu. Fyrir þá þarftu…

Class íhlutir

Brauðið og smjörið innan ramma React, flokksíhlutir geta gert allt: ástand, líftímaaðferðir, venjulegar aðferðir og flutningur, allt vafið inn í snyrtilegan bekkjarhóp.

Snyrtilegur! Nú, hver á að nota?

Birting valsins

Þvílíkur áhyggjufullur texti! Eftir að hafa lesið um hvert þetta er, þá hugsarðu líklega „augljóslega, notaðu ríkisfangslausan efnisþátt ef þú þarft aðeins að skila einhverju sem byggist á leikmunum!“ Og þú hefur rétt fyrir þér! Venjulega er það einmitt þess vegna sem þú myndir hugsa um að nota ríkisfangslausan þátt, en hvað um afköst? Minni?

Þetta fer aðallega eftir stærð bekkjarhlutans. Hafðu í huga að flytja þarf báðar þessar tegundir, sem sjálfar mun hafa áhrif á minnið. Augljóslega er ítarlegri skrá að nota meira minni og hafa áhrif á afköstin meira en einfaldur ríkisfangslaus hluti, sem í krafti hans getur aðeins verið svo stór áður en þú ættir líklega að endurmeta ef það ætti að vera aðeins einn hluti eða fleiri.

Svo hvað með þennan ógnvekjandi undirtitil? Við skulum spyrja React sérfræðinginn Dan Abramov sjálfan.

Taktu þetta með saltkorni, þar sem það er svolítið dagsett á þessum tímapunkti og erfitt er að grafa upp uppfærslur um málið og það hefur verið sagt af öðrum hönnuðum í React teyminu að nokkrar endurbætur hafi verið gerðar á hraða hagnýtra íhluta. Einnig hefur verið talað í allnokkurn tíma um að fínstilla ríkisfangslausa íhluti svo þeir reynist meira nothæfir.

Eftir nokkurt viðmiðapróf á eigin spýtur, þá virðist sem virkni íhlutar hafi tilhneigingu til að hlaupa um 20% hraðar að meðaltali, sem er ekkert til að hrista staf í.

Og samt ... það er önnur leið ...

Spoiler Alert: raunverulegt er JavaScript

Ég skuldar þessari, hreinskilnislega hugarfar, athugun á miðill gr. Philippe Lehoux 45%. Hraðari viðbragðshlutar, nú. Ástæðan fyrir því að hagnýtur íhlutir eru ekki strax miklu hraðari en íhlutir í bekknum er vegna þess að þeir eru enn að lengja React.Component og þar með eru enn að hlaða inn alla rökfræði flokks hluti!

Svo til að flýta fyrir þessum heimskum hlutum, verðum við að komast framhjá þeim óþarfa farangri sem React.Component afhendir okkur, og ef við þurfum að fyrirgefa React, þá er svarið gott og JS.

Boom.

Ég veit. Það er svo einfalt en samt svo fallegt. Plús, í viðmiðunarprófunum mínum sló það út venjulegan flokksþátt um 51%. 51!

Við skulum líta á flutninginn og sjá hvers vegna þetta er.

Bein aðgerð símtal samanborið við Component Instantiation

Í venjulegu skyndisóknum okkar höfum við nestað .createElement () kalla til að byggja upp DOM tré okkar, en með beinum símtölum getum við einfaldlega sleppt skilagildi virka okkar.

Svo, hver er sannleikurinn?

(fyrirgefðu, ekki fyrirgefðu)

Í lok dagsins, hverjar eru tak takmarkanirnar?

  1. Námskeið eru öflugri og sveigjanlegri,
  2. Ríkisfangslausar eru aðeins hraðari (og þurfa minni tegund!), Með nokkrum fyrirheitum um hagræðingu,
  3. Það er (nokkuð óprófað) hraðhakk tiltækt fyrir þig ef þú þarft að kreista allan árangur sem þú getur fengið,
  4. Þegar öllu er á botninn hvolft skaltu gera hvað sem er í lágmarki fyrir íhlutann. Það er líklega rétti kosturinn.