React este o bibliotecă JavaScript foarte populară. Cu peste 5,5 milioane de descărcări săptămânale, React se bucură de o mare popularitate. Dar nu mulți dezvoltatori React știu cum funcționează React sub capotă.

În această postare, voi încerca să descopăr câteva lucruri interesante despre React, pe care dvs., ca dezvoltator React, le-ați putea găsi fascinante. Să începem de la început.

Dar înainte de a începe, dacă sunteți dezvoltator React, am câteva vești interesante pentru dvs.! După ce finalizați acest articol, veți putea să dezvoltați ceva interesant cu React și să câștigați premii pe drum 🙂

Ce face React?

În esență, React întreține practic un copac pentru dvs. Acest arbore este capabil să facă calcule eficiente ale diferențelor pe noduri.

Gândiți-vă la codul dvs. HTML ca la un copac. De fapt, acesta este exact modul în care browserul tratează DOM-ul dvs. (codul dvs. HTML redat în browser). React vă permite să vă reconstruiți în mod eficient DOM-ul în JavaScript și să împingeți doar acele modificări care au avut loc în DOM.

JSX este zahăr sintactic

Nu există nimic asemănător cu JSX – nici pentru JavaScript, nici pentru browser. JSX este pur și simplu zahăr sintactic pentru crearea obiectelor JavaScript foarte specifice.

Când scrieți ceva de genul:

const tag = <h1>Hello</h1>

ceea ce faci în esență este următorul:

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

Vedeți, când începeți să scrieți lucruri imbricate, nu numai că este dificil de codificat, dar devine și foarte incomod să mențineți o astfel de bază de cod. JSX vă ajută astfel să aduceți curățenia HTML la puterea JavaScript-ului.

Dar ce face React.createElement în sine? Se creează un obiect JavaScript vechi simplu. De fapt, îl poți apela manual și vezi singur!

Cum functioneaza React sub capota

Vedeți, avem un obiect ca acesta:

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

Și dacă începem cuibărirea unor astfel de elemente:

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

Am începe să obținem obiecte imbricate:

1611952146 770 Cum functioneaza React sub capota

Deci, acum știți, odată ce toate JSX-urile sunt analizate și toate apelurile React.createElement au fost rezolvate, aterizăm cu un obiect gigant cuibărit ca mai sus.

React Renderer

Acum, dacă vă întoarceți la punctul în care pornim aplicația noastră, veți vedea că în fișierul index.js veți găsi următoarea linie:

// .. prev code

ReactDOM.render(<App />, container)

De sus, știm asta când <App /> s-a făcut analiza, acesta este doar un obiect imens al elementelor React. Atunci cum este capabil React să construiască divsuri reale și tag-uri p din ea? Faceți cunoștință cu ReactDOM.

ReactDOM, la rândul său, creează recursiv noduri în funcție de proprietatea „tip” și le adaugă în cele din urmă la DOM.

Ar trebui să fie clar în acest moment că de ce decuplarea React de randere este de fapt o mișcare excelentă! Ceea ce face React este, pur și simplu, să construiești un copac al interfeței de utilizare care ar putea fi utilizat nu numai pe web, ci și pe medii precum mobilul, având în vedere că este disponibil un renderer care poate comunica cu sistemul de operare gazdă. Aici, React Native vine să joace. Vedeți, React Native folosește biblioteca React, dar nu ReactDOM ca randare. În schimb, pachetul react-native în sine este un randator.

Facem acest lucru într-o aplicație native native pentru a porni aplicația:

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

Uite! Fără ReactDOM. De ce nu? Deoarece nu avem metode precum appendChild, nici nu avem un mediu DOM. În schimb, pentru telefoanele mobile, avem nevoie de suport pentru interfața de utilizare direct din sistemul de operare. Dar biblioteca React nu trebuie să știe asta, rendererul (React Native) se ocupă de asta.

Reacționează reconcilierea

Când spunem că React menține o copie a DOM utilizând DOM virtual în JavaScript și îl folosește pentru a-l diferi la orice modificări și a-l aplica DOM-ului real, nu vrem ca React să-și forțeze bruta drumul. Reacționează, de fapt face o reconciliere foarte leneșă. React ar face cea mai mică cantitate posibilă de modificări, adică ar încerca să reutilizeze elemente, atribute și chiar stiluri, dacă este posibil!

Luați în considerare acest exemplu:

<img className="class-1" alt="stuff" />

Să presupunem că schimbați această expresie JSX la cea de mai jos folosind o condiție sau o stare:

<img className="class-1" alt="something else" />

Acum, în timp ce diferă, React ar vedea că bine, eticheta img folosește același className atât în ​​copacii vechi, cât și în cei noi, deci de ce să-l modificați. Și ar modifica doar atributul alt și ar continua.

Cu toate acestea, există o captură. Deoarece nu vrem ca React să facă multe calcule pe diferite părți, React ar presupune că, dacă un părinte s-a schimbat, subarborele care îl conține s-a schimbat cu siguranță. De exemplu:

<div className="class-1">
	<p>I did not change</p>
</div>

Dacă schimbați acest JSX la cel de mai jos folosind condiția / starea:

<p className="class-1">
	<p>I did not change</p>
</p>

Deși ați putut vedea că nu este nevoie să recreăm eticheta p interioară, dar React nu are cum să știe că în timp ce traversați copacul de sus (cu excepția cazului în care, desigur, efectuați diferențe mari de copaci, care sunt algoritmi mult mai scumpi decât reacția euristică O (n) urmează pentru diferență). Deci, React decide să distrugă toți copiii (adică apelând la funcțiile lor de curățare în useEffect, sau componentWillUnmount în componente bazate pe clase) și să recreeze copiii de la zero.

Taste de reacție

Atunci când adăugați / eliminați elemente într-un nod, React ar pur și simplu să depășească copiii din copacul vechi și copiii din noul copac al nodului și să marcheze locurile în care trebuie să efectueze orice adăugare / eliminare. Dar acest lucru are un dezavantaj fără ajutor suplimentar din partea dezvoltatorului. Luați în considerare acest exemplu:

<ul>
    <li>A</li>
    <li>B</li>
</ul>

Luați în considerare faptul că acest lucru este schimbat la cel de mai jos prin condiție / stare:

<ul>
    <li>Z</li>
    <li>A</li>
    <li>B</li>
<ul>

Acum, când React ar începe să compare cele două liste pentru diferență, ar găsi diferența la nodul 1 copil, ar muta vechiul A în Z nou, apoi din nou la nodul 2 copil, l-ar muta din vechiul B în noul A, și apoi adăugați în cele din urmă noul nod B.

Cu toate acestea, o modalitate mai bună ar fi fost să păstreze nodurile A și B existente și să prefaceți nodul Z. Dar cum ar ști React despre asta? Tastele de reacție ar ajuta.

Tastele oferă doar un mod frumos de a reacționa pentru a ști ce elemente s-au schimbat sau nu s-au schimbat în timp ce diferă. Acum, în loc să compare întregul element, React ar compara cheile copiilor pentru a vedea care element trebuie adăugat / eliminat. Modul de mai jos este un mod eficient de a efectua același lucru:

<ul>
    <li key="A">A</li>
    <li key="B">B</li>
</ul>

Acum, dacă acest lucru se schimbă în:

<ul>
    <li key="Z">Z</li>
    <li key="A">A</li>
    <li key="B">B</li>
</ul>

React ar ști acum că tastele „A” și „B” există deja, așa că trebuie doar să adăugăm noul element cu cheia „Z”.

Ești dezvoltator React? Arătați-vă Reacționează abilitățile prin dezvoltarea unui joc interactiv de 3 minute în React și câștigă hanorace, cămăși și căni de cafea! Participă la codecomp prin aderarea la serverul discord al codedamn Aici

Așadar, acestea au fost câteva concepte importante pe care cred că le-ar fi de mare ajutor, ca dezvoltatori React, pentru a începe să înțelegeți nucleul React și cum funcționează de fapt. Simțiți-vă liber să transmiteți orice sugestie sau întrebare aveți despre aceleași.

Poti urmărește-mă pe twitter pentru mai multe tweets și lucruri JS / coding. Pace!