Skutečný/prohlížeč DOM:

DOM znamená 'Objektový model dokumentu'. Jedná se o strukturovanou reprezentaci HTML na webové stránce nebo v aplikaci. Představuje celé uživatelské rozhraní (Uživatelské rozhraní) z webová aplikace jako stromová datová struktura.

Je to a strukturální reprezentace prvků HTML webové aplikace jednoduchými slovy.

Kdykoli dojde k jakékoli změně v stav uživatelského rozhraní aplikace, DOM je aktualizován a představuje změnu. DOM se vykresluje a manipuluje s každou změnou za účelem aktualizace uživatelského rozhraní aplikace, což ovlivňuje výkon a zpomaluje jej.

Proto s mnoha komponentami uživatelského rozhraní a složitou strukturou DOM, Aktualizace bude dražší, protože je třeba ji znovu vykreslit s každou změnou.

DOM je konstituován jako stromová datová struktura. Skládá se z uzlu pro každý z nich prvek uživatelského rozhraní přítomný ve webovém dokumentu.

bool na řetězec java

Aktualizace DOM:

Pokud víme něco o JavaScriptu, můžete vidět lidi používat 'getElementById()' nebo 'getElementByClass()' způsob úpravy obsahu DOM.

Kdykoli dojde ve stavu vaší aplikace k jakékoli změně, DOM se aktualizuje, aby odrážel změnu v uživatelském rozhraní.

Jak Virtual DOM zrychluje věci:

Když jsou do aplikace přidány nějaké nové věci, vytvoří se virtuální DOM reprezentovaný jako strom. Každý prvek v aplikaci je uzel ve stromu.

Kdykoli tedy dojde ke změně polohy prvku, vytvoří se nový virtuální DOM. Novější virtuální strom DOM je porovnán s nejnovějším, kde jsou změny zaznamenány.

Najde možný způsob, jak tyto změny provést pomocí skutečného DOM. Pak by se aktualizované prvky na stránce znovu vykreslily.

Jak virtuální DOM pomáhá v reakci:

Vše v Reactu je pozorováno jako komponenta, funkční komponenta a komponenta třídy. Komponenta má stav. Kdykoli něco změníme v souboru JSX, zjednodušeně řečeno, kdykoli se změní stav komponenty, reakce aktualizuje svůj virtuální strom DOM.

React udržuje pokaždé dva virtuální DOM. První obsahuje aktualizovaný virtuální DOM a druhý je předaktualizovanou verzí aktualizovaného virtuálního DOM. Porovná předaktualizovanou verzi aktualizovaného virtuálního DOM a zjistí, co se v DOM změnilo, například které komponenty budou změněny.

I když se to může zdát neefektivní, nestojí to nic víc, protože aktualizace virtuálního DOM nezabere mnoho času.

Při porovnávání aktuálního virtuálního stromu DOM s předchozím je známý jako 'vzdorovat'. Jakmile React ví, co se změnilo, aktualizuje objekty ve skutečném DOM. React používá k aktualizaci skutečného DOM dávkové aktualizace. Změny skutečného DOM se odesílají v dávkách, místo aby se zasílaly aktualizace pro jednu změnu stavu komponenty.

Opětovné vykreslování uživatelského rozhraní je nejdražší část a React to zvládá nejúčinněji tím, že zajišťuje Real DOM, který obdrží dávkové aktualizace pro opětovné vykreslení uživatelského rozhraní. Zavolá se proces převodu změn na skutečný DOM smíření.

Zlepšuje výkon a je hlavním důvodem, proč vývojáři milují reakci a její virtuální DOM.

Co je virtuální DOM Reactu?

Koncept virtuálního DOM přichází, aby byl výkon Real DOM lepší a rychlejší. Virtuální DOM je virtuální symbol DOM.

Ale hlavní rozdíl je v tom, že pokaždé, s každou změnou, se aktualizuje virtuální DOM místo skutečného DOM.

Například, nemovitý a virtuální DOM je reprezentován jako a stromová struktura. Každý prvek ve stromu je uzel. A uzel se do stromu přidá, když je do uživatelského rozhraní aplikace přidána nová položka.

Pokud se změní poloha jakýchkoli prvků, a Nový je vytvořen virtuální strom DOM. Virtuální DOM vypočítá minimální počet operací na skutečném DOM, abyste provedli změny ve skutečném DOM. Je efektivní a funguje lépe, protože snižuje náklady a provoz na opětovné vykreslování celého skutečného DOM.

Nyní již běžně rozumíme reálnému a virtuálnímu DOM.

Podívejme se jak Reagovat funguje pomocí Virtuální DOM.

• Každé uživatelské rozhraní je individuální komponent, a každá součástka má svůj stav.
• Reagovat následuje pozorovatelné vzory a pozoruje změny stavů.
• Kdykoli dojde ke změně stavu součásti, Reagujte aktualizuje virtuální strom DOM ale nemění to skutečný strom DOM.
• Reagovat srovnává a současná verze z virtuální DOM s předchozí verze po aktualizace.
• React ví, které objekty jsou změněny v virtuální DOM. Nahrazuje objekty v skutečný DOM , vedoucí k minimální manipulace operace.
• Tento proces je známý jako 'diferenciace'. Tento obrázek objasní koncept.

Na obrázku je tmavě modrá kruhy jsou uzly které byly změněny. The Stát z těchto komponent se změnil. React vypočítá rozdíl mezi předchozí a aktuální verzí virtuální strom DOM, a celý nadřazený podstrom se znovu vykreslí, aby se zobrazilo uživatelské rozhraní, které se změnilo.

Aktualizovaný strom je dávka aktualizována (že aktualizace skutečného DOM jsou odesílány v dávkách namísto odesílání aktualizací pro každou změnu stavu.) do skutečného DOM.

Abychom se do toho dostali hlouběji, potřebujeme vědět o Reagovat na render () funkce.

Pak potřebujeme vědět o některých důležitých věcech funkce společnosti React.

JSX

JSX znamená JavaScript XML. Je to a rozšíření syntaxe z JS. Pomocí JSX můžeme psát HTML struktury v souboru, který obsahuje JavaScript kód.

Komponenty

Komponenty jsou nezávislý a znovu použitelný kódu. Každé uživatelské rozhraní v aplikaci React je součástí. Jedna aplikace má mnoho komponenty.

Komponenty jsou dvou typů, komponenty třídy a funkční komponenty.

Komponenty třídy jsou stavové, protože používají svůj „stav“ ke změně uživatelského rozhraní. Funkční komponenty jsou bezstavové komponenty. Fungují jako funkce JavaScriptu, která přebírá libovolný parametr zvaný 'props'.

Reagovat Hooks byly zavedeny pro přístup ke stavům s funkčními součástmi.

Metody životního cyklu

Metody životního cyklu jsou důležité metody vestavěný reagovat, které působí na komponenty po dobu jejich trvání v DOM. Každá součást Reactu prošla životním cyklem událostí.

Maximálně se používá metoda render(). metoda životního cyklu .

Je to jediná metoda uvnitř Komponenty třídy React . V každé třídě se tedy volá komponenta render().

Metoda render (). zpracovává vykreslení komponenty pomocí uživatelského rozhraní. Vykreslení () obsahuje veškerou logiku zobrazenou na obrazovce. Může mít také a nula hodnotu, pokud nechceme nic zobrazovat na displeji.

Příklad je uveden níže:

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

Příklad ukáže JSX napsané v render().

Když Stát nebo podpěra je aktualizován v rámci komponenty, poskytnout() vrátí jiný strom prvků React.

vymazat mezipaměť npm

Při psaní kódu v konzole nebo souboru JavaScript se stanou tyto:

• Prohlížeč analyzuje kód HTML, aby našel uzel s ID.
• Odebere podřízený prvek prvku.
• Aktualizuje prvek (DOM) s 'aktualizovaná hodnota'.
• Přepočítává se CSS pro nadřazené a podřízené uzly.
• Poté aktualizujte rozvržení.

Nakonec projděte strom na obrazovce.

Takže jak víme, že aktualizace DOM zahrnuje změnu obsahu. Je k tomu více připoutaný.

Složité algoritmy se podílejí na přepočítávání CSS a změně rozložení, které ovlivňují výkon.

Takže React má mnoho způsobů, jak se s tím vypořádat, protože používá něco známého jako virtuální DOM.

reaktdome

Balíček react-dom poskytuje metody specifické pro DOM na nejvyšší úrovni aplikace pro únikovou cestu z modelu React v případě potřeby.

 import * as ReactDOM from 'react-dom'; 

Pokud používáte ES5 s npm, měli byste také napsat:

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

The reagovat-dom balíček také poskytuje moduly specifické pro klientské a serverové aplikace:

• reagovat-dom/klient
• reagovat-dom/server

Balíček reakce-dom exportuje tyto metody:

• createPortal()
• flushSync()

Exportují se také metody reakce-domu:

• poskytnout ()
• hydratovat ()
• findDOMNode()
• unmountComponentAtNode ()

Poznámka: Hydratace i omítky byly nahrazeny novějšími klientskými metodami.

Podpora prohlížeče

React podporuje všechny moderní prohlížeče a pro starší verze jsou vyžadovány některé polyfilly.

Poznámka: Nemůžeme podporovat starší prohlížeče, které nepodporují metody ES5, Like, Internet Explorer. Můžete zjistit, že aplikace fungují v nejnovějších prohlížečích, pokud jsou součástí stránky polyfilly jako es5-shim a es5-sham, ale pokud se vydáte cestou, budete na to sami.

Odkaz

createPortal()

Creates Portal () Portal poskytuje způsob, jak načíst děti do uzlu DOM, který existuje mimo hodnocení komponenty DOM.

flushSync()

Vynutit aktualizace React v poskytnutém zpětném volání současně. Zajišťuje okamžitou aktualizaci DOM.

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

Poznámka:

• Používejte střídmě. Flush Sync výrazně snižuje výkon.
• FlushSync vynutí nevyřízené hranice, aby se zobrazil nouzový stav.
• Spouští čekající efekty a současně aplikuje aktualizace, než je vrátí.
• flushSync flush aktualizace mimo zpětné volání k vyprázdnění aktualizací zpětného volání. Například, pokud existují nějaké nevyřízené aktualizace z kliknutí, React je může vyprázdnit před vyprázdněním aktualizací při zpětném volání.

Odkaz na starší verzi

poskytnout()

 render(element, container[, callback]) 

Poznámka: Render je nahrazen vytvořením Root v Reactu. Vykreslete prvek React do DOM v dodaném kontejneru a vraťte odkaz na komponentu.

Pokud by byl prvek React dříve vykreslen do libovolného kontejneru, provedl by na něm aktualizaci a je nutné reflektovat nejnovější prvek React.

Provede se při vykreslení komponenty, pokud je poskytnuto volitelné zpětné volání.

Poznámka:

Metoda Render () řídí obsah uzlu kontejneru, když prochází kolem. Jakýkoli existující prvek DOM je nahrazen.

Render () nemění uzel kontejneru (může pouze upravit potomky kontejneru). Může být možné vložit komponentu do existujícího uzlu DOM bez přepsání podřízených prvků.

Render () aktuálně zpětný odkaz na kořenovou instanci ReactComponent.

Jeho návratová hodnota je však zděděna a lze se jí vyhnout, protože v některých případech mohou budoucí verze Reactu generovat komponenty asynchronně.

Pokud potřebujete odkaz na prototyp ReactComponent, nejlepším řešením je připojit odkaz na stažení prvku.

Render () se používá k hydrataci vykresleného kontejneru na server je zastaralý. Použití hydrateRoot() místo toho.

hydrát()

hydrát je nahrazen hydrátovým kořenem.

Je to přesně jako render(), ale používá se pro kontejner, jehož obsah HTML vykresluje ReactDOMServer. React se pokusí připojit posluchače událostí k aktuálnímu označení.

 hydrate(element, container[, callback]) 

Poznámka:

nit.zničit

React očekává, že vykreslený obsah bude mezi serverem a klientem identický. Můžeme opravit obsah textu, ale nesrovnalosti musíme považovat za chyby a opravit je. Ve vývojovém režimu React upozorňuje na nekonzistenci během hydratace.

Neexistuje žádná záruka, že konkrétní rozdíly budou opraveny o nesrovnalosti.

Ve většině aplikací je to důležité z důvodů výkonu a ověření všech příznaků bude příliš drahé.

Předpokládejme, že atribut prvku nebo textový obsah se mezi serverem a klientem nevyhnutelně liší (např. časové razítko ). V tomto případě můžeme upozornění ztišit přidáním potlačitHydrationWarning = {true} k prvku.

Pokud se nejedná o textový prvek, nemůže se jej pokusit opravit, takže může zůstat nekonzistentní až do budoucích aktualizací.

Dvouprůchodové vykreslování můžete provést, pokud potřebujeme záměrně poskytnout rozdíl na serveru a klientovi. Komponenty ponechané na klientovi mohou číst stavové proměnné jako this.state.isClient, kde se nastaví na hodnotu true v komponentDidMount().

Počáteční vykreslovací průchod bude dělat totéž jako server, čímž se vyhne nesrovnalostem, ale další průchod bude proveden synchronně po hydrataci.

Poznámka: Tento přístup zpomalí komponenty, protože to dělají dvakrát, takže jej používejte opatrně.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Poznámka:

unmountComponentAtNode bylo nahrazeno root.unmount() v Reactu. Vymaže připojenou komponentu React z DOM a vyčistí její ovladače událostí a stav.

Pokud ke kontejneru nebyla namontována žádná součást, nemůže nic dělat. Vrátí hodnotu true, pokud není připojena žádná komponenta, a hodnotu false, pokud není žádná komponenta k odpojení.

findDOMNode()

Poznámka: findDOMNode je únikový poklop používaný pro přístup k podkladovému uzlu DOM. Tento únikový poklop se ve většině případů nedoporučuje, protože proniká do abstrakce komponent. V StrictMode byla zastaralá.

findDOMNode(komponenta)

Pokud byla tato komponenta připojena k DOM, vrátí se odpovídající nativní prvek DOM prohlížeče. Tato metoda je užitečná pro čtení hodnot z DOM, jako jsou hodnoty pole formuláře, a provádění měření DOM. Ve většině případů můžete připojit odkaz na uzel DOM a vyhnout se použití findDOMNode.

Když komponenta vrátí hodnotu null nebo false, funkce findDOMNode vrátí hodnotu null. Když je komponenta vykreslena do řetězce, findDOMNode vrátí textový uzel DOM obsahující tuto hodnotu. Komponenta může vrátit fragment s více potomky v případě, že findDOMNode vrátil uzel DOM odpovídající prvnímu neprázdnému potomkovi.

Poznámka:

findDOMNode funguje pouze na připojených komponentách (tj. komponentách, které byly umístěny v DOM). Pokud se pokusíte toto zavolat na komponentě, která ještě nebyla připojena (například volání findDOMNode() na render() na komponentě, která ještě nebyla vytvořena), bude vyvolána výjimka.

findDOMNode nelze použít ve funkčních komponentách.

prvky DOM

React implementuje systém DOM nezávislý na prohlížeči pro výkon a s kompatibilitou mezi různými prohlížeči. Využili jsme této příležitosti, abychom vyčistili některé hrubé hrany v implementaci DOM prohlížeče.

V Reactu musí být všechny vlastnosti a atributy DOM (včetně obslužných rutin událostí) typu camelcase. Například HTML atribut tabindex odpovídá atributu tab Index v React.

Výjimkou jsou atributy aria-* a data-*, které musí být malé. Například můžete mít značku oblasti jako značku oblasti.

Rozdíly v atributech

Několik atributů bude mezi React a HTML fungovat odlišně:

kontrolovány

Atribut zaškrtnuto je podporován komponentami zaškrtávacího políčka nebo rádia typu . Je užitečný pro výrobu řízených součástí. Toto můžete použít k určení, zda je komponenta zaškrtnuta nebo ne.

DefaultChecked je nezaškrtnutý protějšek, který určuje, že komponenta je zkontrolována při prvním připojení.

0,06 jako zlomek

jméno třídy

Chcete-li zadat třídu CSS, použijte atribut className. Platí pro všechny běžné prvky DOM a SVG, jako je , , atd.

Pokud používáte React with Web Components (neobvyklé), použijte místo toho atribut class.

nebezpečněSetInnerHTML

Nebezpečně SetInnerHTML je náhrada Reactu za používání innerHTML v prohlížeči DOM. Konfigurace HTML kódu je riskantní, protože je snadné vystavit uživatele útoku cross-site scripting (XSS).

Můžeme tedy nastavit HTML přímo z Reactu, ale musíte nebezpečně napsat SetInnerHTML a předat objekt s klíčem __html, abyste si zapamatovali, že je to nebezpečné.

Například:

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

Prvky React místo toho používají htmlFor, protože for je vyhrazené slovo v JavaScriptu.

při změně

Událost onChange se chová podle očekávání; událost se spustí při každé změně pole formuláře.

Záměrně nepoužíváme stávající chování prohlížeče, protože změna je velká pro jeho chování a React spoléhá na událost, která zpracuje uživatelský vstup v reálném čase.

vybraný

Pokud chcete označit položku jako vybranou, použijte místo toho hodnotu této možnosti v hodnotě '. Podrobné pokyny naleznete v části „Vybrat značku“.

Poznámka:

V maximálních případech názvy tříd odkazují na třídy definované v externí šabloně stylů CSS. Styly se v aplikacích React používají k přidání vypočítaných stylů v době vykreslování. Atribut style přijímá objekt JavaScript s vlastnostmi camel namísto řetězce CSS.

Vyhovuje to ve stylu DOM JavaScript vlastnosti, je efektivnější a vyhýbá se XSS bezpečnostní otvory.

Například:

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

Všimněte si, že: styly nemají automatickou předponu. Abychom podporovali starší prohlížeče, musíme dodat vlastnosti stylu:

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

Klíče stylu jsou velbloudí, aby odpovídaly přístupu k vlastnostem na uzlech DOM z JS. Předpony poskytovatele MS začínají velkým písmenem.

React automaticky přidá příponu 'px' k některým vlastnostem stylu inline čísel. Pokud chceme použít jiné jednotky než 'px', zadejte hodnotu jako řetězec s požadovanou jednotkou.

například:

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

Ne všechny vlastnosti stylu jsou však převedeny na řetězce pixelů.

Potlačit upozornění na upravitelný obsah

Pokud je prvek pro děti označen jako upravitelný obsah, zobrazí se varování, protože nebude fungovat. Atribut potlačí varování.

Upozornění na potlačení

Pokud použijeme vykreslování React na straně serveru, je to varování, když se server a klient vykreslují s odlišným obsahem. Ve vzácných případech je však obtížné zaručit přesnou shodu. Očekává se například, že se časová razítka na serveru nebo na klientovi budou lišit.

Pokud nastavíte varování potlačení na hodnotu true, nebude upozorňovat na neshody mezi atributy a obsahem prvku.

Fungoval pouze v hloubce jedné úrovně a měl být použit jako únik.

hodnota

Atribut value je navržen pomocí komponent a. Můžete jej použít k nastavení hodnoty komponenty.

Je užitečný pro výrobu řízených součástí. defaultValue a rovno nezaškrtnuté nastaví hodnotu komponenty při sériové montáži.

Všechny podporované atributy HTML

Jsou podporovány všechny vlastní a standardní atributy DOM.

React poskytl v DOM API zaměřené na JavaScript. Komponenty Reactu často obsahují vlastní a DOM související rekvizity, a pak React používá stejné konvence CamelCase jako DOM API:

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