Kaip „React“ veikia po gaubtu

„React“ yra labai populiari „JavaScript“ biblioteka. Per savaitę atsisiuntus daugiau nei 5,5 milijono, „React“ yra labai populiarus. Tačiau nedaugelis „React“ kūrėjų žino, kaip „React“ veikia po gaubtu.

Šiame įraše pabandysiu atskleisti įdomių dalykų apie „React“, kurie jums, kaip „React“ kūrėjui, gali būti įdomūs. Pradėkime nuo pradžių.

Bet prieš pradedant, jei esate „React“ kūrėjas, turiu jums įdomių naujienų! Kai baigsite šį straipsnį, galėsite su „React“ sukurti ką nors šaunaus ir pakeliui laimėti prizų :)

Ką veikia „React“?

„React“ iš esmės prižiūri medį. Šis medis gali atlikti efektyvius diff skaičiavimus mazguose.

HTML kodą laikykite medžiu. Tiesą sakant, būtent taip naršyklė traktuoja jūsų DOM (jūsų pateiktą HTML naršyklėje). „React“ leidžia jums efektyviai perkurti savo DOM „JavaScript“ sistemoje ir stumti tik tuos iš tikrųjų įvykusius DOM pakeitimus.

JSX yra sintaksinis cukrus

Nėra nieko panašaus į JSX - nei į „JavaScript“, nei į naršyklę. JSX yra tiesiog sintaksinis cukrus, skirtas kurti labai specifinius „JavaScript“ objektus.

Kai rašote kažką panašaus:

const tag = 

Hello

ką jūs iš esmės darote, tai:

const tag = React.createElement("h1", {}, "Hello")

Matote, kai pradedate rašyti įdėtus dalykus, ne tik sunku koduoti, bet ir labai nepatogu išlaikyti tokią kodų bazę. Taigi JSX padeda jums suteikti HTML švarą į „JavaScript“ galią.

Bet ką „React.createElement“ daro pati? Tai sukuria paprastą seną „JavaScript“ objektą. Tiesą sakant, galite rankiniu būdu paskambinti ir įsitikinti patys!

Matote, mes turime tokį objektą:

{ $$typeof: Symbol(react.element), key: null, props: {children: "Hello"}, ref: null, type: "div" }

Ir jei mes pradėsime lizdus tokius elementus:

React.createElement('div', { }, React.createElement('p', {}, 'A p inside a div') ) 

Mes pradėtume gauti įdėtus objektus:

Taigi dabar jūs žinote, kai visas JSX bus išanalizuotas ir visi „React.createElement“ skambučiai bus išspręsti, mes nusileisime su vienu milžinišku įdėtu objektu, kaip aukščiau.

Reaguok Renderer

Dabar, jei grįšite į tašką, kuriame paleidžiame programą, pamatysite, kad faile index.js rasite šią eilutę:

// .. prev code ReactDOM.render(, container)

Iš viršaus mes žinome, kad atlikus analizavimą, tai tik didžiulis „React“ elementų objektas. Tada kaip „React“ sugeba iš to sukonstruoti faktinius „div“ ir „p“ žymas? Susipažink su „ReactDOM“.

„ReactDOM“ savo ruožtu rekursyviai sukuria mazgus, priklausomai nuo jų „tipo“ ypatybės, ir galiausiai juos prideda prie DOM.

Šiuo metu turėtų būti aišku, kodėl „React“ atsiejimas nuo pateikimo yra iš tikrųjų puikus žingsnis! Tai, ką daro „React“, yra tiesiog sukonstruoti vartotojo sąsajos medį, kuris galėtų būti naudojamas ne tik žiniatinklyje, bet ir tokiose aplinkose kaip mobilusis, turint omenyje, kad yra atvaizdavimo programa, galinti bendrauti su pagrindine OS. Čia žaidžia „React Native“. Matote, „React Native“ naudoja „React“ biblioteką, bet ne „ReactDOM“ kaip atvaizdavimą. Vietoj to, pats paketas „reag-native“ yra pateikėjas.

Norėdami tai paleisti, mes tai darome reaguojančioje savojoje programoje:

const { AppRegistry } = require('react-native') AppRegistry.registerComponent('app', () => MainComponent)

Žiūrėk! Nėra „ReactDOM“. Kodėl gi ne? Kadangi neturime tokių metodų kaip „appendChild“, neturime ir DOM tipo aplinkos. Vietoj to, mobiliesiems telefonams reikia vartotojo sąsajos palaikymo tiesiogiai iš OS. Tačiau „React“ bibliotekai to žinoti nereikia, tuo pasirūpina rendereris („React Native“).

Reaguokite į susitaikymą

Kai sakome, kad „React“ palaiko DOM kopiją, naudodama virtualų DOM „JavaScript“, ir ji naudoja ją diferencijuoti pagal bet kokius pakeitimus ir pritaikyti realiam DOM, mes nenorime, kad „React“ grubiai verstųsi. Reaguok, iš tikrųjų labai tingiai susitaiko. „React“ atliktų kuo mažiau pakeitimų, ty bandytų pakartotinai naudoti elementus, atributus ir net stilius, jei įmanoma!

Apsvarstykite šį pavyzdį:

stuff

Tarkime, kad pakeisite šią JSX išraišką į žemiau pateiktą, naudodami kokią nors sąlygą ar būseną:

something else

Dabar, kai „diferencijuojasi“, „React“ matys, kad gerai, „img“ žymoje naudojama ta pati „ClassName“ ir senuose, ir naujuose medžiuose, kodėl verta ją modifikuoti Tai tiesiog pakeistų jūsų alt atributą ir judėtų toliau.

Tačiau yra laimikis. Kadangi mes nenorime, kad „React“ atliktų daug skaičiavimų dėl diffinguojančios dalies, „React“ manytų, kad jei tėvai pasikeitė, neabejotinai pasikeitė jo medis. Pavyzdžiui:

I did not change

Jei pakeisite šį JSX žemiau, naudodami sąlygą / būseną:

I did not change

Nors matėte, kad mums nereikia iš naujo kurti vidinės p žymos, tačiau „React“ niekaip negali to žinoti, kai važiuojate medžiu iš viršaus (išskyrus atvejus, kai jūs, žinoma, atliekate sunkų medžių difuzavimą, kurie yra daug brangesni algoritmai nei euristinė O (n) reakcija vyksta difuzijai). Taigi, „React“ nusprendžia sunaikinti visus vaikus (t. Y. Paskambinti jų valymo funkcijoms, naudodamiesi „useEffect“ arba „komponentų, kurie atitiks klasės komponentus“) ir iš naujo sukurti vaikus.

Reakcijos raktai

Pridedant / pašalinant elementus mazge, „React“ paprasčiausiai užlenktų vaikus sename medyje ir vaikus naujame mazgo medyje ir pažymėtų vietas, kuriose jam reikia atlikti bet kokį pridėjimą / pašalinimą. Bet tai turi trūkumų be papildomos kūrėjo pagalbos. Apsvarstykite šį pavyzdį:


    
  • A
  • B

Apsvarstykite, ar tai pakeista į žemiau pateiktą sąlygą / būseną:


   
  • Z
  • A
  • B

    Dabar, kai „React“ pradėtų lyginti abu skirtumų sąrašus, jis rastų skirtumą 1 vaiko mazge, mutuotų seną A į naują Z, tada vėl 2 vaiko mazge mutuotų jį iš senojo B į naują A, ir tada galiausiai pridėkite naują B mazgą.

    Tačiau geresnis būdas būtų išsaugoti esamus A ir B mazgus ir tiesiog iš anksto nustatyti Z mazgą. Bet iš kur Reactas apie tai žinotų? Padėtų reakcijos raktai.

    Raktai yra tik puikus būdas reaguoti, kad sužinotumėte, kurie elementai pasikeitė ar nepasikeitė diffikuojant. Dabar, užuot palyginęs visą elementą, „React“ palygintų vaikų raktus, kad pamatytų, kurį elementą reikia pridėti / pašalinti. Žemiau pateiktas būdas yra efektyvus būdas atlikti tą patį:

    
        
    • A
    • B

    Dabar, jei tai bus pakeista į:

    
        
    • Z
    • A
    • B

    „React“ dabar žinotų, kad raktai „A“ ir „B“ jau yra, todėl mums tereikia pridėti naują elementą su raktu „Z“.

    Ar esate „React“ kūrėjas? Parodykite „ React“ įgūdžius kurdami 3 minučių interaktyvų žaidimą „React“ ir laimėkite gobtuvus, marškinius ir kavos puodelius ! Dalyvaukite kodekuose prisijungdami čia prie „codedamn“ nesantaikos serverio

    Taigi, tai buvo kelios svarbios sąvokos, kurios, manau, būtų labai naudingos jums, kaip „React“ kūrėjams, norint suprasti „React“ esmę ir kaip ji iš tikrųjų veikia. Nedvejodami perduokite bet kokius pasiūlymus ar klausimus, susijusius su tuo pačiu.

    Galite sekti mane twitteryje, kad gautumėte daugiau JS / kodavimo tweetų ir kitų dalykų. Ramybė!