Stvarni/DOM preglednika:

DOM je kratica za 'Objektni model dokumenta'. To je strukturirani prikaz HTML-a na web stranici ili aplikaciji. Predstavlja cijelo korisničko sučelje (Korisničko sučelje) od web aplikacija kao podatkovna struktura stabla.

To je strukturni prikaz HTML elemenata web aplikacije jednostavnim riječima.

Kad god dođe do bilo kakve promjene u stanje korisničkog sučelja aplikacije, DOM je ažuriran i predstavlja promjenu. DOM se prikazuje i njime se manipulira sa svakom promjenom za ažuriranje korisničkog sučelja aplikacije, što utječe na performanse i usporava ih.

Stoga, s mnogim komponentama korisničkog sučelja i složenom strukturom DOM, Ažurirat će se skuplje jer se treba ponovno renderirati sa svakom promjenom.

DOM je konstituiran kao podatkovna struktura stabla. Sastoji se od čvora za svaki element korisničkog sučelja prisutan u web dokumentu.

linux koji

Ažuriranje DOM-a:

Ako znamo nešto o JavaScriptu, možda ćete vidjeti ljude koji koriste 'getElementById()' ili 'getElementByClass()' metoda za izmjenu sadržaja DOM-a.

Kad god se dogodi bilo kakva promjena u stanju vaše aplikacije, DOM se ažurira kako bi odražavao promjenu u korisničkom sučelju.

Kako virtualni DOM ubrzava stvari:

Kada se u aplikaciju dodaju bilo kakve nove stvari, stvara se virtualni DOM, predstavljen kao stablo. Svaki element u aplikaciji je čvor u stablu.

Stoga, kad god dođe do promjene položaja elementa, kreira se novi virtualni DOM. Novije virtualno DOM stablo se uspoređuje s najnovijim, gdje se bilježe promjene.

Pronalazi mogući način da se te promjene izvrše stvarnim DOM-om. Zatim bi se ažurirani elementi ponovno prikazali na stranici.

Kako virtualni DOM pomaže u Reactu:

Sve u Reactu promatra se kao komponenta, funkcionalna komponenta i komponenta klase. Komponenta ima stanje. Kad god promijenimo nešto u JSX datoteci, pojednostavljeno rečeno, kad god se promijeni stanje komponente, reakcija ažurira svoje virtualno DOM stablo.

React svaki put održava dva virtualna DOM-a. Prvi sadrži ažurirani virtualni DOM, a drugi je unaprijed ažurirana verzija ažuriranog virtualnog DOM-a. Uspoređuje unaprijed ažuriranu verziju ažuriranog virtualnog DOM-a i pronalazi što je promijenjeno u DOM-u, na primjer koje će se komponente promijeniti.

Iako se može činiti neučinkovitim, troškova više nema jer ažuriranje virtualnog DOM-a ne može oduzeti puno vremena.

Kada se trenutno virtualno DOM stablo uspoređuje s prethodnim, poznato je kao 'prkoseći'. Jednom kada React sazna što se promijenilo, ažurira objekte u stvarnom DOM-u. React koristi skupna ažuriranja za ažuriranje stvarnog DOM-a. Promjene stvarnog DOM-a šalju se u serijama umjesto da se šalju ažuriranja za jednu promjenu stanja komponente.

Ponovno renderiranje korisničkog sučelja je najskuplji dio, a React to uspijeva učiniti najučinkovitije osiguravajući Real DOM koji prima skupna ažuriranja za ponovno renderiranje korisničkog sučelja. Poziva se proces pretvaranja promjena u stvarni DOM pomirenje.

Poboljšava performanse i glavni je razlog zašto programeri vole React i njegov Virtual DOM.

Što je Reactov virtualni DOM?

Koncept Virtual DOM-a dolazi kako bi performanse Real DOM-a bile bolje i brže. Virtualni DOM je virtualni simbol DOM-a.

Ali glavna je razlika u tome što se svaki put, sa svakom promjenom, virtualni DOM ažurira umjesto stvarnog DOM-a.

Na primjer, stvaran i virtualni DOM je predstavljen kao a struktura stabla. Svaki element u stablu je čvor. A čvor dodaje se stablu kada se u korisničko sučelje aplikacije doda nova stavka.

Ako se položaj bilo kojeg elementa promijeni, a novi stvoreno je virtualno DOM stablo. Virtualni DOM izračunava minimalni broj operacija na stvarnom DOM-u kako biste izvršili promjene u stvarnom DOM-u. Učinkovit je i ima bolju izvedbu smanjenjem troškova i operacije ponovnog renderiranja cijelog stvarnog DOM-a.

Sada imamo normalno razumijevanje stvarnog i virtualnog DOM-a.

Pogledajmo kako Reagirati radi korištenjem Virtualni DOM.

• Svako korisničko sučelje je individualno komponenta, a svaka komponenta ima svoje stanje.
• Slijedi reakcija vidljivi obrasci te promatra promjene stanja.
• Kad god se napravi bilo kakva promjena u stanju komponente, React ažurira virtualno DOM stablo ali ne mijenja stvarno DOM stablo.
• Reagirati uspoređuje the Trenutna verzija od virtualni DOM s prethodna verzija nakon ažuriranje.
• React zna koji su objekti promijenjeni u virtualni DOM. Zamjenjuje objekte u stvarni DOM , dovodi do minimalna manipulacija operacije.
• Ovaj proces je poznat kao 'diferencijacija'. Ova će slika razjasniti koncept.

Na slici, tamno plava krugovi su čvorovi koji su promijenjeni. The država ovih komponenti se promijenilo. React izračunava razliku između prethodne i trenutne verzije virtualno DOM stablo, a cijelo nadređeno podstablo se ponovno prikazuje kako bi se prikazalo korisničko sučelje koje je promijenjeno.

Ažurirano stablo je serija ažurirana (da se ažuriranja stvarnog DOM-a šalju u serijama umjesto slanja ažuriranja za svaku promjenu stanja.) u pravi DOM.

Da bismo ušli dublje u ovo, moramo znati o Reagiraj render () funkcija.

Zatim, moramo znati o nekim važnim stvarima značajke od React.

JSX

JSX stoji za JavaScript XML. To je proširenje sintakse od JS. Koristeći JSX, možemo pisati HTML strukture u datoteci koja sadrži JavaScript kod.

Komponente

Komponente su nezavisna i za višekratnu upotrebu koda. Svako korisničko sučelje u aplikaciji React je komponenta. Jedna aplikacija ima mnogo komponente.

Komponente su dvije vrste, komponente klase i funkcionalne komponente.

Komponente klase imaju status jer koriste svoje 'stanje' za promjenu korisničkog sučelja. Funkcionalne komponente su komponente bez stanja. Ponašaju se poput JavaScript funkcije koja uzima proizvoljni parametar koji se zove 'props'.

Reagirajte kuke uvedeni su za pristup stanjima s funkcionalnim komponentama.

Metode životnog ciklusa

Metode životnog ciklusa važne su metode ugrađeni reagirati, koji djeluju na komponente kroz njihovo trajanje u DOM-u. Svaka komponenta Reacta prošla je životni ciklus događaja.

Metoda render() maksimalno se koristi metoda životnog ciklusa .

To je jedina unutarnja metoda Komponente klase React . Dakle, u svakoj klasi se poziva komponenta render().

Metoda render (). upravlja renderiranjem komponente pomoću korisničkog sučelja. Render () sadrži svu logiku prikazanu na ekranu. Također može imati a ništavan vrijednost ako ne želimo pokazati ništa na zaslonu.

Primjer je prikazan u nastavku:

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

Primjer će pokazati JSX napisano u render().

Kad država ili oslonac ažurira se unutar komponente, render() će vratiti različito stablo React elemenata.

Prilikom pisanja koda u konzoli ili JavaScript datoteci dogodit će se sljedeće:

• Preglednik analizira HTML kako bi pronašao čvor s ID-om.
• Uklanja podređeni element elementa.
• Ažurira element (DOM) s 'ažurirana vrijednost'.
• Preračunava CSS za roditeljske i podređene čvorove.
• Zatim ažurirajte izgled.

Na kraju prijeđite stablom na zaslonu.

Dakle, kao što znamo da ažuriranje DOM uključuje promjenu sadržaja. Više je vezano za to.

Složeni algoritmi uključeni su u ponovno izračunavanje CSS-a i mijenjanje izgleda, što utječe na performanse.

Dakle, React ima mnogo načina za rješavanje toga, budući da koristi nešto što je poznato kao virtualni DOM.

reactdome

Paket react-dom pruža metode specifične za DOM na najvišoj razini aplikacije za izlazak iz React modela ako je potrebno.

 import * as ReactDOM from 'react-dom'; 

Ako koristite ES5 s npm-om, trebali biste također napisati:

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

The reagirati-dom paket također nudi module specifične za klijentske i poslužiteljske aplikacije:

• reagirati-dom/klijent
• reagirati-dom/poslužitelj

React-dom paket izvozi ove metode:

• stvoritiPortal()
• flushSync()

React-dom metode se također izvoze:

• prikazati ()
• hidratizirati ()
• pronađiDOMNode()
• demountComponentAtNode ()

Napomena: I hidratacija i renderiranje zamijenjeni su novijim klijentskim metodama.

Podrška za preglednik

React podržava sve moderne preglednike, a neki polifili su potrebni za starije verzije.

Napomena: Ne možemo podržati starije preglednike koji ne podržavaju ES5 metode, poput Internet Explorera. Možete otkriti da aplikacije rade u najnovijim preglednicima ako su polifili kao što su es5-shim i es5-sham uključeni na stranicu, ali sami ste ako krenete putem.

Referenca

stvoritiPortal()

Stvara portal () Portal pruža način čitanja djece u DOM čvor, koji postoji izvan rangiranja DOM komponente.

java math.random

flushSync()

Force React istovremeno se ažurira u ponuđenom povratnom pozivu. Osigurava trenutno ažuriranje DOM-a.

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

Bilješka:

• Koristite umjereno. Flush Sync značajno je utjecao na performanse.
• FlushSync će prisiliti granice na čekanju da pokažu rezervno stanje.
• Pokreće efekte na čekanju i istovremeno primjenjuje ažuriranja prije vraćanja.
• flushSync ažurira ažuriranja izvan povratnog poziva za ispiranje ažurira povratni poziv. Na primjer, ako postoje neka ažuriranja na čekanju od klika, React ih može isprazniti prije ispiranja ažuriranja pri povratnom pozivu.

Referenca naslijeđa

render()

 render(element, container[, callback]) 

Napomena: Renderiranje je zamijenjeno stvaranjem Root-a u Reactu. Renderirajte React element u DOM u isporučenom spremniku i vratite referencu na komponentu.

Ako je React element prethodno prikazan u bilo kojem spremniku, izvršit će ažuriranje na njemu, a potrebno je odražavati najnoviji React element.

Izvršava se kada se komponenta renderira ako je omogućen opcijski povratni poziv.

Bilješka:

Metoda Render () kontrolira sadržaj čvora spremnika kada on prolazi. Svaki postojeći DOM element se zamjenjuje.

Render () ne mijenja čvor spremnika (može samo mijenjati djecu spremnika). Možda je moguće umetnuti komponentu u postojeći DOM čvor bez prepisivanja podređenih elemenata.

Render () trenutno vraća referencu na korijensku instancu ReactComponent.

Međutim, njegova se povratna vrijednost nasljeđuje i može se izbjeći jer u nekim slučajevima buduće verzije Reacta mogu generirati komponente asinkrono.

Ako trebate referencu na prototip ReactComponent, najbolje rješenje je priložiti referencu za opoziv elementu.

Render () se koristi za hidrataciju renderiranog spremnika na poslužitelj je zastario. Koristiti hydrateRoot() umjesto toga.

hidrat()

hidrat se zamjenjuje s hidratnim korijenom.

To je točno kao render(), ali se koristi za spremnik čiji HTML sadržaj renderira ReactDOMServer. React će pokušati povezati slušatelje događaja s trenutnom oznakom.

 hydrate(element, container[, callback]) 

Bilješka:

React očekuje da prikazani sadržaj bude identičan između poslužitelja i klijenta. Možemo ispraviti sadržaj teksta, ali nedosljednosti moramo tretirati kao greške i ispraviti ih. U razvojnom modu React upozorava na nedosljednost tijekom hidratacije.

Ne postoji jamstvo da su određene razlike ispravljene zbog odstupanja.

To je važno zbog performansi u većini aplikacija, a bit će preskupo potvrditi sve oznake.

Pretpostavimo da se atribut elementa ili tekstualni sadržaj neizbježno razlikuju između poslužitelja i klijenta (na primjer, vremenska oznaka ). U tom slučaju možemo utišati upozorenje dodavanjem suppressHydrationWarning = {true} na element.

Ako to nije tekstualni element, ne može ga pokušati zakrpati tako da može ostati nedosljedan do budućih ažuriranja.

Možete izvršiti renderiranje u dva prolaza ako moramo namjerno pružiti različite na poslužitelju i klijentu. Komponente ostavljene na klijentu mogu čitati varijable stanja poput this.state.isClient, gdje će se postaviti na true u komponentaDidMount().

Početni prolaz renderiranja učinit će isto što i poslužitelj, izbjegavajući nedosljednosti, ali će se dodatni prolaz izvršiti sinkrono nakon hidratacije.

Napomena: ovaj pristup će učiniti komponente sporijima jer to rade dva puta, stoga ga koristite pažljivo.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Bilješka:

demountComponentAtNode je zamijenjen sa root.unmount() u Reactu. Briše montiranu React komponentu iz DOM-a i čisti njezine rukovatelje događajima i stanje.

Ako nijedna komponenta nije montirana na spremnik, ne može učiniti ništa. Vraća true ako nijedna komponenta nije montirana i false ako nema komponente za demontiranje.

pronađiDOMNode()

Napomena: findDOMNode je otvor za izlaz koji se koristi za pristup osnovnom DOM čvoru. Ovaj otvor za spašavanje se u većini slučajeva ne preporučuje jer probija apstrakciju komponente. To je zastarjelo u StrictMode.

pronađiDOMNode(komponenta)

Ako je ova komponenta montirana na DOM, ovo vraća odgovarajući izvorni DOM element preglednika. Ova je metoda korisna za čitanje vrijednosti iz DOM-a, kao što su vrijednosti polja obrasca, i izvođenje DOM mjerenja. U većini slučajeva možete priložiti referencu na DOM čvor i izbjeći korištenje findDOMNode.

Kada komponenta vrati null ili false, findDOMNode vrati null. Kada se komponenta prikazuje u nizu, findDOMNode vraća tekstualni DOM čvor koji sadrži tu vrijednost. Komponenta može vratiti fragment s više djece u slučaju da je findDOMNode vratio DOM čvor koji odgovara prvom nepraznom djetetu.

Bilješka:

kako otvoriti datoteku u Javi

findDOMNode radi samo na montiranim komponentama (tj. komponentama koje su postavljene u DOM). Ako pokušate pozvati ovo na komponenti koja još nije montirana (kao što je pozivanje findDOMNode() na render() na komponenti koja još nije stvorena), bit će izbačena iznimka.

findDOMNode ne može se koristiti u funkcijskim komponentama.

DOM elementi

React implementira DOM sustav neovisan o pregledniku za performanse i kompatibilnost s više preglednika. Koristimo ovu priliku da počistimo neke od grubih rubova u DOM implementaciji preglednika.

U Reactu, sva DOM svojstva i atributi (uključujući rukovatelje događajima) moraju biti camelcase. Na primjer, HTML atribut tabindex odgovara atributu tab Index u Reactu.

Izuzetak su atributi aria-* i data-*, koji moraju biti malim slovima. Na primjer, možete imati oznaku područja kao oznaku područja.

Razlike u atributima

Nekoliko će atributa raditi drugačije između Reacta i HTML-a:

provjereno

Provjereni atribut podržavaju komponente potvrdnog okvira ili radija tipa . Koristan je za proizvodnju kontroliranih komponenti. Ovo možete koristiti da odredite je li komponenta označena ili ne.

java uzorak koda

DefaultChecked je neprovjereni pandan koji određuje da je komponenta provjerena prvi put kada se montira.

naziv klase

Za navođenje CSS klase upotrijebite atribut className. Primjenjuje se na sve regularne DOM i SVG elemente kao što su, itd.

Ako koristite React s web komponentama (neuobičajeno), umjesto toga upotrijebite atribut klase.

opasnoPostaviInnerHTML

Dangerously SetInnerHTML je Reactova zamjena za korištenje innerHTML-a u DOM pregledniku. Konfiguriranje HTML koda je riskantno jer je lako izložiti korisnike napadu cross-site scripting (XSS).

Dakle, možemo postaviti HTML izravno iz Reacta, ali morate opasno upisati SetInnerHTML i proslijediti objekt s ključem __html da zapamtite da je opasno.

Na primjer:

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

React elementi umjesto toga koriste htmlFor, budući da je for rezervirana riječ u JavaScriptu.

onChange

Događaj onChange ponaša se prema očekivanjima; događaj se aktivira svaki put kada se promijeni polje obrasca.

Namjerno ne koristimo postojeće ponašanje preglednika jer je promjena velika zbog svog ponašanja, a React se oslanja na događaj kako bi obradio korisnički unos u stvarnom vremenu.

odabran

Ako želite označiti kao odabrano, umjesto toga pogledajte vrijednost te opcije u vrijednosti . Pogledajte 'Odaberi oznaku' za detaljne upute.

Bilješka:

U najvećem broju slučajeva nazivi klasa odnose se na klase definirane u vanjskom CSS listu stilova. Stilovi se koriste u React aplikacijama za dodavanje izračunatih stilova tijekom renderiranja. Atribut stila prihvaća JavaScript objekt sa svojstvima deve umjesto CSS niza.

Sukladno je DOM stil JavaScript svojstva, učinkovitiji je i izbjegava XSS sigurnosne rupe.

Na primjer:

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

Imajte na umu da: stilovi nemaju automatski prefiks. Kako bismo podržali starije preglednike, moramo dostaviti svojstva stila:

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

Ključevi stila su deva kako bi odgovarali pristupu svojstvima na DOM čvorovima unutar JS-a. Prefiksi pružatelja usluga MS počinju velikim slovom.

React će automatski dodati sufiks 'px' nekim inline svojstvima stilova brojeva. Ako želimo koristiti druge jedinice osim 'px', navedite vrijednost kao niz sa željenom jedinicom.

na primjer:

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

Međutim, ne pretvaraju se sva svojstva stila u nizove piksela.

Poništi upozorenje o sadržaju koji se može uređivati

Postoji upozorenje ako je element za djecu označen kao sadržaj koji se može uređivati, jer neće raditi. Atribut potiskuje upozorenje.

Upozorenje o suzbijanju

Ako koristimo React renderiranje na strani poslužitelja, to je upozorenje kada poslužitelj i klijent renderiraju s različitim sadržajem. Međutim, u rijetkim je slučajevima teško jamčiti točno podudaranje. Na primjer, očekuje se da će se vremenske oznake razlikovati na poslužitelju ili klijentu.

Ako postavite upozorenje o suzbijanju na true, ono neće upozoravati na nepodudarnosti između atributa i sadržaja elementa.

Radio je samo na jednoj razini dubine i trebao se koristiti kao bijeg.

vrijednost

Atribut vrijednosti dizajniran je komponentama , i . Možete ga koristiti za postavljanje vrijednosti komponente.

Koristan je za proizvodnju kontroliranih komponenti. defaultValue i jednako neoznačeno postavljaju vrijednost komponente kada se montira serijski.

Svi podržani HTML atributi

Podržani su svi prilagođeni i standardni DOM atributi.

React je pružio API usmjeren na JavaScript u DOM-u. Komponente Reacta često sadrže prilagođene rekvizite i rekvizite povezane s DOM-om, a zatim React koristi iste CamelCase konvencije kao DOM API:

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