Oikea/selaimen DOM:

DOM tarkoittaa 'Dokumenttiobjektimalli'. Se on HTML-koodin jäsennelty esitys verkkosivulla tai sovelluksessa. Se edustaa koko käyttöliittymää (Käyttöliittymä) -lta verkkosovellus puutietorakenteena.

Se on a HTML-elementtien rakenteellinen esitys web-sovelluksesta yksinkertaisin sanoin.

Aina kun siinä tapahtuu muutoksia sovelluksen käyttöliittymän tila, DOM on päivitetty ja edustaa muutosta. DOM renderöidään ja sitä käsitellään jokaisen sovelluksen käyttöliittymän päivityksen yhteydessä, mikä vaikuttaa suorituskykyyn ja hidastaa sitä.

Siksi monet käyttöliittymäkomponentit ja monimutkainen rakenne DOM, Se päivittyy kalliimmaksi, koska se on renderöitävä uudelleen jokaisen muutoksen yhteydessä.

DOM muodostetaan puutietorakenteena. Se koostuu kunkin solmun UI-elementti Web-asiakirjassa.

all caps komento excel

DOM:n päivitys:

Jos tiedämme JavaScriptistä, saatat nähdä ihmisten käyttävän 'getElementById()' tai 'getElementByClass()' tapa muuttaa DOM:n sisältöä.

Aina kun sovelluksesi tilassa tapahtuu muutoksia, DOM päivitetään vastaamaan käyttöliittymän muutosta.

Kuinka Virtual DOM nopeuttaa asioita:

Kun sovellukseen lisätään uusia asioita, luodaan virtuaalinen DOM, joka esitetään puuna. Jokainen sovelluksen elementti on puun solmu.

Siksi aina kun elementin sijainti muuttuu, luodaan uusi virtuaalinen DOM. Uudempaa virtuaalista DOM-puuta verrataan uusimpaan, jossa muutokset on merkitty.

Se löytää mahdollisen tavan tehdä nämä muutokset todellisen DOM:n avulla. Sitten päivitetyt elementit hahmonnettaisiin uudelleen sivulla.

Kuinka virtuaalinen DOM auttaa reagoimaan:

Kaikki Reactissa havaitaan komponenttina, toiminnallisena komponenttina ja luokkakomponenttina. Komponentilla on tila. Aina kun muutamme jotain JSX-tiedostossa, yksinkertaisesti sanottuna, aina kun komponentin tilaa muutetaan, react päivittää virtuaalisen DOM-puunsa.

React ylläpitää kahta virtuaalista DOM:ia joka kerta. Ensimmäinen sisältää päivitetyn virtuaalisen DOM:n ja toinen on esipäivitetty versio päivitetystä virtuaalisesta DOM:sta. Se vertaa päivitetyn virtuaalisen DOM:n esipäivitettyä versiota ja löytää mitä DOM:ssa on muutettu, kuten mitä komponentteja muutetaan.

Vaikka se saattaa tuntua tehottomalta, kustannukset eivät ole enää, koska virtuaalisen DOM:n päivittäminen ei voi viedä paljon aikaa.

Verrattaessa nykyistä virtuaalista DOM-puuta edelliseen tunnetaan nimellä 'uhmaa'. Kun React tietää, mikä on muuttunut, se päivittää todellisen DOM:n objektit. React käyttää eräpäivityksiä todellisen DOM:n päivittämiseen. Varsinaiseen DOM:iin tehdyt muutokset lähetetään erissä sen sijaan, että lähetettäisiin päivityksiä yksittäisestä muutoksesta komponentin tilaan.

Käyttöliittymän uudelleenrenderöiminen on kallein osa, ja React onnistuu tekemään sen tehokkaimmin varmistamalla Real DOM:n, joka vastaanottaa eräpäivitykset käyttöliittymän uudelleenrenderöimiseksi. Muutosten muuntamista todelliseksi DOM:ksi kutsutaan sovinnon.

Se parantaa suorituskykyä ja on tärkein syy siihen, miksi kehittäjät rakastavat reagoida ja sen virtuaalinen DOM.

Mikä on Reactin virtuaalinen DOM?

Virtual DOM:n konsepti tekee Real DOM:n suorituskyvystä paremman ja nopeamman. Virtual DOM on DOM:n virtuaalinen symboli.

Mutta tärkein ero on, että joka kerta, jokaisen muutoksen yhteydessä, virtuaalinen DOM päivitetään todellisen DOM: n sijaan.

Esimerkiksi, todellinen ja virtuaalinen DOM on edustettuna a puun rakenne. Jokainen puun elementti on solmu. A solmu lisätään puuhun, kun sovelluksen käyttöliittymään lisätään uusi kohde.

Jos jonkin elementin sijainti muuttuu, a Uusi virtuaalinen DOM-puu luodaan. Virtuaalinen DOM laskee toimintojen vähimmäismäärän todelliseen DOM:iin tehdäksesi muutoksia todelliseen DOM:iin. Se on tehokas ja toimii paremmin vähentämällä koko todellisen DOM:n uudelleenrenderöinnin kustannuksia ja toimintaa.

Nyt meillä on normaali käsitys todellisesta ja virtuaalisesta DOM:sta.

Katsotaanpa kuinka Reagoi toimii käyttämällä Virtuaalinen DOM.

• Jokainen käyttöliittymä on yksilö komponentti, ja jokaisella komponentilla on tilansa.
• Reaktio seuraa havaittavissa olevia kuvioita ja tarkkailee tilojen muutoksia.
• Aina kun komponentin tilaan tehdään muutoksia, React päivittää virtuaalisen DOM-puun mutta ei muuta todellinen DOM-puu.
• Reagoi vertaa the nykyinen versio -lta virtuaalinen DOM kanssa aiempi versio jälkeen päivittäminen.
• React tietää, mitkä kohteet muuttuvat virtuaalinen DOM. Se korvaa kohteet todellinen DOM , johtavat minimaalinen manipulointi toiminnot.
• Tämä prosessi tunnetaan nimellä 'erilaistuminen'. Tämä kuva selventää konseptia.

Kuvassa, tummansininen ympyrät ovat solmut jotka on muutettu. The osavaltio näistä komponenteista on muuttunut. React laskee eron edellisen ja nykyisen version välillä virtuaalinen DOM-puu, ja koko ylätason alipuu hahmonnetaan uudelleen näyttämään muuttuneen käyttöliittymän.

Päivitetty puu on erä päivitetty (että päivitykset todelliseen DOM:iin lähetetään erissä sen sijaan, että lähetettäisiin päivityksiä jokaisesta tilamuutoksesta.) todelliseen DOM:iin.

Päästäksemme syvemmälle tähän, meidän on tiedettävä Reagoi renderöinti () toiminto.

Sitten meidän on tiedettävä joistakin tärkeistä ominaisuudet Reactista.

JSX

JSX tarkoittaa JavaScript XML. Se on a syntaksilaajennus JS. JSX:n avulla voimme kirjoittaa HTML rakenteet tiedostossa, joka sisältää JavaScript-koodi.

Komponentit

Komponentit ovat riippumaton ja uudelleen käytettävä koodista. Jokainen React-sovelluksen käyttöliittymä on komponentti. Yhdellä sovelluksella on useita komponentit.

Komponentteja on kahta tyyppiä, luokan komponentteja ja toiminnalliset komponentit.

Luokkakomponentit ovat tilallisia, koska ne käyttävät 'tilaansa' käyttöliittymän muuttamiseen. Toiminnalliset komponentit ovat tilattomia komponentteja. Ne toimivat kuin JavaScript-funktio, joka ottaa mielivaltaisen parametrin nimeltä 'props'.

Reagoi koukut on otettu käyttöön pääsytiloihin, joissa on toiminnallisia komponentteja.

Elinkaarimenetelmät

Elinkaarimenetelmät ovat tärkeitä menetelmiä sisäänrakennettu reagoimaan, jotka toimivat komponenteilla DOM:n keston ajan. Jokainen Reactin komponentti kulki tapahtumien elinkaaren ajan.

Render()-menetelmä on suurin käytetty elinkaarimenetelmä .

Se on ainoa menetelmä sisällä Reagoi luokan komponentteihin . Joten jokaisessa luokassa kutsutaan komponenttia render().

Render () -menetelmä käsittelee komponentin renderöinnin käyttöliittymässä. Renderöinti () sisältää kaiken näytöllä näkyvän logiikan. Siinä voi myös olla a tyhjä arvoa, jos emme halua näyttää mitään näytöllä.

Esimerkki on esitetty alla:

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

Esimerkki näyttää JSX kirjoitettu renderissä().

Kun osavaltio tai prop päivitetään komponentissa, render() palauttaa erilaisen React-elementtien puun.

Kun kirjoitat koodia konsoliin tai JavaScript-tiedostoon, tapahtuu näin:

• Selain jäsentää HTML-koodin löytääkseen tunnuksen sisältävän solmun.
• Se poistaa elementin lapsielementin.
• Se päivittää elementin (DOM) kanssa 'päivitetty arvo'.
• Se laskee uudelleen CSS vanhemmille ja lapsisolmuille.
• Päivitä sitten asettelu.

Kulje lopuksi puun poikki näytöllä.

Joten kuten tiedämme, että päivittäminen DOM sisältää sisällön muuttamisen. Se on enemmän kiinni siihen.

Monimutkaiset algoritmit ovat mukana CSS:n uudelleenlaskennassa ja asettelujen muuttamisessa, mikä vaikuttaa suorituskykyyn.

Joten Reactilla on monia tapoja käsitellä sitä, koska se käyttää jotain, joka tunnetaan nimellä virtuaalinen DOM.

reactdome

React-dom-paketti tarjoaa DOM-kohtaisia ​​menetelmiä sovelluksen ylimmällä tasolla, jotta voidaan tarvittaessa välttää React-mallista.

 import * as ReactDOM from 'react-dom'; 

Jos käytät ES5:tä npm:n kanssa, kirjoita myös:

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

The reagoida paketti sisältää myös asiakas- ja palvelinsovelluksille erityisiä moduuleja:

java matematiikka satunnainen

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

Näiden menetelmien react-dom-pakettien vienti:

• luo portaali()
• flushSync()

React-dom -menetelmät viedään myös:

• renderöi ()
• hydraatti ()
• findDOMNode()
• unmountComponentAtNode ()

Huomautus: Sekä hydratointi että renderöinti on korvattu uudemmilla asiakasmenetelmillä.

Selaimen tuki

React tukee kaikkia nykyaikaisia ​​selaimia, ja vanhemmissa versioissa vaaditaan joitakin monitäytteitä.

Huomautus: Emme voi tukea vanhempia selaimia, jotka eivät tue ES5-menetelmiä, kuten Internet Exploreria. Voit huomata, että sovellukset toimivat uusimmissa selaimissa, jos monitäytteitä, kuten sivulla olevat es5-shim ja es5-sham, mutta olet yksin, jos valitset polun.

Viite

luo portaali()

Luo portaalin () Portaali tarjoaa tavan lukea lapsia DOM-solmuun, joka on DOM-komponentin sijoituksen ulkopuolella.

flushSync()

Pakota reagoimaan päivitykset toimitetussa takaisinkutsussa samanaikaisesti. Se varmistaa, että DOM päivitetään välittömästi.

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

Huomautus:

• Käytä säästeliäästi. Flush Sync heikensi suorituskykyä merkittävästi.
• FlushSync pakottaa odottavat rajat näyttämään varatilan.
• Se suorittaa odottavia tehosteita ja käyttää samanaikaisesti päivitykset ennen sen palauttamista.
• flushSync huuhtele päivitykset takaisinsoiton ulkopuolella huuhdellaksesi päivitykset takaisinsoittoon. Esimerkiksi, Jos napsautuksesta on odotettavissa päivityksiä, React voi tyhjentää sen ennen kuin päivitykset huuhdellaan takaisinsoitossa.

Legacy Reference

render()

 render(element, container[, callback]) 

Huomautus: Renderöinti korvataan luomalla Root Reactissa. Renderöi React-elementti DOM:iin mukana toimitetussa säiliössä ja maksa viittaus komponenttiin.

Jos React-elementti on aiemmin renderöity johonkin säilöön, se suorittaisi päivityksen, ja sen on heijastettava viimeisintä React-elementtiä.

Se suoritetaan, kun komponentti renderöidään, jos valinnainen takaisinkutsu tarjotaan.

Huomautus:

Render () -menetelmä ohjaa säiliösolmun sisältöä sen ohittaessa. Kaikki olemassa olevat DOM-elementit korvataan.

Renderöinti () ei muuta säilön solmua (se voi muokata vain säilön lapsia). Saattaa olla mahdollista lisätä komponentti olemassa olevaan DOM-solmuun ylikirjoittamatta alielementtejä.

Renderöi () tällä hetkellä takaisin viittauksen ReactComponentin juuriinstanssiin.

Sen palautusarvo on kuitenkin peritty, ja se voidaan välttää, koska joissain tapauksissa Reactin tulevat versiot voivat tuottaa komponentteja asynkronisesti.

Jos tarvitset viittauksen ReactComponent-prototyyppiin, paras ratkaisu on liittää elementtiin palautusviite.

Renderöintiä () käytetään renderoidun kontin hydratointiin palvelimelle on vanhentunut. Käyttää hydrateRoot() sen tilalle.

objektiivinen java

hydraatti()

hydraatti korvataan hydraatilla Root.

Se on täsmälleen sama kuin render(), mutta sitä käytetään säilöön, jonka HTML-sisällön hahmontaa ReactDOMServer. React yrittää yhdistää tapahtumaseuraajat nykyiseen merkintään.

 hydrate(element, container[, callback]) 

Huomautus:

React odottaa renderoidun sisällön olevan identtistä palvelimen ja asiakkaan välillä. Voimme korjata tekstin sisällön, mutta meidän on käsiteltävä epäjohdonmukaisuuksia virheinä ja korjattava ne. Kehitystilassa React varoittaa epäjohdonmukaisuudesta kosteutuksen aikana.

Ei ole varmuutta siitä, että erityiset erot korjataan poikkeamien vuoksi.

Se on tärkeää suorituskykysyistä useimmissa sovelluksissa, ja kaikkien lippujen vahvistaminen on liian kallista.

Oletetaan, että elementin attribuutti tai tekstisisältö eroaa väistämättä palvelimen ja asiakkaan välillä (esim. aikaleima ). Tässä tapauksessa voimme hiljentää hälytyksen lisäämällä suppressHydrationWarning = {tosi} elementtiin.

Jos se ei ole tekstielementti, se ei voi yrittää korjata sitä niin, että se saattaa pysyä epäjohdonmukaisena tuleviin päivityksiin saakka.

Voit suorittaa kaksivaiheisen renderöinnin, jos meidän on tarkoituksella tarjota eri palvelimelle ja asiakkaalle. Asiakkaalle jääneet komponentit voivat lukea tilamuuttujia, kuten this.state.isClient, jossa se asetetaan arvoon tosi komponentDidMount().

Alkuperäinen renderöinti suoritetaan samoin kuin palvelin, välttäen epäjohdonmukaisuudet, mutta lisäpassi suoritetaan synkronisesti hydratoinnin jälkeen.

Huomautus: Tämä lähestymistapa hidastaa komponentteja, koska ne tekevät sen kahdesti, joten käytä sitä huolellisesti.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Huomautus:

irrotaComponentAtNode on korvattu root.unmount() Reactissa. Se poistaa asennetun React-komponentin DOM:sta ja puhdistaa sen tapahtumakäsittelijät ja tilan.

Jos mitään komponenttia ei ole asennettu säiliöön, se ei voi tehdä mitään. Palauttaa tosi, jos mitään komponenttia ei ole liitetty, ja epätosi, jos irrotettavaa komponenttia ei ole.

findDOMNode()

Huomautus: findDOMNode on suojaluukku, jota käytetään alla olevan DOM-solmun käyttämiseen. Tätä hätäluukkua ei suositella useimmissa tapauksissa, koska se lävistää komponentin abstraktion. Se on poistettu käytöstä StrictModessa.

findDOMNode(komponentti)

Jos tämä komponentti on liitetty DOM:iin, tämä palauttaa vastaavan alkuperäisen selaimen DOM-elementin. Tämä menetelmä on hyödyllinen DOM-arvojen, kuten lomakekenttien arvojen, lukemiseen ja DOM-mittausten suorittamiseen. Useimmissa tapauksissa voit liittää viittauksen DOM-solmuun ja välttää findDOMNoden käyttöä.

Kun komponentti palauttaa nollan tai epätosi, findDOMNode palauttaa nollan. Kun komponentti renderöidään merkkijonoksi, findDOMNode palauttaa teksti-DOM-solmun, joka sisältää kyseisen arvon. Komponentti voi palauttaa fragmentin, jossa on useita lapsia, jos findDOMNode on palauttanut ensimmäistä ei-tyhjää lapsia vastaavan DOM-solmun.

Huomautus:

findDOMNode toimii vain asennetuissa komponenteissa (eli komponenteissa, jotka on sijoitettu DOM:iin). Jos yrität kutsua tätä komponentille, jota ei ole vielä asennettu (kuten kutsut findDOMNode() on render() komponentille, jota ei ole vielä luotu, poikkeus heitetään.

findDOMNodea ei voi käyttää funktiokomponenteissa.

DOM-elementtejä

React toteuttaa selaimesta riippumattoman DOM-järjestelmän suorituskyvyn ja selainyhteensopivuuden takaamiseksi. Käytämme tilaisuutta hyväksemme siivotaksemme joitain selaimen DOM-toteutuksen epätasaisuuksia.

Reactissa kaikkien DOM-ominaisuuksien ja attribuuttien (mukaan lukien tapahtumakäsittelijät) on oltava camelcase. Esimerkiksi HTML-tabindex-attribuutti vastaa React-välilehden Indeksi-attribuuttia.

Poikkeuksena ovat attribuutit aria-* ja data-*, joiden on oltava pieniä kirjaimia. Voit esimerkiksi käyttää aluetunnistetta aluetunnisteena.

Attribuuttien erot

Useat attribuutit toimivat eri tavalla Reactin ja HTML:n välillä:

tarkistettu

Valittua attribuuttia tukevat valintaruudun tai radiotyypin komponentit. Se on hyödyllinen ohjattujen komponenttien valmistuksessa. Tämän avulla voit määrittää, onko komponentti tarkistettu vai ei.

DefaultChecked on valitsematon vastine, joka määrittää, että komponentti tarkistetaan, kun se asennetaan ensimmäisen kerran.

luokan nimi

Määritä CSS-luokka käyttämällä className-attribuuttia. Se koskee kaikkia tavallisia DOM- ja SVG-elementtejä, kuten , , jne.

Jos käytät React with Web Components -toimintoa (harvinainen), käytä sen sijaan class-attribuuttia.

vaarallisestiSetInnerHTML

Dangerously SetInnerHTML on Reactin korvaava innerHTML:n käyttö DOM-selaimessa. HTML-koodin määrittäminen on riskialtista, koska se on helppo altistaa käyttäjät cross-site scripting (XSS) -hyökkäykselle.

Voimme siis asettaa HTML:n suoraan Reactista, mutta sinun on kirjoitettava vaarallisesti SetInnerHTML ja välitettävä objekti __html-avaimella muistaaksesi, että se on vaarallinen.

Esimerkiksi:

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

React-elementit käyttävät sen sijaan sanaa htmlFor. Koska for on varattu sana JavaScriptissä.

onChange

onChange-tapahtuma toimii odotetulla tavalla; tapahtuma käynnistyy aina, kun lomakekenttää muutetaan.

Emme tarkoituksella käytä nykyistä selaimen käyttäytymistä, koska muutos on sen käyttäytymisen kannalta suuri ja React luottaa tapahtumaan käsitelläkseen käyttäjän syötteitä reaaliajassa.

valittu

Jos haluat merkitä valituksi, katso sen sijaan sen vaihtoehdon arvoa arvossa. Katso tarkemmat ohjeet kohdasta 'Valitse tunniste'.

Huomautus:

Maksimitapauksissa luokan nimet viittaavat ulkoisessa CSS-tyylisivussa määriteltyihin luokkiin. React-sovelluksissa käytetään tyylejä laskettujen tyylien lisäämiseen renderöintihetkellä. Tyyli-attribuutti hyväksyy JavaScript-objektin kamelin ominaisuuksilla CSS-merkkijonon sijaan.

Se mukautuu DOM-tyyliin JavaScript ominaisuuksia, on tehokkaampi ja välttää XSS turva-aukkoja.

Esimerkiksi:

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

Huomaa, että tyylejä ei ole liitetty automaattisesti. Jotta voimme tukea vanhempia selaimia, meidän on annettava tyyliominaisuudet:

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

Tyyliavaimet vastaavat DOM-solmujen ominaisuuksien käyttöä JS:n sisällä. Palveluntarjoajan etuliitteet MS alkavat isolla kirjaimella.

React lisää automaattisesti 'px'-liitteen joihinkin rivin numerotyylin ominaisuuksiin. Jos haluamme käyttää muita yksiköitä kuin 'px', määritä arvo merkkijonona halutun yksikön kanssa.

esimerkiksi:

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

Kaikkia tyyliominaisuuksia ei kuitenkaan muunneta pikselijonoiksi.

javascript trim alimerkkijono

Estä muokattavan sisällön hälytys

Jos lapsille suunnattu elementti on merkitty muokattavaksi, tulee varoitus, koska se ei toimi. Attribuutti estää varoituksen.

Tukahdutuksen varoitus

Jos käytämme palvelinpuolen React-renderöintiä, se on varoitus, kun palvelin ja asiakas renderöivät eri sisällöllä. Harvoissa tapauksissa on kuitenkin vaikea taata tarkkaa vastaavuutta. Esimerkiksi aikaleimojen odotetaan olevan erilaisia ​​palvelimella tai asiakkaalla.

Jos asetat estovaroituksen arvoon tosi, se ei varoita määritteiden ja elementin sisällön välisistä ristiriitaisuuksista.

Se toimi vain yhden tason syvyydessä ja oli tarkoitettu käytettäväksi pakopaikkana.

arvo

Arvo-attribuutti on , ja -komponenttien suunnittelema. Voit käyttää sitä komponentin arvon asettamiseen.

Se on hyödyllinen ohjattujen komponenttien valmistuksessa. defaultValue ja yhtä kuin valitsematon määrittävät komponentin arvon, kun se on asennettu sarjaan.

Kaikki tuetut HTML-attribuutit

Kaikki mukautetut ja standardi DOM-attribuutit ovat tuettuja.

React on toimittanut JavaScript-keskeisen API:n DOM:iin. Ja React-komponentit sisältävät usein mukautettuja ja DOM-ominaisuuksia, ja sitten React käyttää samoja CamelCase-käytäntöjä kuin DOM-sovellusliittymä:

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