DOM real/browser:

DOM înseamnă „Model de obiect document”. Este o reprezentare structurată a HTML în pagina web sau în aplicație. Reprezintă întreaga interfață de utilizare (Interfața cu utilizatorul) al aplicație web ca structură de date arborescentă.

Este un reprezentarea structurală a elementelor HTML a unei aplicații web în cuvinte simple.

Ori de câte ori există vreo schimbare în starea interfeței de utilizare a aplicației, DOM este actualizat și reprezintă schimbarea. DOM-ul este redat și manipulat cu fiecare modificare pentru actualizarea interfeței cu utilizatorul aplicației, ceea ce afectează performanța și o încetinește.

Prin urmare, cu multe componente UI și structura complexă a DOM, Se va actualiza mai scump, deoarece trebuie redat din nou cu fiecare modificare.

DOM-ul este constituit ca o structură de date arborescentă. Este format din nodul pentru fiecare element UI prezente în documentul web.

conversie int în șir în java

Actualizarea DOM:

Dacă știm ceva despre JavaScript, este posibil să vedeți oameni care folosesc „getElementById()” sau „getElementByClass()” metoda de modificare a conținutului DOM.

Ori de câte ori există vreo modificare care are loc în starea aplicației dvs., DOM-ul este actualizat pentru a reflecta modificarea în interfața de utilizare.

Cum DOM-ul virtual accelerează lucrurile:

Când orice lucruri noi sunt adăugate la aplicație, este creat DOM-ul virtual, reprezentat ca un arbore. Fiecare element din aplicație este un nod în arbore.

Prin urmare, ori de câte ori există o schimbare a poziției unui element, este creat un nou DOM virtual. Arborele DOM virtual mai nou este comparat cu cel mai recent, unde se notează modificările.

Găsește modalitatea posibilă de a face aceste modificări prin DOM-ul real. Apoi, elementele actualizate ar fi redate din nou pe pagină.

Cum ajută Virtual DOM în React:

Totul în React este observat ca o componentă, o componentă funcțională și o componentă de clasă. O componentă are o stare. Ori de câte ori schimbăm ceva în fișierul JSX, pentru a spune simplu, ori de câte ori starea componentei este schimbată, react își actualizează arborele DOM virtual.

React menține două DOM-uri virtuale de fiecare dată. Primul conține DOM-ul virtual actualizat, iar celălalt este o versiune pre-actualizată a DOM-ului virtual actualizat. Compară versiunea pre-actualizată a DOM-ului virtual actualizat și găsește ce a fost schimbat în DOM, cum ar fi componentele care vor fi modificate.

Deși poate părea ineficient, costul nu mai este, deoarece actualizarea DOM-ului virtual nu poate dura mult timp.

Când se compară arborele DOM virtual actual cu cel anterior, este cunoscut ca „sfidând”. Odată ce React știe ce s-a schimbat, actualizează obiectele din DOM-ul real. React folosește actualizări în lot pentru a actualiza DOM-ul real. Modificările la DOM-ul real sunt trimise în loturi, mai degrabă decât trimiterea oricăror actualizări pentru modificarea unică în starea componentei.

Redarea interfeței de utilizare este cea mai costisitoare parte, iar React reușește să o facă cel mai eficient, asigurând DOM-ul real care primește actualizările lotului pentru a reda interfața de utilizare. Procesul de conversie a modificărilor în DOM-ul real este numit reconciliere.

Îmbunătățește performanța și este principalul motiv pentru care dezvoltatorii iubesc reacția și DOM-ul său virtual.

Ce este Virtual DOM al lui React?

Conceptul de Virtual DOM vine să facă performanța Real DOM mai bună și mai rapidă. DOM virtual este un simbol virtual al DOM.

Dar principala diferență este că de fiecare dată, cu fiecare modificare, DOM-ul virtual este actualizat în loc de DOM-ul real.

De exemplu, cel real și DOM virtual este reprezentat ca a structura arborelui. Fiecare element din arbore este un nod. A nodul este adăugat în arbore când un element nou este adăugat la interfața de utilizare a aplicației.

Dacă poziția oricăror elemente se modifică, a nou arborele DOM virtual este creat. DOM-ul virtual calculează numărul minim de operații pe DOM-ul real pentru a face modificări în DOM-ul real. Este eficient și are performanțe mai bune prin reducerea costurilor și operațiunii de redare a întregului DOM real.

Acum avem o înțelegere normală a DOM-ului real și virtual.

Să ne uităm cum Reacţiona functioneaza prin folosire DOM virtual.

• Fiecare UI este un individ componenta, iar fiecare componentă are starea ei.
• Urmează reacția modele observabile și observă schimbările în stări.
• Ori de câte ori se face vreo modificare a stării componentei, React actualizează arborele DOM virtual dar nu schimbă arborele DOM real.
• Reacţiona compară cel Versiune curentă al DOM virtual cu versiunea anterioara după actualizare.
• React știe ce obiecte sunt modificate în DOM virtual. Acesta înlocuiește obiectele din DOM real , duce la manipulare minimă operațiuni.
• Acest proces este cunoscut ca 'diferenţiere'. Această imagine va clarifica conceptul.

În imagine, albastru inchis cercuri sunt cele noduri care au fost schimbate. The stat dintre aceste componente s-a schimbat. React calculează diferența dintre versiunea anterioară și cea actuală a arbore DOM virtual, și întregul subarboresc părinte este redat din nou pentru a afișa interfața de utilizare care este schimbată.

Arborele actualizat este lot actualizat (că actualizările la DOM-ul real sunt trimise în loturi în loc să trimită actualizări pentru fiecare schimbare de stare.) la DOM-ul real.

Pentru a aprofunda acest lucru, trebuie să știm despre Reacționează randamentul () funcţie.

Apoi, trebuie să știm despre unele dintre cele importante Caracteristici de React.

JSX

JSX reprezintă JavaScript XML. Este un extensia de sintaxă a lui JS. Folosind JSX, putem scrie Structuri HTML în dosarul care conţine Cod JavaScript.

Componente

Componentele sunt independent și reutilizabile de cod. Fiecare interfață cu utilizatorul din aplicația React este o componentă. O singură aplicație are multe componente.

Componentele sunt de două tipuri, componentele clasei și componente functionale.

Componentele clasei sunt cu stare deoarece își folosesc „starea” pentru a schimba interfața cu utilizatorul. Componentele funcționale sunt componente apatride. Acţionează ca o funcţie JavaScript care ia un parametru arbitrar numit „recuzită”.

Ștergeți memoria cache npm

React Hooks au fost introduse pentru a accesa stările cu componente funcționale.

Metode ciclului de viață

Metode ale ciclului de viață sunt metode importante incorporat să reacționeze, care operează pe componente prin durata lor în DOM. Fiecare componentă a React a trecut printr-un ciclu de viață de evenimente.

Metoda render() este maximul utilizat metoda ciclului de viață .

Este singura metodă în interior Componentele clasei React . Deci, în fiecare clasă, componenta render() este apelată.

Metoda de randare (). gestionează randarea componentei de către UI. Randamentul () conține toată logica afișată pe ecran. Poate avea și o nul valoare dacă nu vrem să arătăm nimic pe ecran.

Un exemplu este prezentat mai jos:

 class Header extends React.Component{ render(){ return React Introduction } } 

Exemplul va arăta JSX scris în render().

Când un stat sau recuzită este actualizat în cadrul componentei, face() va returna un arbore diferit de elemente React.

Când scrieți codul în consolă sau în fișierul JavaScript, acestea se vor întâmpla:

• Browserul analizează codul HTML pentru a găsi nodul cu ID-ul.
• Îndepărtează elementul copil al elementului.
• Actualizează elementul (DOM) cu „valoare actualizată”.
• Se recalculeaza CSS pentru nodurile părinte și copil.
• Apoi, actualizați aspectul.

În cele din urmă, străbate arborele de pe ecran.

Deci, după cum știm că actualizarea DOM presupune modificarea conținutului. Este mai atașat de el.

Algoritmi complecși sunt implicați în recalcularea CSS și schimbarea layout-urilor, care afectează performanța.

Deci, React are multe moduri de a face față, deoarece folosește ceva cunoscut sub numele de DOM virtual.

reactdome

Pachetul react-dom oferă metode specifice DOM la nivelul superior al aplicației pentru a scăpa de ruta din modelul React, dacă este necesar.

 import * as ReactDOM from 'react-dom'; 

Dacă utilizați ES5 cu npm, ar trebui să scrieți și:

 var ReactDOM = require('react-dom'); 

The reac-dom pachetul oferă, de asemenea, module specifice aplicațiilor client și server:

• react-dom/client
• react-dom/server

Pachetul react-dom exportă aceste metode:

• createPortal()
• flushSync()

Metodele react-dom sunt, de asemenea, exportate:

• randa ()
• hidrata ()
• findDOMNode()
• unmountComponentAtNode ()

Notă: Atât hidratarea, cât și redarea au fost înlocuite cu metode client mai noi.

Suport pentru browser

React acceptă toate browserele moderne și sunt necesare câteva polifillări pentru versiunile mai vechi.

Notă: Nu putem accepta browsere mai vechi care nu acceptă metode ES5, cum ar fi, Internet Explorer. Puteți descoperi că aplicațiile funcționează în cele mai recente browsere dacă polifill-uri precum es5-shim și es5-sham care sunt incluse în pagină, dar sunteți pe cont propriu dacă luați calea.

Referinţă

createPortal()

Creates Portal () Portal oferă modalitatea de a citi copiii în nodul DOM, care există în afara clasamentului componentei DOM.

flushSync()

Forțați actualizările React în apelul returnat simultan. Se asigură că DOM-ul este actualizat imediat.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Notă:

• Folosiți cu moderație. Flush Sync a afectat semnificativ performanța.
• FlushSync va forța granițele în așteptare să arate starea de rezervă.
• Rulează efecte în așteptare și aplică simultan actualizările înainte de a le returna.
• flushSync șterge actualizările din afara callback-ului pentru a șterge actualizările callback-ului. De exemplu, dacă există actualizări în așteptare de la un clic, React le poate șterge înainte de a șterge actualizările la apel invers.

Referință moștenită

face()

 render(element, container[, callback]) 

Notă: Redarea este înlocuită cu crearea rădăcinii în React. Redați un element React în DOM la containerul furnizat și rambursați o referință la componentă.

Dacă un element React a fost redat anterior în orice container, acesta ar efectua o actualizare și este necesar să se reflecte cel mai recent element React.

Se execută atunci când componenta este redată dacă este furnizată apelarea opțională.

Notă:

Metoda Render () controlează conținutul nodului container atunci când acesta trece. Orice element DOM existent este înlocuit.

Render () nu modifică nodul containerului (poate modifica doar copiii containerului). Ar putea fi posibilă inserarea unei componente într-un nod DOM existent fără a suprascrie elementele copil.

Redă () referință în prezent înapoi la instanța rădăcină a ReactComponent.

Cu toate acestea, valoarea sa returnată este moștenită și poate fi evitată deoarece, în unele cazuri, versiunile viitoare ale React pot genera componente asincron.

Dacă aveți nevoie de o referință la prototipul ReactComponent, cea mai bună soluție este să atașați o referință de rechemare la element.

Render () este folosit pentru a hidrata un container redat pentru ca serverul este învechit. Utilizare hydrateRoot() în locul ei.

hidrat()

hidratul este înlocuit cu hidratul Rădăcină.

Este exact ca render() dar este folosit pentru un container al cărui conținut HTML este redat de ReactDOMServer. React va încerca să conecteze ascultătorii de evenimente la marcajul curent.

 hydrate(element, container[, callback]) 

Notă:

React se așteaptă ca conținutul redat să fie identic între server și client. Putem corecta conținutul textului, dar trebuie să tratăm inconsecvențele ca pe erori și să le corectăm. În modul de dezvoltare, React avertizează asupra inconsecvenței în timpul hidratării.

Nu există nicio asigurare că diferențele specifice sunt corectate pentru discrepanțe.

Este important din motive de performanță în majoritatea aplicațiilor și va fi prea costisitor să validați toate indicatoarele.

char la șir în java

Să presupunem că atributul unui element sau conținutul textului diferă în mod inevitabil între server și client (de exemplu, marca temporală ). În acest caz, putem opri alerta prin adăugare suppressHydrationWarning = {adevărat} la element.

Dacă nu este un element text, nu poate încerca să-l corecteze, astfel încât să rămână inconsecvent până la actualizările viitoare.

Puteți efectua o randare în două treceri dacă trebuie să oferim în mod intenționat diferit pe server și pe client. Componentele rămase pe client pot citi variabile de stare precum this.state.isClient, unde se va seta la true în componentDidMount().

Trecerea inițială de randare va face la fel ca și serverul, evitând inconsecvențele, dar trecerea suplimentară se va face sincron după hidratare.

Notă: Această abordare va face componentele mai lente, deoarece o fac de două ori, așa că utilizați-o cu atenție.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Notă:

unmountComponentAtNode a fost înlocuit cu root.unmount() în React. Acesta șterge componenta React montată din DOM și își curățește gestionatorii de evenimente și starea.

Dacă nu a fost montată nicio componentă pe container, acesta nu poate face nimic. Returnează true dacă nu este montată nicio componentă și false dacă nu există nicio componentă de demontat.

findDOMNode()

Notă: findDOMNode este o trapă de evacuare folosită pentru a accesa nodul DOM subiacent. Această trapă de evacuare este descurajată în cele mai multe cazuri, deoarece străpunge abstracția componentei. A fost depreciat în StrictMode.

findDOMNode(componenta)

Dacă această componentă a fost montată pe DOM, aceasta returnează elementul DOM al browserului nativ corespunzător. Această metodă este utilă pentru citirea valorilor din DOM, cum ar fi valorile câmpului de formular, și efectuarea măsurătorilor DOM. În cele mai multe cazuri, puteți atașa o referință la nodul DOM și puteți evita utilizarea findDOMNode.

Când o componentă returnează null sau false, findDOMNode returnează null. Când o componentă este redată într-un șir, findDOMNode returnează un nod DOM text care conține acea valoare. Componenta poate returna un fragment cu mai mulți copii în cazul în care findDOMNode a returnat nodul DOM corespunzător primului copil nevid.

Notă:

findDOMNode funcționează numai pe componentele montate (adică componentele care au fost plasate în DOM). Dacă încercați să apelați acest lucru pe o componentă care nu a fost încă montată (cum ar fi apelarea findDOMNode() pe render() pe o componentă care nu a fost încă creată), va fi aruncată o excepție.

findDOMNode nu poate fi utilizat în componentele funcției.

Elemente DOM

React implementează un sistem DOM independent de browser pentru performanță și cu compatibilitate între browsere. Profităm de această ocazie pentru a curăța unele dintre marginile aspre în implementarea DOM a browserului.

În React, toate proprietățile și atributele DOM (inclusiv gestionatorii de evenimente) trebuie să fie camelcase. De exemplu, atributul HTML tabindex corespunde atributului tab Index din React.

Excepțiile sunt atributele aria-* și data-*, care trebuie să fie litere mici. De exemplu, puteți avea o etichetă de zonă ca etichetă de zonă.

Diferențele de atribute

Mai multe atribute vor funcționa diferit între React și HTML:

verificat

Atributul bifat este acceptat de componentele unei casete de selectare sau radio de tip . Este util pentru fabricarea componentelor controlate. Puteți utiliza acest lucru pentru a determina dacă componenta este verificată sau nu.

DefaultChecked este omologul neverificat care determină că componenta este verificată prima dată când este montată.

numele clasei

Pentru a specifica clasa CSS, utilizați atributul className. Se aplică tuturor elementelor DOM și SVG obișnuite, cum ar fi , , etc.

Dacă utilizați React with Web Components (mai puțin frecvente), utilizați în schimb atributul class.

dangerouslySetInnerHTML

Dangerously SetInnerHTML este înlocuitorul React pentru utilizarea innerHTML în browserul DOM. Configurarea codului HTML este riscantă, deoarece este ușor să expuneți utilizatorii la un atac de tip cross-site scripting (XSS).

Deci putem seta HTML direct din React, dar trebuie să tastați în mod periculos SetInnerHTML și să treceți un obiect cu cheia __html pentru a vă aminti că este periculos.

De exemplu:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

Elementele React folosesc în schimb htmlFor, deoarece pentru este un cuvânt rezervat în JavaScript.

cu privire la schimbările

Evenimentul onChange se comportă conform așteptărilor; evenimentul se declanșează de fiecare dată când un câmp de formular este modificat.

Nu folosim în mod intenționat comportamentul de browser existent, deoarece schimbarea este mare pentru comportamentul său, iar React se bazează pe eveniment pentru a gestiona intrarea utilizatorului în timp real.

selectat

Dacă doriți să marcați ca selectat, consultați valoarea opțiunii respective în valoarea lui. Consultați „Selectați eticheta” pentru instrucțiuni detaliate.

Notă:

În cazuri maxime, numele claselor se referă la clase definite într-o foaie de stil CSS externă. Stilurile sunt folosite în aplicațiile React pentru a adăuga stiluri calculate în timpul randării. Atributul style acceptă obiectul JavaScript cu proprietăți camel în loc de un șir CSS.

Se conformează Stil DOM Proprietăți JavaScript, este mai eficient și evită XSS gauri de securitate.

cate saptamani pe luna

De exemplu:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Rețineți că: stilurile nu sunt prefixate automat. Pentru a accepta browsere mai vechi, trebuie să furnizăm proprietăți de stil:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Cheile de stil sunt camel pentru a corespunde accesării proprietăților pe nodurile DOM din JS. Prefixele furnizorului MS încep cu o literă mare.

React va adăuga automat un sufix „px” la unele proprietăți de stil numeric inline. Dacă dorim să folosim alte unități decât „px”, specificați valoarea ca șir cu unitatea dorită.

de exemplu:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Cu toate acestea, nu toate proprietățile stilului sunt convertite în șiruri de pixeli.

Suprimați alerta de conținut editabil

Există un avertisment dacă un element pentru copii este marcat ca conținut editabil, deoarece nu va funcționa. Atributul suprimă avertismentul.

Avertisment de suprimare

Dacă folosim redarea React pe partea de server, este un avertisment atunci când serverul și clientul se redă cu conținut diferit. Cu toate acestea, este greu de garantat o potrivire exactă în cazuri rare. De exemplu, marcajele temporale sunt de așteptat să difere la server sau la client.

Dacă setați avertismentul de suprimare la adevărat, acesta nu va avertiza despre nepotriviri între atribute și conținutul elementului.

A funcționat doar la un nivel de adâncime și a fost menit să fie folosit ca o scăpare.

valoare

Atributul valoare este proiectat de componentele și. Îl puteți folosi pentru a seta valoarea componentei.

Este util pentru fabricarea componentelor controlate. defaultValue și egal cu unchecked setează valoarea componentei atunci când este montată în serie.

Toate atributele HTML acceptate

Orice atribut DOM personalizat și standard este acceptat.

React a furnizat un API centrat pe JavaScript în DOM. Și componentele React conțin adesea elemente de recuzită personalizate și legate de DOM, iar apoi React utilizează aceleași convenții CamelCase ca și API-ul DOM:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API