Pravi/DOM brskalnika:

DOM pomeni 'Objektni model dokumenta'. Je strukturirana predstavitev HTML-ja na spletni strani ali aplikaciji. Predstavlja celoten uporabniški vmesnik (Uporabniški vmesnik) od spletna aplikacija kot drevesna podatkovna struktura.

Je strukturna predstavitev elementov HTML spletne aplikacije z enostavnimi besedami.

Kadarkoli pride do kakršne koli spremembe v stanje uporabniškega vmesnika aplikacije, DOM je posodobljen in predstavlja spremembo. DOM se upodablja in manipulira z vsako spremembo za posodobitev uporabniškega vmesnika aplikacije, kar vpliva na zmogljivost in jo upočasni.

Zato s številnimi komponentami uporabniškega vmesnika in kompleksno strukturo DOM, Posodobitev bo dražja, saj jo je treba ob vsaki spremembi znova upodobiti.

DOM je sestavljen kot drevesna podatkovna struktura. Sestavljen je iz vozlišča za vsako element uporabniškega vmesnika prisoten v spletnem dokumentu.

jabolčni emoji na androidu

Posodabljanje DOM-a:

Če vemo nekaj o JavaScriptu, boste morda videli ljudi, ki uporabljajo 'getElementById()' oz 'getElementByClass()' način za spreminjanje vsebine DOM.

Kadar koli pride do kakršne koli spremembe v stanju vaše aplikacije, se DOM posodobi, da odraža spremembo v uporabniškem vmesniku.

Kako Virtual DOM pospeši stvari:

Ko so v aplikacijo dodane nove stvari, se ustvari virtualni DOM, predstavljen kot drevo. Vsak element v aplikaciji je vozlišče v drevesu.

Zato se vsakič, ko se položaj elementa spremeni, ustvari nov virtualni DOM. Novejše virtualno drevo DOM se primerja z najnovejšim, kjer so zabeležene spremembe.

Poišče možen način za izvedbo teh sprememb z dejanskim DOM. Nato bi se posodobljeni elementi znova upodobili na strani.

Kako virtualni DOM pomaga pri Reactu:

Vse v Reactu je opazovano kot komponenta, funkcionalna komponenta in komponenta razreda. Komponenta ima stanje. Kadarkoli spremenimo nekaj v datoteki JSX, poenostavljeno povedano, vsakič, ko se spremeni stanje komponente, reakcija posodobi svoje virtualno drevo DOM.

React vsakič vzdržuje dva virtualna DOM-a. Prvi vsebuje posodobljen virtualni DOM, drugi pa je vnaprej posodobljena različica posodobljenega virtualnega DOM-a. Primerja predhodno posodobljeno različico posodobljenega virtualnega DOM-a in ugotovi, kaj je bilo spremenjeno v DOM-u, na primer, katere komponente bodo spremenjene.

Čeprav se morda zdi neučinkovito, stroškov ni več, saj posodabljanje virtualnega DOM-a ne vzame veliko časa.

Če primerjamo trenutno virtualno drevo DOM s prejšnjim, je znano kot 'kljubovanje'. Ko React izve, kaj se je spremenilo, posodobi objekte v dejanskem DOM-u. React uporablja paketne posodobitve za posodobitev dejanskega DOM-a. Spremembe dejanskega DOM se pošiljajo v paketih, namesto da bi pošiljale kakršne koli posodobitve za posamezno spremembo stanja komponente.

Ponovno upodabljanje uporabniškega vmesnika je najdražji del in Reactu uspe najbolj učinkovito z zagotavljanjem Real DOM, ki prejme paketne posodobitve za ponovno upodabljanje uporabniškega vmesnika. Pokliče se postopek pretvorbe sprememb v dejanski DOM sprava.

Izboljša zmogljivost in je glavni razlog, da razvijalci obožujejo React in njegov Virtual DOM.

Kaj je Reactov virtualni DOM?

Koncept Virtual DOM poskrbi za boljše in hitrejše delovanje Real DOM-a. Virtualni DOM je virtualni simbol DOM-a.

Toda glavna razlika je v tem, da se vsakič, z vsako spremembo, posodobi virtualni DOM namesto dejanskega DOM-a.

Na primer, resnično in virtualni DOM je predstavljen kot a drevesna struktura. Vsak element v drevesu je vozlišče. A vozlišče se doda v drevo, ko je v uporabniški vmesnik aplikacije dodan nov element.

Če se položaj katerega koli elementa spremeni, a novo ustvarjeno je virtualno drevo DOM. Virtualni DOM izračuna najmanjše število operacij na pravem DOM-u, da spremenite pravi DOM. Je učinkovit in deluje bolje, saj zmanjša stroške in operacijo ponovnega upodabljanja celotnega pravega DOM-a.

Zdaj normalno razumemo Real in Virtual DOM.

Poglejmo, kako Reagiraj deluje z uporabo Virtualni DOM.

• Vsak uporabniški vmesnik je posameznik komponenta, in vsaka komponenta ima svoje stanje.
• Sledi reakcija opazne vzorce in opazuje spremembe stanj.
• Kadar koli se spremeni stanje komponente, React posodobi virtualno drevo DOM vendar ne spremeni dejansko drevo DOM.
• Reagiraj primerja the trenutna verzija od virtualni DOM z prejšnja različica po posodabljanje.
• React ve, kateri predmeti so spremenjeni v virtualni DOM. Nadomešča predmete v dejanski DOM , Vodi k minimalna manipulacija operacije.
• Ta postopek je znan kot 'diferenciacija'. Ta slika bo pojasnila koncept.

Na sliki je temno modra krogih so vozlišča ki so bili spremenjeni. The država teh komponent se je spremenilo. React izračuna razliko med prejšnjo in trenutno različico virtualno drevo DOM, in celotno nadrejeno poddrevo je ponovno upodobljeno, da prikaže uporabniški vmesnik, ki je spremenjen.

Posodobljeno drevo je serija posodobljena (da se posodobitve pravega DOM pošiljajo v paketih, namesto da bi pošiljale posodobitve za vsako spremembo stanja.) v pravi DOM.

Da bi se poglobili v to, moramo vedeti o React render () funkcijo.

Potem moramo vedeti nekaj pomembnih Lastnosti družbe React.

JSX

JSX pomeni JavaScript XML. Je razširitev sintakse od JS. Z uporabo JSX lahko pišemo HTML strukture v datoteki, ki vsebuje JavaScript koda.

Komponente

Komponente so neodvisen in za večkratno uporabo kode. Vsak uporabniški vmesnik v aplikaciji React je komponenta. Ena sama aplikacija ima veliko komponente.

Komponente so dveh vrst, komponente razreda in funkcionalne komponente.

Komponente razreda so s stanjem, ker uporabljajo svoje 'stanje' za spreminjanje uporabniškega vmesnika. Funkcionalne komponente so komponente brez stanja. Delujejo kot funkcija JavaScript, ki sprejme poljuben parameter, imenovan 'props'.

React Hooks so bili uvedeni za dostop do stanj s funkcionalnimi komponentami.

Metode življenjskega cikla

Metode življenjskega cikla so pomembne metode vgrajeni reagirati, ki delujejo na komponente skozi njihovo trajanje v DOM. Vsaka komponenta Reacta je šla skozi življenjski cikel dogodkov.

Metoda render() je uporabljena največ metoda življenjskega cikla .

To je edina metoda znotraj Komponente razreda React . Torej se v vsakem razredu pokliče komponenta render().

Metoda render (). obravnava upodabljanje komponente prek uporabniškega vmesnika. Render () vsebuje vso logiko, prikazano na zaslonu. Lahko ima tudi a nič vrednost, če ne želimo pokazati ničesar na zaslonu.

Primer je prikazan spodaj:

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

Primer bo pokazal, JSX zapisano v render().

Ko a država oz prop je posodobljen znotraj komponente, render() bo vrnil drugo drevo elementov React.

Pri pisanju kode v konzolo ali datoteko JavaScript se bo zgodilo to:

• Brskalnik razčleni HTML, da najde vozlišče z ID-jem.
• Odstrani podrejeni element elementa.
• Posodablja element (DOM) z 'posodobljena vrednost'.
• Preračunava CSS za nadrejena in podrejena vozlišča.
• Nato posodobite postavitev.

Na koncu prečkajte drevo na zaslonu.

Kot vemo, je posodabljanje DOM vključuje spreminjanje vsebine. Nanj je bolj navezano.

Pri preračunavanju CSS in spreminjanju postavitev sodelujejo zapleteni algoritmi, ki vplivajo na zmogljivost.

React ima torej veliko načinov za obravnavo, saj uporablja nekaj, kar je znano kot virtualni DOM.

reactdome

Paket react-dom ponuja metode, specifične za DOM, na najvišji ravni aplikacije za izhod iz modela React, če je to potrebno.

 import * as ReactDOM from 'react-dom'; 

Če uporabljate ES5 z npm, morate napisati tudi:

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

The reagirati-dom paket ponuja tudi module, specifične za odjemalske in strežniške aplikacije:

• react-dom/klient
• reagirati-dom/strežnik

Paket react-dom izvozi te metode:

• createPortal()
• flushSync()

Izvožene so tudi metode React-dom:

• upodabljati ()
• hidrat ()
• najdiDOMNode()
• unmountComponentAtNode ()

Opomba: hidratacija in upodabljanje sta bila nadomeščena z novejšimi metodami odjemalca.

Podpora za brskalnik

React podpira vse sodobne brskalnike, za starejše različice pa so potrebni nekateri polifilli.

razvrščanje java arraylist

Opomba: ne moremo podpreti starejših brskalnikov, ki ne podpirajo metod ES5, kot je Internet Explorer. Ugotovite lahko, da aplikacije delujejo v najnovejših brskalnikih, če so polifili, kot sta es5-shim in es5-sham, ki so vključeni na stran, vendar ste sami, če uberete pot.

Referenca

createPortal()

Ustvari portal () Portal ponuja način za branje podrejenih elementov v vozlišče DOM, ki obstaja zunaj razvrstitve komponente DOM.

flushSync()

Prisili React posodobitve v posredovanem povratnem klicu hkrati. Zagotavlja, da se DOM takoj posodobi.

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

Opomba:

• Uporabljajte zmerno. Flush Sync je bistveno zmanjšal zmogljivost.
• FlushSync bo prisilil čakajoče meje, da prikažejo nadomestno stanje.
• Zažene čakajoče učinke in hkrati uporabi posodobitve, preden jih vrne.
• flushSync splakuje posodobitve zunaj povratnega klica, da izprazni posodobitve povratnega klica. na primer če obstajajo čakajoče posodobitve iz klika, jih lahko React izprazni, preden izprazni posodobitve pri povratnem klicu.

Legacy Reference

render()

 render(element, container[, callback]) 

Opomba: upodabljanje je nadomeščeno z ustvarjanjem korena v Reactu. Upodobite element React v DOM v priloženem vsebniku in povrnite sklic na komponento.

Če bi bil element React predhodno upodobljen v katerem koli vsebniku, bi ga posodobil, zato je treba odražati najnovejši element React.

Izvede se, ko je komponenta upodobljena, če je na voljo izbirni povratni klic.

Opomba:

Metoda Render () nadzira vsebino vozlišča vsebnika, ko gre mimo. Vsak obstoječi element DOM je zamenjan.

Render () ne spremeni vozlišča vsebnika (spremeni lahko le podrejene vsebnike). Mogoče je mogoče vstaviti komponento v obstoječe vozlišče DOM, ne da bi prepisali podrejene elemente.

Render () trenutno nazaj sklicuje na korenski primerek ReactComponent.

Vendar je njegova vrnjena vrednost podedovana in se ji je mogoče izogniti, saj lahko v nekaterih primerih prihodnje različice Reacta komponente ustvarijo asinhrono.

Če potrebujete sklic na prototip ReactComponent, je najboljša rešitev, da elementu pripnete sklic na odpoklic.

Render () se uporablja za hidratacijo upodobljenega vsebnika v strežnik, je zastarel. Uporaba hydrateRoot() namesto tega.

hidrat ()

hidrat nadomestimo s hidratno korenino.

Je natanko tako kot render(), vendar se uporablja za vsebnik, katerega vsebino HTML upodobi ReactDOMServer. React bo poskušal poslušalce dogodkov povezati s trenutno oznako.

 hydrate(element, container[, callback]) 

Opomba:

React pričakuje, da bo upodobljena vsebina med strežnikom in odjemalcem enaka. Vsebino besedila lahko popravimo, vendar moramo nedoslednosti obravnavati kot napake in jih popraviti. V razvojnem načinu React opozori na nedoslednost med hidracijo.

Nobenega zagotovila ni, da se določene razlike popravijo za neskladja.

V večini aplikacij je pomemben zaradi zmogljivosti in predrago bo preverjanje vseh zastavic.

Recimo, da se atribut ali besedilna vsebina elementa neizogibno razlikuje med strežnikom in odjemalcem (npr. časovni žig ). V tem primeru lahko utišamo opozorilo z dodajanjem suppressHydrationWarning = {true} do elementa.

Če ni element besedila, ga ne more poskusiti popraviti, tako da lahko ostane nedosleden do prihodnjih posodobitev.

Izvedete lahko upodabljanje z dvema prehodoma, če moramo namerno zagotoviti različno na strežniku in odjemalcu. Komponente, ki ostanejo na odjemalcu, lahko berejo spremenljivke stanja, kot je this.state.isClient, kjer bo v komponentaDidMount().

prenesite youtube videe vlc

Začetni prehod upodabljanja bo deloval enako kot strežnik, pri čemer se bo izognil nedoslednostim, vendar bo dodatni prehod izveden sinhrono po hidraciji.

Opomba: zaradi tega pristopa bodo komponente počasnejše, saj to storijo dvakrat, zato ga uporabljajte previdno.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Opomba:

unmountComponentAtNode je bil nadomeščen z root.unmount() v Reactu. Izbriše nameščeno komponento React iz DOM-a in očisti njene obdelovalce dogodkov in stanje.

Če na vsebnik ni bila nameščena nobena komponenta, ne more narediti ničesar. Vrne true, če nobena komponenta ni nameščena, in false, če ni komponente za odpenjanje.

najdiDOMNode()

Opomba: findDOMNode je ubežna loputa, ki se uporablja za dostop do osnovnega vozlišča DOM. Ta zasilna loputa je v večini primerov odsvetovana, ker prebije abstrakcijo komponente. V StrictMode je bil opuščen.

findDOMNode(komponenta)

Če je bila ta komponenta nameščena v DOM, to vrne ustrezen izvorni element DOM brskalnika. Ta metoda je uporabna za branje vrednosti iz DOM, kot so vrednosti polj obrazca, in izvajanje meritev DOM. V večini primerov lahko vozlišču DOM pripnete sklic in se izognete uporabi findDOMNode.

Ko komponenta vrne vrednost null ali false, vrne findDOMNode vrednost null. Ko je komponenta upodobljena v niz, findDOMNode vrne besedilno vozlišče DOM, ki vsebuje to vrednost. Komponenta lahko vrne fragment z več podrejenimi elementi, če je findDOMNode vrnil vozlišče DOM, ki ustreza prvemu nepraznemu podrejenemu elementu.

Opomba:

findDOMNode deluje samo na nameščenih komponentah (to je komponentah, ki so bile nameščene v DOM). Če poskusite to poklicati na komponenti, ki še ni bila nameščena (kot je klic findDOMNode() na render() na komponenti, ki še ni bila ustvarjena), bo vržena izjema.

findDOMNode ni mogoče uporabiti v funkcijskih komponentah.

elementi DOM

React implementira od brskalnika neodvisen sistem DOM za zmogljivost in združljivost med brskalniki. To priložnost izkoriščamo, da odpravimo nekaj grobih robov v implementaciji DOM v brskalniku.

slovar c#

V Reactu morajo biti vse lastnosti in atributi DOM (vključno z obdelovalci dogodkov) camelcase. Na primer, atribut HTML tabindex ustreza atributu tab Index v Reactu.

Izjema sta atributa aria-* in data-*, ki morata biti z malimi črkami. Na primer, lahko imate območno oznako kot območno oznako.

Razlike v atributih

Več atributov bo delovalo drugače med React in HTML:

preverjeno

Atribut checked podpirajo komponente potrditvenega polja ali radia tipa . Uporaben je za proizvodnjo nadzorovanih komponent. S tem lahko ugotovite, ali je komponenta preverjena ali ne.

DefaultChecked je nepreverjeni dvojnik, ki določa, da je komponenta preverjena ob prvi namestitvi.

className

Če želite določiti razred CSS, uporabite atribut className. Velja za vse običajne elemente DOM in SVG, kot so, itd.

Če uporabljate React s spletnimi komponentami (občasno), namesto tega uporabite atribut razreda.

opasnoNastaviInnerHTML

Dangerously SetInnerHTML je Reactova zamenjava za uporabo innerHTML v brskalniku DOM. Konfiguriranje kode HTML je tvegano, ker je uporabnike enostavno izpostaviti napadu XSS (cross-site scripting).

Tako lahko nastavimo HTML neposredno iz Reacta, vendar morate nevarno vnesti SetInnerHTML in posredovati predmet s ključem __html, da si zapomnite, da je nevaren.

Na primer:

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

Elementi React namesto tega uporabljajo htmlFor, ker je for rezervirana beseda v JavaScriptu.

onChange

Dogodek onChange se obnaša po pričakovanjih; dogodek se sproži vsakič, ko se spremeni polje obrazca.

Namenoma ne uporabljamo obstoječega vedenja brskalnika, ker je sprememba velika zaradi svojega vedenja in se React zanaša na dogodek za obravnavo uporabniškega vnosa v realnem času.

izbrano

Če želite označiti kot izbrano, se namesto tega sklicujte na vrednost te možnosti v vrednosti . Za podrobna navodila glejte 'Izberi oznako'.

Opomba:

V največ primerih se imena razredov nanašajo na razrede, definirane v zunanji datoteki slogov CSS. Slogi se uporabljajo v aplikacijah React za dodajanje izračunanih slogov v času upodabljanja. Atribut style sprejme objekt JavaScript s kamelimi lastnostmi namesto niza CSS.

Skladno je V slogu DOM lastnosti JavaScript, je učinkovitejši in se izogiba XSS varnostne luknje.

Na primer:

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

Upoštevajte, da: slogi nimajo samodejne predpone. Za podporo starejših brskalnikov moramo zagotoviti slogovne lastnosti:

 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či sloga so kamelji, da ustrezajo dostopu do lastnosti na vozliščih DOM znotraj JS. Predpone ponudnika MS se začnejo z veliko začetnico.

React bo samodejno dodal pripono 'px' nekaterim lastnostim sloga številk v vrstici. Če želimo uporabiti druge enote kot 'px', podamo vrednost kot niz z želeno enoto.

na primer:

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

Vendar se vse lastnosti sloga ne pretvorijo v nize slikovnih pik.

Izključite opozorilo o vsebini, ki jo je mogoče urejati

Obstaja opozorilo, če je element za otroke označen kot vsebino, ki jo je mogoče urejati, saj ne bo deloval. Atribut zavrne opozorilo.

Opozorilo o zatiranju

Če uporabljamo upodabljanje React na strani strežnika, je to opozorilo, ko strežnik in odjemalec upodabljata različno vsebino. Vendar pa je v redkih primerih težko zagotoviti natančno ujemanje. Na primer, pričakuje se, da se časovni žigi razlikujejo na strežniku ali odjemalcu.

Če opozorilo o zatiranju nastavite na true, ne bo opozorilo na neujemanja med atributi in vsebino elementa.

Deloval je le na eni globini in je bil namenjen uporabi kot pobeg.

vrednost

Atribut vrednosti je zasnovan s komponentami , in . Uporabite ga lahko za nastavitev vrednosti komponente.

Uporaben je za proizvodnjo nadzorovanih komponent. defaultValue in enako neoznačeno nastavi vrednost komponente, ko je nameščena serijsko.

Vsi podprti atributi HTML

Podprti so vsi prilagojeni in standardni atributi DOM.

React je v DOM zagotovil API, osredotočen na JavaScript. Komponente React pogosto vsebujejo rekvizite po meri in DOM, nato pa React uporablja enake konvencije CamelCase kot DOM API:

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