Real/Browser DOM:

DOM apzīmē 'Dokumenta objekta modelis'. Tas ir strukturēts HTML attēlojums tīmekļa lapā vai lietojumprogrammā. Tas atspoguļo visu lietotāja interfeisu (Lietotāja interfeiss) no tīmekļa lietojumprogramma kā koka datu struktūra.

Tas ir HTML elementu strukturālais attēlojums tīmekļa lietojumprogrammu vienkāršos vārdos.

Ikreiz, kad notiek kādas izmaiņas lietojumprogrammas lietotāja interfeisa stāvoklis, DOM ir atjaunināts un atspoguļo izmaiņas. DOM tiek renderēts un manipulēts ar katru lietojumprogrammas lietotāja interfeisa atjaunināšanas izmaiņu, kas ietekmē veiktspēju un palēnina to.

Tāpēc ar daudziem UI komponentiem un sarežģīto struktūru DOM, Tas tiks atjaunināts dārgāk, jo tas ir jārenderē atkārtoti ar katru izmaiņu.

DOM ir izveidota kā koka datu struktūra. Tas sastāv no katra mezgla UI elements atrodas tīmekļa dokumentā.

1. kārtas loģika

DOM atjaunināšana:

Ja mēs zinām par JavaScript, jūs varat redzēt, ka cilvēki izmanto 'getElementById()' vai 'getElementByClass()' metode, lai mainītu DOM saturu.

Ikreiz, kad tiek veiktas izmaiņas jūsu lietojumprogrammas stāvoklī, DOM tiek atjaunināts, lai atspoguļotu lietotāja saskarnes izmaiņas.

Kā virtuālais DOM paātrina darbību:

Kad lietojumprogrammai tiek pievienotas jaunas lietas, tiek izveidots virtuālais DOM, kas attēlots kā koks. Katrs lietojumprogrammas elements ir koka mezgls.

Tāpēc ikreiz, kad tiek mainīta elementa pozīcija, tiek izveidots jauns virtuālais DOM. Jaunākais virtuālais DOM koks tiek salīdzināts ar jaunāko, kurā tiek atzīmētas izmaiņas.

Tas atrod iespējamo veidu, kā veikt šīs izmaiņas, izmantojot faktisko DOM. Pēc tam atjauninātie elementi tiks atkārtoti atveidoti lapā.

Kā virtuālais DOM palīdz reaģēt:

Viss programmā React tiek novērots kā komponents, funkcionāls komponents un klases komponents. Komponentam ir stāvoklis. Ikreiz, kad kaut ko mainām JSX failā, vienkārši sakot, ikreiz, kad tiek mainīts komponenta stāvoklis, react atjaunina savu virtuālo DOM koku.

React katru reizi uztur divus virtuālos DOM. Pirmajā ir atjaunināts virtuālais DOM, bet otrs ir atjauninātā virtuālā DOM iepriekš atjaunināta versija. Tas salīdzina atjauninātā virtuālā DOM iepriekš atjaunināto versiju un atrod, kas tika mainīts DOM, piemēram, kuri komponenti tiks mainīti.

Lai gan tas var šķist neefektīvs, izmaksas vairs nav, jo virtuālā DOM atjaunināšana nevar aizņemt daudz laika.

Salīdzinot pašreizējo virtuālo DOM koku ar iepriekšējo, to sauc par 'izaicinot'. Kad React uzzina, kas ir mainījies, tas atjaunina objektus faktiskajā DOM. React izmanto pakešu atjauninājumus, lai atjauninātu faktisko DOM. Faktiskā DOM izmaiņas tiek nosūtītas pa partijām, nevis tiek sūtīti atjauninājumi atsevišķai komponenta stāvokļa izmaiņām.

UI atkārtota renderēšana ir visdārgākā daļa, un React izdodas to paveikt visefektīvāk, nodrošinot Real DOM, kas saņem pakešu atjauninājumus, lai atkārtoti renderētu lietotāja saskarni. Tiek izsaukts izmaiņu konvertēšanas process uz faktisko DOM samierināšanās.

Tas uzlabo veiktspēju un ir galvenais iemesls, kāpēc izstrādātājiem patīk reaģēt un tā virtuālais DOM.

Kas ir React virtuālais DOM?

Virtuālā DOM koncepcija ir paredzēta, lai uzlabotu un ātrāku Real DOM veiktspēju. Virtuālais DOM ir virtuāls DOM simbols.

Taču galvenā atšķirība ir tā, ka katru reizi ar katru izmaiņu tiek atjaunināts virtuālais DOM, nevis faktiskais DOM.

Piemēram, īsts un virtuālais DOM ir attēlots kā a koka struktūra. Katrs koka elements ir mezgls. A mezgls tiek pievienots kokam, kad lietojumprogrammas lietotāja saskarnei tiek pievienots jauns vienums.

Ja kādu elementu pozīcija mainās, a jauns tiek izveidots virtuālais DOM koks. Virtuālais DOM aprēķina minimālo darbību skaitu reālajā DOM, lai veiktu izmaiņas reālajā DOM. Tas ir efektīvs un darbojas labāk, jo tiek samazinātas visa reālā DOM atkārtotas renderēšanas izmaksas un darbība.

Tagad mums ir normāla izpratne par reālo un virtuālo DOM.

Apskatīsim, kā Reaģēt darbojas, izmantojot Virtuālais DOM.

• Katrs lietotāja interfeiss ir indivīds komponents, un katrai sastāvdaļai ir savs stāvoklis.
• Reakcija seko novērojami modeļi un novēro stāvokļu izmaiņas.
• Ikreiz, kad tiek veiktas kādas izmaiņas komponenta stāvoklī, React atjaunina virtuālo DOM koku bet nemaina faktiskais DOM koks.
• Reaģēt salīdzina uz pašreizējā versija no virtuālais DOM Ar iepriekšējā versija pēc atjaunināšana.
• React zina, kuri objekti tiek mainīti virtuālais DOM. Tas aizvieto objektus faktiskais DOM , izraisot minimāla manipulācija operācijas.
• Šis process ir pazīstams kā 'diferencēšana'. Šis attēls padarīs koncepciju skaidru.

Attēlā, tumši zils aprindās ir mezgli kas ir mainīti. The Valsts no šīm sastāvdaļām ir mainījusies. React aprēķina atšķirību starp iepriekšējo un pašreizējo versiju virtuālais DOM koks, un viss vecāku apakškoks tiek atkārtoti renderēts, lai parādītu mainīto lietotāja interfeisu.

Atjauninātais koks ir partija atjaunināta (ka reālā DOM atjauninājumi tiek sūtīti pa partijām, nevis tiek sūtīti atjauninājumi par katru stāvokļa maiņu.) uz reālo DOM.

Lai tajā iedziļināties, mums ir jāzina par Reakcijas renderēšana () funkciju.

Tad mums ir jāzina par dažiem svarīgiem Iespējas no Reaģēt.

JSX

JSX apzīmē JavaScript XML. Tas ir sintakses paplašinājums no JS. Izmantojot JSX, mēs varam rakstīt HTML struktūras failā, kas satur JavaScript kods.

Sastāvdaļas

Sastāvdaļas ir neatkarīgs un atkārtoti lietojams no koda. Katrs React lietotnes lietotāja interfeiss ir komponents. Vienai lietojumprogrammai ir daudz sastāvdaļas.

Sastāvdaļas ir divu veidu, klases sastāvdaļas un funkcionālās sastāvdaļas.

Klases komponentiem ir statuss, jo tie izmanto savu “stāvokli”, lai mainītu lietotāja interfeisu. Funkcionālie komponenti ir bezvalsts komponenti. Tie darbojas kā JavaScript funkcija, kas izmanto patvaļīgu parametru, ko sauc par 'rekvizīti'.

Reaģēt Āķi ir ieviesti piekļuves stāvokļiem ar funkcionāliem komponentiem.

Dzīves cikla metodes

Dzīves cikla metodes ir svarīgas metodes iebūvēts reaģēt, kas darbojas uz komponentiem visu to darbības laiku DOM. Katrs React komponents notika notikumu dzīves ciklā.

Render() metode ir maksimāli izmantotā metode dzīves cikla metode .

Tā ir vienīgā metode iekšienē Reaģēt klases komponenti . Tātad katrā klasē komponents render() tiek izsaukts.

Renderēšanas () metode apstrādā komponenta renderēšanu, izmantojot lietotāja interfeisu. Renderējumā () ir visa ekrānā redzamā loģika. Tam var būt arī a null vērtību, ja nevēlamies neko rādīt displejā.

Piemērs ir parādīts zemāk:

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

Piemērā tiks parādīts JSX rakstīts renderā ().

Kad Valsts vai prop tiek atjaunināts komponentā, renderēt () atgriezīs citu React elementu koku.

Rakstot kodu konsolē vai JavaScript failā, tas notiks:

• Pārlūkprogramma parsē HTML, lai atrastu mezglu ar ID.
• Tas noņem elementa bērna elementu.
• Tas atjaunina elementu (DOM) Ar 'atjauninātā vērtība'.
• Tas pārrēķina CSS vecāku un bērnu mezgliem.
• Pēc tam atjauniniet izkārtojumu.

Visbeidzot, šķērsojiet koku ekrāna displejā.

Tātad, kā mēs zinām, ka atjaunināšana DOM ietver satura maiņu. Tas ir vairāk piesaistīts tam.

CSS pārrēķināšanā un izkārtojumu mainīšanā ir iesaistīti sarežģīti algoritmi, kas ietekmē veiktspēju.

Tātad React ir daudz veidu, kā ar to tikt galā, jo tas izmanto kaut ko pazīstamu kā virtuālo DOM.

reactdome

React-dom pakotne nodrošina DOM specifiskas metodes lietojumprogrammas augšējā līmenī, lai vajadzības gadījumā izkļūtu no React modeļa.

 import * as ReactDOM from 'react-dom'; 

Ja izmantojat ES5 ar npm, jums vajadzētu arī rakstīt:

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

The reaģēt-dom pakotne nodrošina arī moduļus, kas raksturīgi klienta un servera lietotnēm:

• reaģēt-dom/klients
• reaģēt-dom/serveris

Šo metožu react-dom pakotnes eksports:

• izveidot portālu()
• flushSync()

Tiek eksportētas arī reakcijas metodes:

• renderēt ()
• hidrāts ()
• atrastDOMNode()
• unmountComponentAtNode ()

Piezīme. Gan hidratācija, gan renderēšana ir aizstāti ar jaunākām klienta metodēm.

Pārlūka atbalsts

React atbalsta visas mūsdienu pārlūkprogrammas, un vecākām versijām ir nepieciešami daži polifili.

Piezīme. Mēs nevaram atbalstīt vecākas pārlūkprogrammas, kas neatbalsta ES5 metodes, piemēram, Internet Explorer. Varat konstatēt, ka lietotnes darbojas jaunākajās pārlūkprogrammās, ja lapā ir iekļauti poliaizpildījumi, piemēram, es5-shim un es5-sham, taču jūs esat viens pats, ja izvēlēsities šo ceļu.

Atsauce

izveidot portālu()

Izveido portālu () Portāls nodrošina veidu, kā lasīt bērnus DOM mezglā, kas pastāv ārpus DOM komponenta ranga.

flushSync()

Piespiedu reakcijas atjauninājumi nodrošinātajā atzvanā vienlaicīgi. Tas nodrošina, ka DOM tiek nekavējoties atjaunināts.

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

Piezīme:

virknes sadalīšana c++ valodā

• Izmantojiet taupīgi. Flush Sync ievērojami pasliktināja veiktspēju.
• FlushSync piespiedīs neapstiprinātās robežas, lai parādītu atkāpšanās stāvokli.
• Tas palaiž gaidošos efektus un vienlaikus piemēro atjauninājumus pirms tā atgriešanas.
• flushSync izskalojiet atjauninājumus ārpus atzvanīšanas, lai atzvanītu atjauninājumus. Piemēram, ja no klikšķa ir neapstiprināti atjauninājumi, React var to izskalot pirms atjauninājumu izskalošanas atzvanīšanas laikā.

Mantotā atsauce

renderēt ()

 render(element, container[, callback]) 

Piezīme. Renderēšana tiek aizstāta ar saknes izveidi programmā React. Atveidojiet React elementu DOM pievienotajā konteinerā un atmaksājiet atsauci uz komponentu.

Ja React elements iepriekš tika renderēts jebkurā konteinerā, tas veiktu tā atjaunināšanu, un ir jāatspoguļo jaunākais React elements.

Tas tiek izpildīts, kad komponents tiek renderēts, ja ir nodrošināta izvēles atzvanīšana.

Piezīme:

Renderēšanas () metode kontrolē konteinera mezgla saturu, kad tas iet garām. Jebkurš esošais DOM elements tiek aizstāts.

Renderēšana () nemaina konteinera mezglu (var mainīt tikai konteinera atvasinājumus). Var būt iespējams ievietot komponentu esošajā DOM mezglā, nepārrakstot pakārtotos elementus.

Renderējiet () pašlaik atpakaļ atsauci uz ReactComponent saknes gadījumu.

10 no 50

Tomēr tā atgriešanas vērtība tiek mantota, un no tās var izvairīties, jo dažos gadījumos turpmākās React versijas komponentus var ģenerēt asinhroni.

Ja jums ir nepieciešama atsauce uz ReactComponent prototipu, labākais risinājums ir elementam pievienot atsaukšanas atsauci.

Renderēšana () tiek izmantota, lai hidrētu renderētu konteineru uz serveri, ir novecojis. Izmantot hydrateRoot() tā vietā.

hidrāts ()

hidrāts tiek aizstāts ar hidrātu Root.

Tas ir tieši tāds pats kā render(), bet tiek izmantots konteineram, kura HTML saturu renderē ReactDOMServer. React mēģinās savienot notikumu uztvērējus ar pašreizējo marķējumu.

 hydrate(element, container[, callback]) 

Piezīme:

React sagaida, ka atveidotais saturs starp serveri un klientu būs identisks. Mēs varam labot teksta saturu, taču mums pretrunas jāuzskata par kļūdām un jāizlabo. Izstrādes režīmā React brīdina par nekonsekvenci hidratācijas laikā.

Nav pārliecības, ka konkrētas atšķirības tiek koriģētas, ņemot vērā neatbilstības.

Lielākajā daļā lietojumprogrammu tas ir svarīgi veiktspējas iemeslu dēļ, un būs pārāk dārgi pārbaudīt visus karogus.

Pieņemsim, ka elementa atribūts vai teksta saturs serverī un klientā neizbēgami atšķiras (piemēram, laika zīmogs ). Šajā gadījumā mēs varam izslēgt brīdinājumu, pievienojot suppressHydrationWarning = {true} uz elementu.

Ja tas nav teksta elements, tas nevar mēģināt to izlabot, lai tas varētu palikt nekonsekvents līdz nākamajiem atjauninājumiem.

Varat veikt divu pakāpju renderēšanu, ja mums apzināti nepieciešams nodrošināt atšķirību serverī un klientā. Klientā atstātie komponenti var nolasīt stāvokļa mainīgos, piemēram, this.state.isClient, kur tas tiks iestatīts uz True komponentsDidMount().

Sākotnējā renderēšanas caurlaide tiks veikta tāpat kā serveris, izvairoties no nekonsekvences, taču papildu pārsūtīšana tiks veikta sinhroni pēc hidratācijas.

Piezīme. Šī pieeja padarīs komponentus lēnāku, jo tie to dara divas reizes, tāpēc izmantojiet to uzmanīgi.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Piezīme:

unmountComponentAtNode ir aizstāts ar root.unmount() sadaļā Reakt. Tas izdzēš uzstādīto React komponentu no DOM un notīra tā notikumu apstrādātājus un stāvokli.

Ja konteineram nav uzstādīts neviens komponents, tas neko nevar darīt. Atgriež True, ja nav pievienots neviens komponents, un false, ja nav atmontējama komponenta.

atrastDOMNode()

Piezīme: findDOMNode ir evakuācijas lūka, ko izmanto, lai piekļūtu pamatā esošajam DOM mezglam. Vairumā gadījumu šī evakuācijas lūka nav ieteicama, jo tā caurdur komponentu abstrakciju. StrictMode tā darbība ir pārtraukta.

atrastDOMNode(komponents)

Ja šis komponents ir pievienots DOM, tas atgriež atbilstošo vietējās pārlūkprogrammas DOM elementu. Šī metode ir noderīga, lai nolasītu vērtības no DOM, piemēram, formas lauka vērtības, un veiktu DOM mērījumus. Vairumā gadījumu varat pievienot atsauci uz DOM mezglu un izvairīties no findDOMNode izmantošanas.

Ja komponents atgriež nulli vai false, findDOMNode atgriež nulli. Kad komponents tiek renderēts virknē, findDOMNode atgriež teksta DOM mezglu, kurā ir šī vērtība. Komponents var atgriezt fragmentu ar vairākiem bērniem, ja findDOMNode ir atgriezis DOM mezglu, kas atbilst pirmajam netukšajam pakārtotajam.

Piezīme:

FindDOMNode darbojas tikai uz uzstādītiem komponentiem (tas ir, komponentiem, kas ir ievietoti DOM). Ja mēģināsit to izsaukt komponentam, kas vēl nav pievienots (piemēram, izsaucot findDOMNode() on render() komponentam, kas vēl nav izveidots), tiks ieviests izņēmums.

findDOMNode nevar izmantot funkciju komponentos.

DOM elementi

React ievieš no pārlūkprogrammas neatkarīgu DOM sistēmu veiktspējai un ar vairāku pārlūkprogrammu saderību. Mēs izmantojam šo iespēju, lai novērstu dažas pārlūkprogrammas DOM ieviešanas aptuvenās malas.

Programmā React visiem DOM rekvizītiem un atribūtiem (tostarp notikumu apdarinātājiem) ir jābūt camelcase. Piemēram, atribūts HTML tabindex atbilst cilnes Index atribūtam programmā React.

Izņēmums ir atribūti aria-* un data-*, kuriem ir jābūt mazajiem burtiem. Piemēram, apgabala tagu var izmantot kā apgabala atzīmi.

Atribūtu atšķirības

Vairāki atribūti React un HTML darbosies atšķirīgi:

pārbaudīts

Atzīmēto atribūtu atbalsta izvēles rūtiņas vai radio tipa komponenti. Tas ir noderīgi kontrolētu komponentu ražošanai. Varat to izmantot, lai noteiktu, vai komponents ir pārbaudīts vai nē.

DefaultChecked ir neatzīmēts līdzinieks, kas nosaka, ka komponents tiek pārbaudīts, kad to pirmo reizi uzstāda.

klasesNosaukums

Lai norādītu CSS klasi, izmantojiet atribūtu className. Tas attiecas uz visiem parastajiem DOM un SVG elementiem, piemēram, utt.

Ja izmantojat React with Web Components (retāk), izmantojiet klases atribūtu.

bīstamiSetInnerHTML

Bīstami SetInnerHTML ir React aizstājējs iekšējā HTML izmantošanai DOM pārlūkprogrammā. HTML koda konfigurēšana ir riskanta, jo lietotājus ir viegli pakļaut starpvietņu skriptēšanas (XSS) uzbrukumam.

Tātad mēs varam iestatīt HTML tieši no React, taču jums ir bīstami jāievada SetInnerHTML un jānodod objekts ar atslēgu __html, lai atcerētos, ka tas ir bīstams.

Piemēram:

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

React elementi izmanto htmlFor tā vietā, jo jo ir rezervēts vārds JavaScript.

java objekts

onChange

OnChange notikums darbojas, kā paredzēts; notikums tiek aktivizēts katru reizi, kad tiek mainīts veidlapas lauks.

Mēs apzināti neizmantojam esošās pārlūkprogrammas darbības, jo izmaiņas ir lielas, un React paļaujas uz notikumu, lai apstrādātu lietotāja ievadi reāllaikā.

atlasīts

Ja vēlaties atzīmēt kā atlasītu, tā vietā skatiet šīs opcijas vērtību 's vērtībā. Detalizētus norādījumus skatiet sadaļā “Atlasīt tagu”.

Piezīme:

Maksimālos gadījumos klašu nosaukumi attiecas uz klasēm, kas definētas ārējā CSS stila lapā. Stili tiek izmantoti React lietotnēs, lai renderēšanas laikā pievienotu aprēķinātos stilus. Stila atribūts CSS virknes vietā pieņem JavaScript objektu ar kamieļa īpašībām.

Tas atbilst DOM stilā JavaScript īpašības, ir efektīvāka un izvairās XSS drošības caurumi.

Piemēram:

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

Ņemiet vērā, ka: stili netiek pievienoti automātiski. Lai atbalstītu vecākas pārlūkprogrammas, mums ir jānodrošina stila rekvizīti:

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

Stila taustiņi ir kamieļu, lai tie atbilstu piekļuvei DOM mezglu rekvizītiem no JS. Pakalpojumu sniedzēja prefiksi MS sākas ar lielo burtu.

React dažiem iekļautajiem skaitļu stila rekvizītiem automātiski pievienos sufiksu “px”. Ja vēlamies izmantot citas vienības, nevis “px”, norādiet vērtību kā virkni ar vajadzīgo vienību.

piemēram:

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

Tomēr ne visi stila rekvizīti tiek pārveidoti par pikseļu virknēm.

Apspiest rediģējama satura brīdinājumu

Ja bērniem paredzēts elements ir atzīmēts kā rediģējams saturs, tiek parādīts brīdinājums, jo tas nedarbosies. Atribūts nomāc brīdinājumu.

Brīdinājums par slāpēšanu

Ja mēs izmantojam servera puses React renderēšanu, tas ir brīdinājums, kad serveris un klients renderē ar atšķirīgu saturu. Tomēr retos gadījumos ir grūti garantēt precīzu atbilstību. Piemēram, sagaidāms, ka servera vai klienta laikspiedoli atšķiras.

Ja iestatāt slāpēšanas brīdinājumu uz patiesu, tas nebrīdinās par neatbilstību starp atribūtiem un elementa saturu.

Tas darbojās tikai viena līmeņa dziļumā un bija paredzēts lietošanai kā bēgšana.

vērtību

Vērtības atribūtu veido komponenti , un. Varat to izmantot, lai iestatītu komponenta vērtību.

Tas ir noderīgi kontrolētu komponentu ražošanai. defaultValue un vienāds ar neatzīmēto iestata komponenta vērtību, kad tas ir uzstādīts sērijveidā.

Visi atbalstītie HTML atribūti

Tiek atbalstīts jebkurš pielāgots un standarta DOM atribūts.

React ir nodrošinājis uz JavaScript orientētu API DOM. Un React komponenti bieži satur pielāgotus un ar DOM saistītus rekvizītus, un pēc tam React izmanto tās pašas CamelCase konvencijas kā DOM API:

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