Kā React darbojas zem pārsega

React ir ļoti populāra JavaScript bibliotēka. React katru nedēļu lejupielādējot vairāk nekā 5,5 miljonus, tā ir ļoti populāra. Bet ne daudzi React izstrādātāji zina, kā React darbojas zem pārsega.

Šajā ierakstā es mēģināšu atklāt dažas interesantas lietas par React, kuras jūs kā React izstrādātājs varētu šķist aizraujošas. Sāksim sākumā.

Bet pirms mēs sākam, ja jūs esat React izstrādātājs, man jums ir dažas aizraujošas ziņas! Kad esat pabeidzis šo rakstu, varēsiet ar React izstrādāt kaut ko foršu un ceļā iegūt balvas :)

Ko dara React?

Pašā pamatā React uztur jums koku. Šis koks spēj veikt efektīvus diff aprēķinus mezglos.

Domājiet par savu HTML kodu kā koku. Faktiski tieši tā pārlūks izturas pret jūsu DOM (jūsu renderēto HTML pārlūkprogrammā). React ļauj efektīvi pārbūvēt savu DOM JavaScript un nospiest tikai tās izmaiņas, kas faktiski ir notikušas.

JSX ir sintaktiskais cukurs

Nav nekā līdzīga JSX - ne JavaScript, ne pārlūkam. JSX ir vienkārši sintaktisks cukurs, lai izveidotu ļoti specifiskus JavaScript objektus.

Kad jūs rakstāt kaut ko līdzīgu:

const tag = 

Hello

ko jūs būtībā darāt, ir šāds:

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

Redzat, kad sākat rakstīt ligzdotas lietas, to ir ne tikai grūti kodēt, bet arī šādas koda bāzes uzturēšana kļūst ļoti neērta. Tādējādi JSX palīdz jums nodrošināt HTML tīrību JavaScript spēkos.

Bet ko pati React.createElement dara? Tas izveido vienkāršu vecu JavaScript objektu. Patiesībā jūs varat to piezvanīt manuāli un pārliecināties pats!

Redzi, mums ir šāds objekts:

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

Un, ja mēs sākam ligzdot šādus elementus:

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

Mēs sāktu iegūt ligzdotus objektus:

Tātad tagad jūs zināt, kad visi JSX ir parsēti un visi React.createElement zvani ir atrisināti, mēs nolaižamies ar vienu milzu ligzdotu objektu, piemēram, iepriekš.

React Renderer

Tagad, ja atgriezīsities līdz vietai, kur mēs sākam lietotni, jūs redzēsiet, ka failā index.js atradīsit šādu rindu:

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

No augšas mēs zinām, ka pēc parsēšanas tas ir tikai milzīgs React elementu objekts. Tad kā React spēj no tā uzbūvēt faktiskos divus un p tagus? Iepazīstieties ar ReactDOM.

Savukārt ReactDOM rekursīvi izveido mezglus atkarībā no to “type” rekvizītiem un galu galā tos pievieno DOM.

Šajā brīdī vajadzētu būt skaidram, ka kāpēc React atdalīšana no renderētājiem patiesībā ir lielisks solis! Ko React dara, vienkārši izveidojiet lietotāja saskarnes koku, kuru varētu izmantot ne tikai tīmeklī, bet arī tādās vidēs kā mobilais, ņemot vērā, ka ir pieejams renderētājs, kas spēj sazināties ar resursdatora OS. Šeit nāk spēlēt React Native. Redziet, ka React Native kā atveidotāju izmanto React bibliotēku, bet ne ReactDOM. Tā vietā pati pakete reag-native ir renderētājs.

Mēs to darām reaģējošā vietējā lietojumprogrammā, lai palaistu lietotni

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

Skaties! Nav ReactDOM. Kāpēc ne? Tā kā mums nav tādu metožu kā appendChild, mums nav arī DOM līdzīgas vides. Tā vietā mobilajiem tālruņiem mums ir nepieciešams UI atbalsts tieši no OS. Bet React bibliotēkai tas nav jāzina, par to rūpējas renderētājs (React Native).

Reaģējiet samierināšanos

Kad mēs sakām, ka React uztur DOM kopiju, izmantojot virtuālo DOM JavaScript, un to izmanto, lai to diferencētu jebkurām izmaiņām un piemērotu reālam DOM, mēs nevēlamies, lai React rīkotos rupji. Reaģējiet, patiesībā tas ir ļoti slinks samierināšanās. React ļautu pēc iespējas mazāk izmaiņu, ti, ja iespējams, mēģinātu atkārtoti izmantot elementus, atribūtus un pat stilus!

Apsveriet šo piemēru:

stuff

Pieņemsim, ka jūs maināt šo JSX izteiksmi uz zemāk esošo, izmantojot kādu nosacījumu vai stāvokli:

something else

Tagad, reaģējot, React to redzētu labi, img tags izmanto to pašu className gan vecajos, gan jaunajos kokos, kāpēc gan to modificēt. Un tas vienkārši modificētu jūsu alt atribūtu un virzītos tālāk.

Tomēr ir nozveja. Tā kā mēs nevēlamies, lai React daudz aprēķinātu par diffing daļu, React pieņemtu, ka, ja kāds no vecākiem ir mainījies, tā saturošā apakškoks noteikti ir mainījies. Piemēram:

I did not change

Ja maināt šo JSX uz tālāk norādīto, izmantojot nosacījumu / stāvokli:

I did not change

Lai gan jūs varētu redzēt, ka mums nav atkārtoti jāizveido iekšējais p tags, taču React nevar to zināt, pārvietojoties kokam no augšas (ja, protams, jūs neveicat smagu koku diferenciāciju, kas ir daudz dārgāki algoritmi nekā heiristiskā O (n) reakcija seko diffei). Tātad, React nolemj iznīcināt visus bērnus (ti, izsaukt viņu tīrīšanas funkcijas, kas izmantojamas klasē balstītās komponentēs useEffect vai componentWillUnmount) un no jauna izveidot bērnus.

React Keys

Pievienojot / noņemot elementus mezglā, React vienkārši pārcilā bērnus vecā kokā un bērnus jaunā mezgla kokā un iezīmē vietas, kur tai jāveic jebkāda pievienošana / noņemšana. Bet tam ir trūkums bez izstrādātāja papildu palīdzības. Apsveriet šo piemēru:


    
  • A
  • B

Uzskata, ka tas ir mainīts uz zemāk norādīto nosacījumu / stāvokli:


   
  • Z
  • A
  • B

    Tagad, kad React sāks salīdzināt abus sarakstus par atšķirību, tas atradīs atšķirību 1. bērna mezglā, veco A mutāciju pārveidos par jaunu Z, pēc tam atkal bērna 2. mezglā to mutēs no vecā B uz jauno A, un pēc tam beidzot pievienojiet jauno B mezglu.

    Tomēr labāks veids būtu saglabāt esošos A un B mezglus un vienkārši pievienot Z mezglu. Bet kā React uzzinātu par to? Reaģēšanas taustiņi palīdzētu.

    Taustiņi vienkārši nodrošina jauku veidu, kā reaģēt, lai uzzinātu, kuri elementi ir mainījušies vai nav mainīti diffinga laikā. Tagad tā vietā, lai salīdzinātu visu elementu, React salīdzinātu bērnu atslēgas, lai redzētu, kurš elements ir jāpievieno / jānoņem. Šis veids ir efektīvs veids, kā veikt vienu un to pašu:

    
        
    • A
    • B

    Tagad, ja tas tiek mainīts uz:

    
        
    • Z
    • A
    • B

    React tagad zinātu, ka atslēgas 'A' un 'B' jau pastāv, tāpēc mums vienkārši jāpievieno jauns elements ar taustiņu 'Z'.

    Vai esat React izstrādātājs? Parādiet savas React prasmes , izstrādājot 3 minūšu interaktīvu spēli React un laimējiet kapuci, kreklus un kafijas krūzes ! Piedalieties codecomp , pievienojoties codedamn s nesaticību serveri šeit

    Tātad šie bija daži svarīgi jēdzieni, kas, manuprāt, jums kā React izstrādātājiem patiešām būtu noderīgi, lai sāktu izprast React kodolu un kā tas faktiski darbojas. Nekautrējieties nodot visus ieteikumus vai jautājumus, kas jums ir par to pašu.

    Jūs varat sekot man čivināt, lai uzzinātu vairāk JS / kodēšanas tvītus un lietas. Miers!