Skutočný/prehliadač DOM:

DOM znamená „Model objektu dokumentu“. Je to štruktúrovaná reprezentácia HTML na webovej stránke alebo v aplikácii. Predstavuje celé používateľské rozhranie (Používateľské rozhranie) z webová aplikácia ako stromová dátová štruktúra.

Je to a štruktúrnu reprezentáciu prvkov HTML webovej aplikácie jednoduchými slovami.

Vždy, keď dôjde k akejkoľvek zmene v stav používateľského rozhrania aplikácie, DOM je aktualizovaný a predstavuje zmenu. DOM sa vykresľuje a manipuluje s každou zmenou pre aktualizáciu používateľského rozhrania aplikácie, čo ovplyvňuje výkon a spomaľuje ho.

Preto s mnohými komponentmi používateľského rozhrania a zložitou štruktúrou DOM, Aktualizácia bude drahšia, pretože je potrebné ju znova vykresliť pri každej zmene.

DOM je vytvorený ako stromová dátová štruktúra. Pozostáva z uzla pre každú z nich prvok používateľského rozhrania vo webovom dokumente.

bool na reťazec java

Aktualizácia DOM:

Ak vieme niečo o JavaScripte, môžete vidieť ľudí používať 'getElementById()' alebo 'getElementByClass()' metóda na úpravu obsahu DOM.

Vždy, keď dôjde k akejkoľvek zmene v stave vašej aplikácie, DOM sa aktualizuje, aby odrážal zmenu v používateľskom rozhraní.

Ako Virtual DOM urýchľuje veci:

Keď sú do aplikácie pridané nejaké nové veci, vytvorí sa virtuálny DOM reprezentovaný ako strom. Každý prvok v aplikácii je uzlom v strome.

Preto vždy, keď dôjde k zmene polohy prvku, vytvorí sa nový virtuálny DOM. Novší virtuálny strom DOM sa porovnáva s najnovším, kde sú zaznamenané zmeny.

Hľadá možný spôsob vykonania týchto zmien pomocou skutočného DOM. Potom by sa aktualizované prvky na stránke znova vykreslili.

Ako virtuálny DOM pomáha pri reakcii:

Všetko v Reacte je pozorované ako komponent, funkčný komponent a komponent triedy. Komponent má stav. Kedykoľvek zmeníme niečo v súbore JSX, zjednodušene povedané, kedykoľvek sa zmení stav komponentu, reakcia aktualizuje svoj virtuálny strom DOM.

React udržiava vždy dva virtuálne DOM. Prvý obsahuje aktualizovaný virtuálny DOM a druhý je predaktualizovaná verzia aktualizovaného virtuálneho DOM. Porovnáva predaktualizovanú verziu aktualizovaného virtuálneho modelu DOM a zisťuje, čo sa v DOM zmenilo, napríklad ktoré komponenty sa zmenia.

Hoci sa to môže zdať neefektívne, náklady to nie sú vyššie, pretože aktualizácia virtuálneho DOM nezaberie veľa času.

Pri porovnaní aktuálneho virtuálneho stromu DOM s predchádzajúcim je známy ako „vzdorovať“. Keď React vie, čo sa zmenilo, aktualizuje objekty v aktuálnom DOM. React používa dávkové aktualizácie na aktualizáciu skutočného DOM. Zmeny skutočného DOM sa odosielajú v dávkach, a nie odosielanie akýchkoľvek aktualizácií pre jednu zmenu stavu komponentu.

Opätovné vykreslenie používateľského rozhrania je najdrahšia časť a React to dokáže najefektívnejšie tým, že zabezpečí, aby skutočný DOM prijímal dávkové aktualizácie na opätovné vykreslenie používateľského rozhrania. Proces prevodu zmien na skutočný DOM sa nazýva zmierenie.

Zlepšuje výkon a je hlavným dôvodom, prečo vývojári milujú reakciu a jej virtuálny DOM.

Čo je virtuálny DOM Reactu?

Koncept Virtual DOM prichádza na to, aby bol výkon Real DOM lepší a rýchlejší. Virtuálny DOM je virtuálny symbol DOM.

Hlavným rozdielom je však to, že pri každej zmene sa namiesto skutočného modelu DOM aktualizuje virtuálny DOM.

Napríklad, reálny a virtuálny DOM je reprezentovaný ako a stromová štruktúra. Každý prvok v strome je uzol. A uzol sa pridá do stromu, keď sa do používateľského rozhrania aplikácie pridá nová položka.

Ak sa zmení poloha akýchkoľvek prvkov, a Nový vytvorí sa virtuálny strom DOM. Virtuálny DOM vypočíta minimálny počet operácií na skutočnom DOM, aby ste vykonali zmeny v skutočnom DOM. Je efektívny a funguje lepšie, pretože znižuje náklady a prevádzku opätovného vykresľovania celého skutočného DOM.

Teraz už normálne chápeme skutočný a virtuálny DOM.

Pozrime sa ako Reagovať funguje pomocou Virtuálny DOM.

• Každé používateľské rozhranie je individuálne komponent, a každý komponent má svoj stav.
• Reagovať nasleduje pozorovateľné vzory a pozoruje zmeny stavov.
• Vždy, keď dôjde k akejkoľvek zmene stavu komponentu, Reagujte aktualizuje virtuálny strom DOM ale nemení to skutočný strom DOM.
• Reagovať porovnáva na aktuálna verzia z virtuálny DOM s predošlá verzia po aktualizácie.
• React vie, ktoré objekty sa zmenili v virtuálny DOM. Nahrádza predmety v skutočný DOM , viesť k minimálna manipulácia operácií.
• Tento proces je známy ako „diferenciácia“. Tento obrázok objasní koncept.

Na obrázku je tmavomodrá kruhy sú uzly ktoré boli zmenené. The štát týchto komponentov sa zmenilo. React vypočíta rozdiel medzi predchádzajúcou a aktuálnou verziou virtuálny strom DOM, a celý rodičovský podstrom sa znova vykreslí, aby sa zobrazilo zmenené používateľské rozhranie.

Aktualizovaný strom je dávka aktualizovaná (že aktualizácie skutočného modelu DOM sa odosielajú v dávkach namiesto odosielania aktualizácií pre každú zmenu stavu.) do skutočného modelu DOM.

Aby sme sa do toho dostali hlbšie, musíme vedieť o Reagovať na vykreslenie () funkciu.

Potom musíme vedieť o niektorých dôležitých veciach Vlastnosti spoločnosti React.

JSX

JSX znamenať JavaScript XML. Je to a rozšírenie syntaxe z JS. Pomocou JSX môžeme písať HTML štruktúry v súbore, ktorý obsahuje JavaScript kód.

Komponenty

Komponenty sú nezávislý a opakovane použiteľné kódu. Každé používateľské rozhranie v aplikácii React je súčasťou. Jedna aplikácia má veľa komponentov.

Komponenty sú dvoch typov, komponenty triedy a funkčné komponenty.

Komponenty triedy sú stavové, pretože používajú svoj „stav“ na zmenu používateľského rozhrania. Funkčné komponenty sú bezstavové komponenty. Fungujú ako funkcia JavaScript, ktorá preberá ľubovoľný parameter nazývaný „rekvizity“.

Reagovat Hooks boli zavedené na prístup k stavom s funkčnými komponentmi.

Metódy životného cyklu

Metódy životného cyklu sú dôležité metódy vstavaný reagovať, ktoré pôsobia na komponenty počas ich trvania v DOM. Každý komponent Reactu prešiel životným cyklom udalostí.

Maximálne sa používa metóda render(). metóda životného cyklu .

Je to jediná metóda v rámci Komponenty triedy React . Takže v každej triede sa volá komponent render().

Metóda vykreslenia (). spracováva vykreslenie komponentu pomocou používateľského rozhrania. Vykreslenie () obsahuje všetku logiku zobrazenú na obrazovke. Môže mať aj a nulový hodnotu, ak nechceme nič zobrazovať na displeji.

Príklad je uvedený nižšie:

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

Príklad ukáže JSX napísané v render().

Keď štát alebo rekvizita sa aktualizuje v rámci komponentu, render() vráti iný strom prvkov React.

Pri písaní kódu do konzoly alebo súboru JavaScript sa stanú tieto:

• Prehliadač analyzuje kód HTML, aby našiel uzol s ID.
• Odstráni podradený prvok prvku.
• Aktualizuje prvok (DOM) s „aktualizovaná hodnota“.
• Prepočítava sa CSS pre rodičovské a podradené uzly.
• Potom aktualizujte rozloženie.

Nakoniec prejdite stromom na obrazovke.

Takže ako vieme, že aktualizácia DOM zahŕňa zmenu obsahu. Je k nemu viac pripútaný.

Komplexné algoritmy sa podieľajú na prepočítavaní CSS a zmene rozložení, ktoré ovplyvňujú výkon.

Takže React má mnoho spôsobov, ako sa s tým vysporiadať, pretože používa niečo známe ako virtuálny DOM.

reakčný dom

Balík react-dom poskytuje metódy špecifické pre DOM na najvyššej úrovni aplikácie, aby v prípade potreby unikli z modelu React.

 import * as ReactDOM from 'react-dom'; 

Ak používate ES5 s npm, mali by ste tiež napísať:

index zoznamu

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

The reagovať-dom balík tiež poskytuje moduly špecifické pre klientske a serverové aplikácie:

• reagovať-dom/klient
• reakčný dom/server

Balík reakcií exportuje tieto metódy:

• createPortal()
• flushSync()

Exportujú sa aj metódy reakcie:

• vykresliť ()
• hydratovať ()
• findDOMNode()
• unmountComponentAtNode ()

Poznámka: Hydratácia aj omietka boli nahradené novšími klientskymi metódami.

Podpora prehliadača

React podporuje všetky moderné prehliadače a pre staršie verzie sú potrebné niektoré polyfilly.

Poznámka: Nemôžeme podporovať staršie prehliadače, ktoré nepodporujú metódy ES5, Like, Internet Explorer. Môžete zistiť, že aplikácie fungujú v najnovších prehliadačoch, ak sú súčasťou stránky polyfilly ako es5-shim a es5-sham, ale ak sa vyberiete touto cestou, budete na to sami.

Odkaz

createPortal()

Vytvára portál () Portál poskytuje spôsob, ako načítať deti do uzla DOM, ktorý existuje mimo hodnotenia komponentu DOM.

flushSync()

Vynútiť aktualizácie React v poskytnutom spätnom volaní súčasne. Zabezpečuje okamžitú aktualizáciu DOM.

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

Poznámka:

• Používajte striedmo. Flush Sync výrazne znížil výkon.
• FlushSync vynúti čakajúce hranice, aby sa zobrazil záložný stav.
• Spúšťa čakajúce efekty a súčasne aplikuje aktualizácie pred ich vrátením.
• flushSync flush aktualizácie mimo spätného volania na vyprázdnenie aktualizácií spätného volania. Napríklad, ak existujú nejaké čakajúce aktualizácie po kliknutí, React ich môže vyprázdniť pred vyprázdnením aktualizácií pri spätnom volaní.

Odkaz na staršiu verziu

render()

 render(element, container[, callback]) 

Poznámka: Render je nahradený vytvorením Root v React. Vykreslite prvok React do DOM v dodanom kontajneri a zaplaťte odkaz na komponent.

Ak by bol prvok React predtým vykreslený do akéhokoľvek kontajnera, vykonal by na ňom aktualizáciu a je potrebné zohľadniť najnovší prvok React.

Vykoná sa pri vykreslení komponentu, ak je poskytnuté voliteľné spätné volanie.

Poznámka:

Metóda Render () riadi obsah uzla kontajnera, keď prechádza okolo. Akýkoľvek existujúci prvok DOM je nahradený.

Render () nemení uzol kontajnera (môže iba upravovať potomkov kontajnera). Môže byť možné vložiť komponent do existujúceho uzla DOM bez prepísania podradených prvkov.

Render () aktuálne spätný odkaz na koreňovú inštanciu ReactComponent.

reťazec do dátumu

Jeho návratová hodnota je však zdedená a možno sa jej vyhnúť, pretože v niektorých prípadoch môžu budúce verzie Reactu generovať komponenty asynchrónne.

Ak potrebujete referenciu na prototyp ReactComponent, najlepším riešením je pripojiť referenciu na stiahnutie prvku.

Render () sa používa na hydratáciu renderovaného kontajnera na server je zastaraný. Použite hydrateRoot() namiesto toho.

hydrát()

hydrát je nahradený hydrátovým koreňom.

Je presne ako render(), ale používa sa pre kontajner, ktorého obsah HTML vykresľuje ReactDOMServer. React sa pokúsi pripojiť poslucháčov udalostí k aktuálnemu označeniu.

 hydrate(element, container[, callback]) 

Poznámka:

React očakáva, že vykreslený obsah bude medzi serverom a klientom identický. Môžeme opraviť obsah textu, ale nezrovnalosti musíme považovať za chyby a opraviť ich. V režime vývoja React upozorňuje na nekonzistentnosť počas hydratácie.

Neexistuje žiadna záruka, že špecifické rozdiely budú opravené o nezrovnalosti.

Je to dôležité z dôvodov výkonu vo väčšine aplikácií a overenie všetkých príznakov bude príliš drahé.

Predpokladajme, že atribút prvku alebo obsah textu sa medzi serverom a klientom nevyhnutne líšia (napr. časovú pečiatku ). V tomto prípade môžeme upozornenie stlmiť pridaním potlačiťVarovanie hydratácie = {true} k prvku.

Ak to nie je textový prvok, nemôže sa ho pokúsiť opraviť, aby mohol zostať nekonzistentný až do budúcich aktualizácií.

Môžete vykonať dvojprechodové vykreslenie, ak potrebujeme zámerne poskytnúť rozdielne na serveri a klientovi. Komponenty ponechané na klientovi môžu čítať stavové premenné ako this.state.isClient, kde sa nastaví na hodnotu true v componentDidMount().

Počiatočný prechod na vykreslenie bude robiť to isté ako server, čím sa vyhne nezrovnalostiam, ale ďalší prechod sa vykoná synchrónne po hydratácii.

Poznámka: Tento prístup spomalí komponenty, pretože to robia dvakrát, takže ho používajte opatrne.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Poznámka:

unmountComponentAtNode bol nahradený root.unmount() v React. Vymaže pripojený komponent React z DOM a vyčistí jeho obsluhu udalostí a stav.

Ak do kontajnera nebol namontovaný žiadny komponent, nemôže nič robiť. Vráti hodnotu true, ak nie je pripojený žiadny komponent, a hodnotu false, ak neexistuje žiadny komponent na odpojenie.

findDOMNode()

Poznámka: findDOMNode je únikový poklop používaný na prístup k základnému uzlu DOM. Tento únikový poklop sa vo väčšine prípadov neodporúča, pretože preniká do abstrakcie komponentov. V StrictMode bola zastaraná.

findDOMNode(komponent)

Ak bol tento komponent pripojený k modelu DOM, vráti sa príslušný prvok DOM natívneho prehliadača. Táto metóda je užitočná na čítanie hodnôt z DOM, ako sú hodnoty poľa formulára, a na vykonávanie meraní DOM. Vo väčšine prípadov môžete pripojiť odkaz na uzol DOM a vyhnúť sa používaniu findDOMNode.

Keď komponent vráti hodnotu null alebo false, funkcia findDOMNode vráti hodnotu null. Keď je komponent vykreslený do reťazca, findDOMNode vráti textový uzol DOM obsahujúci túto hodnotu. Komponent môže vrátiť fragment s viacerými potomkami v prípade, že findDOMNode vrátil uzol DOM zodpovedajúci prvému neprázdnemu potomkovi.

Poznámka:

findDOMNode funguje iba na pripojených komponentoch (t. j. komponentoch, ktoré boli umiestnené v DOM). Ak sa to pokúsite zavolať na komponente, ktorý ešte nebol pripojený (napríklad volanie funkcie findDOMNode() na render() na komponente, ktorý ešte nebol vytvorený), bude vyvolaná výnimka.

findDOMNode nemožno použiť vo funkčných komponentoch.

prvky DOM

React implementuje systém DOM nezávislý od prehliadača pre výkon a s kompatibilitou medzi prehliadačmi. Využívame túto príležitosť, aby sme vyčistili niektoré z nedostatkov v implementácii DOM prehliadača.

V Reacte musia byť všetky vlastnosti a atribúty DOM (vrátane obsluhy udalostí) typu camelcase. Napríklad HTML atribút tabindex zodpovedá atribútu tab Index v React.

Výnimkou sú atribúty aria-* a data-*, ktoré musia byť malé. Napríklad môžete mať značku oblasti ako značku oblasti.

Rozdiely v atribútoch

Niekoľko atribútov bude medzi React a HTML fungovať odlišne:

skontrolované

Atribút začiarknutý je podporovaný komponentmi začiarkavacieho políčka alebo rádia typu . Je užitočný pri výrobe kontrolovaných komponentov. Môžete to použiť na určenie, či je komponent skontrolovaný alebo nie.

DefaultChecked je nezačiarknutý náprotivok, ktorý určuje, že komponent je skontrolovaný pri prvom namontovaní.

className

Ak chcete zadať triedu CSS, použite atribút className. Vzťahuje sa na všetky bežné prvky DOM a SVG, ako napr. , atď.

Ak používate React with Web Components (menej časté), použite namiesto toho atribút class.

nebezpečneSetInnerHTML

Nebezpečne je SetInnerHTML náhradou Reactu za používanie innerHTML v prehliadači DOM. Konfigurácia HTML kódu je riskantná, pretože je ľahké vystaviť používateľov útoku cross-site scripting (XSS).

Takže môžeme nastaviť HTML priamo z Reactu, ale musíte nebezpečne zadať SetInnerHTML a odovzdať objekt s kľúčom __html, aby ste si zapamätali, že je to nebezpečné.

Napríklad:

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

Prvky React namiesto toho používajú htmlFor, keďže for je v JavaScripte vyhradené slovo.

pri zmene

Udalosť onChange sa správa podľa očakávania; udalosť sa spustí pri každej zmene poľa formulára.

Zámerne nepoužívame existujúce správanie prehliadača, pretože zmena je pre jeho správanie veľká a React sa spolieha na udalosť, ktorá spracuje vstup používateľa v reálnom čase.

vybraný

Ak chcete označiť ako vybraté, pozrite si namiesto toho hodnotu tejto možnosti v hodnote '. Podrobné pokyny nájdete v časti „Vybrať značku“.

Poznámka:

V maximálnych prípadoch názvy tried odkazujú na triedy definované v externom hárku štýlov CSS. Štýly sa používajú v aplikáciách React na pridávanie vypočítaných štýlov v čase vykresľovania. Atribút štýlu akceptuje objekt JavaScript s vlastnosťami ťavy namiesto reťazca CSS.

Vyhovuje v štýle DOM JavaScript vlastnosti, je efektívnejší a vyhýba sa XSS bezpečnostné diery.

Napríklad:

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

Všimnite si, že: štýly nemajú automatickú predponu. Na podporu starších prehliadačov musíme dodať vlastnosti štýlu:

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

Kľúče štýlu sú ťavie, aby zodpovedali prístupu k vlastnostiam v uzloch DOM z JS. Predpony poskytovateľa MS začínajú veľkým písmenom.

React automaticky pridá príponu 'px' k niektorým vlastnostiam štýlu vložených čísel. Ak chceme použiť iné jednotky ako 'px', zadajte hodnotu ako reťazec s požadovanou jednotkou.

rozdiel medzi večerou a večerou

napríklad:

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

Nie všetky vlastnosti štýlu sa však skonvertujú na reťazce pixelov.

Potlačiť upozornenie na upraviteľný obsah

Ak je prvok pre deti označený ako upraviteľný obsah, zobrazí sa varovanie, pretože nebude fungovať. Atribút potláča varovanie.

Upozornenie na potlačenie

Ak použijeme vykresľovanie React na strane servera, je to varovanie, keď server a klient vykresľujú odlišný obsah. V zriedkavých prípadoch je však ťažké zaručiť presnú zhodu. Očakáva sa napríklad, že časové pečiatky sa budú na serveri alebo klientovi líšiť.

Ak nastavíte varovanie potlačenia na hodnotu true, nebude upozorňovať na nesúlad medzi atribútmi a obsahom prvku.

Fungovalo to iba v hĺbke jednej úrovne a malo byť použité ako únik.

hodnotu

Atribút value je navrhnutý komponentmi a. Môžete ho použiť na nastavenie hodnoty komponentu.

Je užitočný pri výrobe kontrolovaných komponentov. defaultValue a rovná sa nezačiarknuté nastavujú hodnotu komponentu pri sériovej montáži.

Všetky podporované atribúty HTML

Podporované sú všetky vlastné a štandardné atribúty DOM.

React poskytuje v DOM API zamerané na JavaScript. A komponenty React často obsahujú vlastné a DOM súvisiace rekvizity a potom React používa rovnaké konvencie CamelCase ako DOM API:

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