Tikrasis / naršyklės DOM:
DOM reiškia „Dokumento objekto modelis“. Tai struktūrizuotas HTML atvaizdas tinklalapyje arba programoje. Tai atspindi visą vartotojo sąsają (Vartotojo sąsaja) iš žiniatinklio programa kaip medžio duomenų struktūra.
Tai yra HTML elementų struktūrinis atvaizdavimas žiniatinklio programa paprastais žodžiais.
Kai tik pasikeičia programos vartotojo sąsajos būsena, DOM yra atnaujintas ir atspindi pakeitimą. DOM pateikiamas ir manipuliuojamas su kiekvienu programos vartotojo sąsajos atnaujinimo pakeitimu, kuris turi įtakos našumui ir sulėtina jį.
Todėl su daugybe UI komponentų ir sudėtingos struktūros DOM, Jis bus atnaujintas brangiau, nes jį reikės pateikti iš naujo su kiekvienu pakeitimu.
DOM sudaromas kaip medžio duomenų struktūra. Jį sudaro kiekvieno mazgas UI elementas pateikti žiniatinklio dokumente.
alya manasa
DOM atnaujinimas:
Jei žinome šiek tiek apie „JavaScript“, galite matyti, kad žmonės naudojasi „getElementById()“ arba „getElementByClass()“ būdas pakeisti DOM turinį.
Kai pasikeičia jūsų programos būsena, DOM atnaujinamas, kad atspindėtų vartotojo sąsajos pasikeitimą.
Kaip virtualus DOM pagreitina veiklą:
Kai prie programos pridedami nauji dalykai, sukuriamas virtualus DOM, vaizduojamas kaip medis. Kiekvienas programos elementas yra medžio mazgas.
Todėl kiekvieną kartą, kai pasikeičia elemento padėtis, sukuriamas naujas virtualus DOM. Naujesnis virtualus DOM medis lyginamas su naujausiu, kuriame pastebimi pakeitimai.
Jis randa galimą būdą, kaip atlikti šiuos pakeitimus naudojant tikrąjį DOM. Tada atnaujinti elementai bus iš naujo pateikti puslapyje.
Kaip virtualus DOM padeda reaguoti:
Viskas „React“ yra stebima kaip komponentas, funkcinis komponentas ir klasės komponentas. Komponentas turi būseną. Kai ką nors pakeičiame JSX faile, paprasčiau tariant, kai pakeičiama komponento būsena, react atnaujina savo virtualų DOM medį.
„React“ kiekvieną kartą palaiko du virtualius DOM. Pirmajame yra atnaujintas virtualus DOM, o kitas yra iš anksto atnaujinta atnaujinto virtualaus DOM versija. Jis palygina iš anksto atnaujintą atnaujinto virtualaus DOM versiją ir suranda, kas buvo pakeista DOM, pvz., kurie komponentai bus pakeisti.
Nors tai gali atrodyti neefektyvu, išlaidų nebėra, nes virtualaus DOM atnaujinimas negali užtrukti daug laiko.
Lyginant dabartinį virtualų DOM medį su ankstesniu, žinomas kaip 'pasipriešina'. Kai „React“ sužino, kas pasikeitė, ji atnaujina objektus faktiniame DOM. „React“ naudoja paketinius naujinimus, kad atnaujintų tikrąjį DOM. Tikrojo DOM pakeitimai siunčiami paketais, o ne siunčiami naujinimai dėl vieno komponento būsenos pakeitimo.
Pakartotinis vartotojo sąsajos atvaizdavimas yra pati brangiausia dalis, o „React“ sugeba tai padaryti efektyviausiai, užtikrindama, kad „Real DOM“ gauna paketinius naujinimus, kad būtų iš naujo pateikta vartotojo sąsaja. Pakeitimų konvertavimo į tikrąjį DOM procesas vadinamas Susitaikymas.
Tai pagerina našumą ir yra pagrindinė priežastis, kodėl kūrėjai mėgsta reaguoti ir virtualų DOM.
Kas yra „React“ virtualusis DOM?
Virtualaus DOM koncepcija skirta pagerinti ir pagreitinti Real DOM veikimą. Virtualus DOM yra virtualus DOM simbolis.
Tačiau pagrindinis skirtumas yra tas, kad kiekvieną kartą, su kiekvienu pakeitimu, virtualus DOM atnaujinamas, o ne tikrasis DOM.
Pavyzdžiui, tikras ir virtualus DOM yra pavaizduotas kaip a medžio struktūra. Kiekvienas medžio elementas yra mazgas. A mazgas įtraukiamas į medį, kai į programos vartotojo sąsają įtraukiamas naujas elementas.
Jei pasikeičia kokių nors elementų padėtis, a naujas sukuriamas virtualus DOM medis. Virtualus DOM apskaičiuoja minimalų operacijų skaičių tikrame DOM, kad pakeistumėte tikrąjį DOM. Jis yra efektyvus ir veikia geriau, nes sumažina viso tikrojo DOM pakartotinio pateikimo išlaidas ir operaciją.
Dabar mes normaliai suprantame realų ir virtualų DOM.
Pažiūrėkime, kaip Reaguoti veikia naudojant Virtualus DOM.
- Kiekviena vartotojo sąsaja yra individualus komponentas, ir kiekvienas komponentas turi savo būseną.
- Reaguokite toliau stebimus modelius ir stebi būsenų pokyčius.
- Kiekvieną kartą, kai atliekami komponento būsenos pakeitimai, React atnaujina virtualų DOM medį bet nekeičia tikrasis DOM medis.
- Reaguoti lygina į Dabartinė versija iš virtualus DOM su ankstesnė versija po to atnaujinimas.
- „React“ žino, kurie objektai yra pakeisti virtualus DOM. Jis pakeičia objektus tikrasis DOM , vedantis minimali manipuliacija operacijos.
- Šis procesas žinomas kaip „diferencijavimas“. Šis paveikslėlis paaiškins koncepciją.
Nuotraukoje, tamsiai mėlyna apskritimai yra mazgai kurie buvo pakeisti. The valstybė šių komponentų pasikeitė. React apskaičiuoja skirtumą tarp ankstesnės ir dabartinės versijos virtualus DOM medis, ir visas pirminis antrinis medis pateikiamas iš naujo, kad būtų rodoma pakeista vartotojo sąsaja.
Atnaujintas medis yra partija atnaujinta (kad tikrojo DOM atnaujinimai siunčiami paketais, o ne kiekvieno būsenos pakeitimo atnaujinimai.) į tikrąjį DOM.
Norėdami įsigilinti į tai, turime žinoti apie Reakcijos pateikimas () funkcija.
Tada turime žinoti apie kai kuriuos svarbius dalykus funkcijos iš Reaguoti.
JSX
JSX reiškia JavaScript XML. Tai yra sintaksės plėtinys iš JS. Naudodami JSX galime rašyti HTML struktūros faile, kuriame yra JavaScript kodas.
Komponentai
Komponentai yra nepriklausomas ir daugkartinio naudojimo kodo. Kiekviena „React“ programos vartotojo sąsaja yra komponentas. Viena programa turi daug komponentai.
Komponentai yra dviejų tipų, klasės komponentai ir funkciniai komponentai.
java su sūpynėmis
Klasės komponentai yra būsenos, nes naudoja savo „būseną“, kad pakeistų vartotojo sąsają. Funkciniai komponentai yra komponentai be būsenos. Jie veikia kaip „JavaScript“ funkcija, kuri paima savavališką parametrą, vadinamą „props“.
Reaguoti kabliukai buvo pristatytos prieigos būsenoms su funkciniais komponentais.
Gyvenimo ciklo metodai
Gyvenimo ciklo metodai yra svarbūs metodai įmontuotas reaguoti, kurie veikia su komponentais per visą jų trukmę DOM. Kiekvienas „React“ komponentas vyko pagal įvykių gyvavimo ciklą.
Pateikiamas () metodas yra maksimaliai naudojamas gyvavimo ciklo metodas .
Tai vienintelis metodas viduje Reaguoti klasės komponentai . Taigi kiekvienoje klasėje iškviečiamas komponentas render().
Atvaizdavimo () metodas tvarko komponento atvaizdavimą vartotojo sąsajoje. Pateikime () yra visa ekrane rodoma logika. Jame taip pat gali būti a nulinis vertę, jei nenorime nieko rodyti ekrane.
Pavyzdys parodytas žemiau:
class Header extends React.Component{ render(){ return React Introduction } } Pavyzdys parodys JSX parašyta renderyje ().
Kada valstybė arba prop atnaujinamas komponente, pateikti () grąžins kitą React elementų medį.
Rašant kodą konsolėje arba „JavaScript“ faile, atsitiks:
- Naršyklė analizuoja HTML, kad surastų mazgą su ID.
- Jis pašalina antrinį elemento elementą.
- Tai atnaujina elementą (DOM) su „atnaujinta vertė“.
- Perskaičiuoja CSS tėvų ir vaikų mazgams.
- Tada atnaujinkite išdėstymą.
Galiausiai pereikite per medį ekrane.
Taigi, kaip žinome, atnaujinant DOM apima turinio keitimą. Jis labiau prie jo prisirišęs.
Sudėtingi algoritmai dalyvauja perskaičiuojant CSS ir keičiant išdėstymus, kurie turi įtakos našumui.
Taigi, „React“ turi daug būdų, kaip su tuo susidoroti, nes naudoja kažką žinomo kaip virtualus DOM.
reactdome
React-dom pakete pateikiami specifiniai DOM metodai viršutiniame programos lygyje, kad prireikus būtų galima išeiti iš React modelio.
import * as ReactDOM from 'react-dom';
Jei naudojate ES5 su npm, taip pat turėtumėte parašyti:
var ReactDOM = require('react-dom');
The react-dom pakete taip pat yra modulių, skirtų kliento ir serverio programoms:
- react-dom/klientas
- react-dom/server
React-dom paketas eksportuoja šiuos metodus:
- sukurti portalą ()
- flushSync ()
React-dom metodai taip pat eksportuojami:
- pateikti ()
- hidratas ()
- rastiDOMNode()
- unmountComponentAtNode ()
Pastaba: ir hidratas, ir atvaizdavimas buvo pakeisti naujesniais kliento metodais.
Naršyklės palaikymas
„React“ palaiko visas šiuolaikines naršykles, o senesnėms versijoms reikalingi kai kurie užpildymai.
Pastaba: negalime palaikyti senesnių naršyklių, kurios nepalaiko ES5 metodų, pvz., „Internet Explorer“. Galite pastebėti, kad programos veikia naujausiose naršyklėse, jei į puslapį įtraukti polifilai, pvz., es5-shim ir es5-sham, bet jūs esate vieni, jei pasirinksite šį kelią.
Nuoroda
sukurti portalą ()
Sukuria portalą () Portalas suteikia galimybę skaityti vaikus į DOM mazgą, kuris egzistuoja už DOM komponento reitingo ribų.
flushSync ()
Priverstinai reaguoti atnaujinami pateikto atgalinio skambučio metu vienu metu. Tai užtikrina, kad DOM būtų atnaujintas nedelsiant.
// Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. Pastaba:
- Naudokite taupiai. „Flush Sync“ labai pablogino našumą.
- FlushSync privers laukiančias ribas rodyti atsarginę būseną.
- Jis veikia laukiančius efektus ir tuo pačiu metu taiko naujinimus prieš grąžindamas.
- flushSync išplauti naujinimus už atgalinio skambučio ribų, kad naujinimai būtų panaikinti atgalinio skambučio metu. Pavyzdžiui, jei spustelėjus yra laukiančių naujinimų, „React“ gali jį išvalyti prieš išgrynindama atnaujinimus atgalinio skambučio metu.
Palikimo nuoroda
pateikti ()
render(element, container[, callback])
Pastaba: „Render“ pakeičiamas „Root“ kūrimu „React“. Pateiktame konteineryje pateikite „React“ elementą į DOM ir grąžinkite nuorodą į komponentą.
Jei „React“ elementas anksčiau buvo pateiktas bet kuriame konteineryje, jis jį atnaujins ir būtina atspindėti naujausią „React“ elementą.
Jis vykdomas, kai pateikiamas komponentas, jei pateikiamas pasirenkamas atgalinis skambutis.
Pastaba:
Pateikimo () metodas kontroliuoja konteinerio mazgo turinį, kai jis praeina. Pakeičiamas bet koks esamas DOM elementas.
Pateikimas () nekeičia sudėtinio rodinio mazgo (gali keisti tik sudėtinio rodinio antrinius elementus). Gali būti įmanoma įterpti komponentą į esamą DOM mazgą neperrašant antrinių elementų.
Pateikite () šiuo metu nuorodą į pagrindinį ReactComponent egzempliorių.
Tačiau jo grąžinimo vertė yra paveldima ir jos galima išvengti, nes kai kuriais atvejais būsimos „React“ versijos komponentus gali generuoti asinchroniškai.
Jei jums reikia nuorodos į ReactComponent prototipą, geriausias sprendimas yra pridėti atšaukimo nuorodą prie elemento.
Atvaizdavimas () naudojamas hidratuoti pateiktą konteinerį į serverį yra pasenęs. Naudokite hidratasRoot() jo vietoje.
hidratas ()
hidratas pakeičiamas hidratu Root.
Tai lygiai taip pat kaip render(), bet naudojamas konteineriui, kurio HTML turinį pateikia ReactDOMServer. „React“ bandys prijungti įvykių klausytojus prie dabartinio žymėjimo.
hydrate(element, container[, callback])
Pastaba:
skirtumas tarp $ ir $ $
„React“ tikisi, kad pateiktas turinys bus identiškas serveriui ir klientui. Galime pataisyti teksto turinį, tačiau neatitikimus turime traktuoti kaip klaidas ir juos ištaisyti. Kūrimo režimu React įspėja apie nenuoseklumą hidratacijos metu.
Nėra garantijos, kad konkretūs skirtumai bus ištaisyti dėl neatitikimų.
Tai svarbu dėl daugelio programų našumo priežasčių, be to, bus per brangu patvirtinti visas vėliavas.
Tarkime, elemento atributas arba teksto turinys neišvengiamai skiriasi tarp serverio ir kliento (pavyzdžiui, laiko žyma ). Tokiu atveju galime nutildyti įspėjimą pridėdami suppressHydrationWarning = {tiesa} į stichiją.
Jei tai nėra teksto elementas, jis negali bandyti jo pataisyti, kad jis liktų nenuoseklus iki būsimų atnaujinimų.
Galite atlikti dviejų žingsnių atvaizdavimą, jei turime sąmoningai pateikti skirtingą serverį ir klientą. Kliente palikti komponentai gali nuskaityti būsenos kintamuosius, tokius kaip this.state.isClient, kur jis bus nustatytas į true komponentasDidMount().
Pradinis pateikimas bus atliktas taip pat, kaip serveris, išvengiant neatitikimų, tačiau papildomas perdavimas bus atliktas sinchroniškai po hidratacijos.
Pastaba: dėl šio metodo komponentai bus lėtesni, nes jie tai atlieka du kartus, todėl naudokite jį atsargiai.
unmountComponentAtNode() unmountComponentAtNode(container)
Pastaba:
unmountComponentAtNode buvo pakeistas į root.unmount() Reakcijoje. Jis ištrina prijungtą „React“ komponentą iš DOM ir išvalo įvykių tvarkykles bei būseną.
Jei prie konteinerio nebuvo sumontuotas joks komponentas, jis nieko negali padaryti. Grąžina true, jei nėra prijungtas joks komponentas, ir false, jei nėra komponento, kurį būtų galima atjungti.
rastiDOMNode()
Pastaba: findDOMNode yra pabėgimo liukas, naudojamas norint pasiekti pagrindinį DOM mazgą. Šis pabėgimo liukas daugeliu atvejų nerekomenduojamas, nes jis pramuša komponento abstrakciją. StrictMode jis nebenaudojamas.
rastiDOMNode(komponentas)
Jei šis komponentas buvo prijungtas prie DOM, tai grąžina atitinkamą savosios naršyklės DOM elementą. Šis metodas yra naudingas nuskaitant reikšmes iš DOM, pvz., formos lauko vertes, ir atliekant DOM matavimus. Daugeliu atvejų galite pridėti nuorodą į DOM mazgą ir nenaudoti findDOMNode.
Kai komponentas grąžina nulį arba false, findDOMNode grąžina nulį. Kai komponentas pateikiamas į eilutę, findDOMNode grąžina tekstinį DOM mazgą, kuriame yra ta reikšmė. Komponentas gali grąžinti fragmentą su keliais vaikais, jei findDOMNode grąžino DOM mazgą, atitinkantį pirmąjį netuščią antrinę dalį.
Pastaba:
findDOMNode veikia tik su prijungtais komponentais (ty komponentais, kurie buvo įdėti į DOM). Jei bandysite tai iškviesti naudojant komponentą, kuris dar nebuvo prijungtas (pvz., iškviesti findDOMNode() on render() komponente, kuris dar nebuvo sukurtas), bus taikoma išimtis.
FindDOMNode negalima naudoti funkcijų komponentuose.
DOM elementai
„React“ įdiegia nuo naršyklės nepriklausomą DOM sistemą, užtikrinančią našumą ir suderinamumą su keliomis naršyklėmis. Naudojamės šia galimybe, kad pašalintume kai kuriuos neapdorotus naršyklės DOM diegimo kraštus.
Programoje „React“ visos DOM ypatybės ir atributai (įskaitant įvykių tvarkykles) turi būti „camelcase“. Pavyzdžiui, HTML tabindex atributas atitinka skirtuko indekso atributą React.
Išimtis yra atributai aria-* ir data-*, kurie turi būti rašomi mažosiomis raidėmis. Pavyzdžiui, srities žymą galite turėti kaip srities žymą.
Atributų skirtumai
Keletas „React“ ir HTML atributų veiks skirtingai:
patikrinta
Pažymėtas atributas palaikomas žymimojo laukelio arba radijo tipo komponentų. Tai naudinga gaminant kontroliuojamus komponentus. Galite naudoti tai norėdami nustatyti, ar komponentas pažymėtas, ar ne.
DefaultChecked yra nepažymėtas atitikmuo, kuris nustato, kad komponentas bus patikrintas pirmą kartą jį sumontavus.
klasės pavadinimas
Norėdami nurodyti CSS klasę, naudokite atributą className. Tai taikoma visiems įprastiems DOM ir SVG elementams, tokiems kaip , ir kt.
Jei naudojate React with Web Components (nedažnai), naudokite klasės atributą.
pavojingaiSetInnerHTML
Dangerously SetInnerHTML yra React pakaitalas naudojant innerHTML DOM naršyklėje. Konfigūruoti HTML kodą yra rizikinga, nes vartotojus nesunku paveikti kelių svetainių scenarijų (XSS) ataka.
Taigi galime nustatyti HTML tiesiai iš „React“, bet jūs turite pavojingai įvesti SetInnerHTML ir perduoti objektą su __html raktu, kad prisimintumėte, jog tai pavojinga.
Pavyzdžiui:
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor Vietoj to „React“ elementuose naudojamas „htmlFor“, „ Since for“ yra rezervuotas žodis „JavaScript“.
onChange
OnChange įvykis veikia taip, kaip tikėtasi; įvykis suaktyvinamas kiekvieną kartą, kai pakeičiamas formos laukas.
Sąmoningai nenaudojame esamos naršyklės elgsenos, nes pakeitimas yra didžiulis dėl jos elgesio, o „React“ remiasi įvykiu, kad realiuoju laiku apdorotų naudotojo įvestį.
pasirinktas
Jei norite pažymėti kaip pasirinktą, žr. tos parinkties reikšmę vertėje . Išsamias instrukcijas rasite skyriuje „Pasirinkti žymą“.
Pastaba:
seleno
Didžiausiais atvejais klasių pavadinimai nurodo klases, apibrėžtas išoriniame CSS stiliaus lape. Stiliai naudojami „React“ programose, kad būtų pridėti apskaičiuoti stiliai pateikimo metu. Stiliaus atributas priima JavaScript objektą su kupranugarių savybėmis, o ne CSS eilute.
Tai atitinka DOM stiliaus JavaScript ypatybes, yra efektyvesnis ir vengia XSS saugumo skyles.
Pavyzdžiui:
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } Atkreipkite dėmesį, kad: stiliai nėra automatiškai pritvirtinami. Norėdami palaikyti senesnes naršykles, turime pateikti stiliaus ypatybes:
const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } Stiliaus klavišai yra kupranugariai, kad atitiktų prieigą prie DOM mazgų savybių iš JS. Teikėjo priešdėliai MS prasideda didžiosiomis raidėmis.
„React“ automatiškai pridės priesagą „px“ prie kai kurių eilutinių skaičių stiliaus ypatybių. Jei norime naudoti kitus vienetus nei „px“, nurodykite reikšmę kaip eilutę su norimu vienetu.
pavyzdžiui:
// Result style: '10px' Hello World! // Result style: '10%' Hello World!
Tačiau ne visos stiliaus savybės konvertuojamos į pikselių eilutes.
Neleiskite redaguojamo turinio įspėjimo
Jei vaikams skirtas elementas pažymėtas kaip redaguojamas turinys, pateikiamas įspėjimas, nes jis neveiks. Atributas slopina įspėjimą.
Slopinimo įspėjimas
Jei naudojame serverio pusės „React“ atvaizdavimą, tai yra įspėjimas, kai serveris ir klientas pateikia skirtingą turinį. Tačiau retais atvejais sunku garantuoti tikslią atitiktį. Pavyzdžiui, tikimasi, kad serverio arba kliento laiko žymos skirsis.
Jei įspėjimą apie slopinimą nustatysite kaip teisingą, jis neįspės apie elemento atributų ir turinio neatitikimus.
Jis veikė tik vieno lygio gylyje ir buvo skirtas pabėgimui.
vertė
Vertės atributą sukuria ir komponentai. Jį galite naudoti norėdami nustatyti komponento vertę.
Tai naudinga gaminant kontroliuojamus komponentus. defaultValue ir lygus nepažymėtam nustato komponento vertę, kai jis montuojamas nuosekliai.
Visi palaikomi HTML atributai
Palaikomi bet kokie pasirinktiniai ir standartiniai DOM atributai.
„React“ pateikė į „JavaScript“ orientuotą API DOM. „React“ komponentuose dažnai yra pasirinktinių ir su DOM susijusių rekvizitų, o tada „React“ naudoja tuos pačius „CamelCase“ susitarimus kaip ir DOM API:
// Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API