TechCodeview

Valódi/böngésző DOM:

A DOM jelentése „Dokumentumobjektum-modell”. Ez a HTML strukturált ábrázolása a weboldalon vagy az alkalmazásban. A teljes felhasználói felületet képviseli (Felhasználói felület) a webalkalmazás, mint a fa adatstruktúra.

Ez egy HTML elemek szerkezeti ábrázolása egy webes alkalmazás egyszerű szavakkal.

Amikor bármilyen változás történik a az alkalmazás felhasználói felületének állapota, A DOM frissül, és a változást jelzi. A DOM-ot az alkalmazás felhasználói felületének frissítése során minden változtatással előállítják és manipulálják, ami befolyásolja a teljesítményt és lelassítja azt.

Ezért sok UI összetevővel és összetett szerkezetével DOM, A frissítés drágábban fog megtörténni, mivel minden változtatásnál újra kell renderelni.

A DOM fa adatstruktúraként épül fel. Mindegyik csomópontból áll UI elem jelen van a webdokumentumban.

html listbox

A DOM frissítése:

Ha ismerünk valamit a JavaScriptről, láthatjuk, hogy az emberek használják a 'getElementById()' vagy 'getElementByClass()' módszer a DOM tartalmának módosítására.

Amikor bármilyen változás történik az alkalmazás állapotában, a DOM frissítésre kerül, hogy tükrözze a felhasználói felület változását.

Hogyan gyorsítja fel a dolgokat a Virtuális DOM:

Amikor bármilyen új dolgot hozzáadunk az alkalmazáshoz, a virtuális DOM jön létre, egy faként ábrázolva. Az alkalmazás minden eleme egy csomópont a fában.

Ezért amikor egy elem pozíciója megváltozik, egy új virtuális DOM jön létre. Az újabb virtuális DOM-fát összehasonlítjuk a legújabbal, ahol a változásokat feljegyezzük.

Megtalálja a lehetséges módot ezeknek a változtatásoknak a tényleges DOM általi végrehajtására. Ezután a frissített elemek újra megjelennek az oldalon.

Hogyan segít a virtuális DOM a reakcióban:

A Reactban minden komponensként, funkcionális komponensként és osztálykomponensként figyelhető meg. Egy összetevőnek van állapota. Valahányszor módosítunk valamit a JSX fájlban, egyszerűen fogalmazva, amikor az összetevő állapota megváltozik, a react frissíti a virtuális DOM-fáját.

A React minden alkalommal két virtuális DOM-ot tart fenn. Az első a frissített virtuális DOM-ot tartalmazza, a másik pedig a frissített virtuális DOM előre frissített változata. Összehasonlítja a frissített virtuális DOM előre frissített verzióját, és megkeresi, hogy mi változott a DOM-ban, például mely összetevők módosulnak.

Bár hatástalannak tűnhet, a költség nem több, mivel a virtuális DOM frissítése nem tarthat sok időt.

Ha az aktuális virtuális DOM-fát az előzővel hasonlítjuk össze, az úgynevezett 'dacolva'. Amint a React tudja, hogy mi változott, frissíti az objektumokat a tényleges DOM-ban. A React kötegelt frissítéseket használ a tényleges DOM frissítéséhez. A tényleges DOM módosításait kötegekben küldi el a rendszer, ahelyett, hogy az összetevő állapotának egyetlen módosításához bármilyen frissítést küldene.

A felhasználói felület újramegjelenítése a legdrágább rész, és a React úgy tudja a leghatékonyabban csinálni, hogy biztosítja a Real DOM-ot, amely megkapja a kötegelt frissítéseket a felhasználói felület újbóli megjelenítéséhez. A változtatások tényleges DOM-má való konvertálásának folyamatát hívják egyeztetés.

Ez javítja a teljesítményt, és ez a fő oka annak, hogy a fejlesztők szeretik a reagálást és a virtuális DOM-ot.

Mi az a React virtuális DOM-ja?

A Virtual DOM koncepciója a Real DOM teljesítményét jobbá és gyorsabbá teszi. A Virtual DOM a DOM virtuális szimbóluma.

De a fő különbség az, hogy minden alkalommal, minden változtatásnál a virtuális DOM frissül a tényleges DOM helyett.

Például a igazi és virtuális DOM mint a fa szerkezet. A fa minden eleme egy csomópont. A csomópont hozzáadódik a fához, amikor új elemet adnak hozzá az alkalmazás felhasználói felületéhez.

Ha bármely elem helyzete megváltozik, a új virtuális DOM fa jön létre. A virtuális DOM kiszámítja a műveletek minimális számát a valódi DOM-on, hogy módosítsa a valódi DOM-ot. Hatékony és jobban teljesít azáltal, hogy csökkenti a teljes valódi DOM újrarenderelésének költségeit és működését.

Most már normálisan értjük a valós és virtuális DOM-ot.

Nézzük, hogyan Reagál használatával működik Virtuális DOM.

• Minden felhasználói felület egyéni összetevő, és minden összetevőnek megvan a maga állapota.
• A reakció következik megfigyelhető minták és megfigyeli az állapotok változásait.
• Ha bármilyen változás történik az összetevő állapotában, React frissíti a virtuális DOM-fát de nem változtat a tényleges DOM fa.
• Reagál összehasonlítja a jelenlegi verzió a virtuális DOM a ... val előző verzió után frissítése.
• A React tudja, hogy mely objektumok módosultak a virtuális DOM. Lecseréli az objektumokat a tényleges DOM , v.hová vezet minimális manipuláció tevékenységek.
• Ez a folyamat az úgynevezett 'különbségtétel'. Ez a kép világossá teszi a koncepciót.

A képen a sötétkék körökben vannak a csomópontok amelyek megváltoztak. A állapot ezen összetevők megváltoztak. A React kiszámítja a különbséget az előző és a jelenlegi verzió között virtuális DOM fa, és a teljes szülő-alfa újra megjelenik, hogy megmutassa a megváltozott felhasználói felületet.

A frissített fa az köteg frissítve (hogy a valódi DOM frissítéseit kötegekben küldi el, ahelyett, hogy minden állapotváltozáshoz küldenének frissítéseket.) a valódi DOM-ra.

Ahhoz, hogy ebbe mélyebben belemerüljünk, tudnunk kell a React render () funkció.

Ezután tudnunk kell néhány fontos dologról jellemzők a React.

JSX

JSX jelentése JavaScript XML. Ez egy szintaxis kiterjesztése a JS. JSX használatával tudunk írni HTML struktúrák abban a fájlban, amely tartalmazza JavaScript kód.

Alkatrészek

A komponensek független és újrafelhasználható kódból. A React alkalmazás minden felhasználói felülete egy összetevő. Egyetlen alkalmazásban sok van alkatrészek.

Az alkatrész kétféle, osztályú összetevők és funkcionális alkatrészek.

Az osztályösszetevők állapotfüggőek, mert az „állapotukat” használják a felhasználói felület megváltoztatására. A funkcionális komponensek állapot nélküli komponensek. Úgy működnek, mint egy JavaScript-függvény, amely egy tetszőleges „props” paramétert vesz fel.

React Hooks bevezették a funkcionális komponensekkel rendelkező állapotokhoz.

Életciklus-módszerek

Életciklus módszerek fontos módszerek beépített reagálni, amelyek a DOM-ban eltöltött időtartamuk alatt működnek a komponenseken. A React minden egyes összetevője az események életciklusa mentén haladt.

A render() metódus a maximálisan használt életciklus módszer .

Ez az egyetlen módszer belül React osztály komponensek . Tehát minden osztályban a render() komponens meghívódik.

A render () metódus kezeli az összetevő felhasználói felület általi megjelenítését. A render () tartalmazza a képernyőn megjelenő összes logikát. Lehet benne a nulla értéket, ha nem akarunk semmit megjeleníteni.

A példa az alábbiakban látható:

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

A példa megmutatja a JSX a render()-ben írva.

Amikor a állapot vagy támaszt az összetevőn belül frissül, Vakol() egy másik React elemek fát ad vissza.

Amikor a kódot a konzolba vagy a JavaScript fájlba írja, a következők történnek:

• A böngésző elemzi a HTML-t, hogy megtalálja az azonosítóval rendelkező csomópontot.
• Eltávolítja az elem gyermek elemét.
• Frissíti az elemet (DOM) a ... val 'frissített érték'.
• Újraszámolja CSS szülő és gyermek csomópontokhoz.
• Ezután frissítse az elrendezést.

Végül menjen át a fán a képernyőn.

Tehát mint tudjuk, hogy a frissítés a DOM magában foglalja a tartalom megváltoztatását. Inkább kötődik hozzá.

Összetett algoritmusok vesznek részt a CSS újraszámításában és az elrendezések megváltoztatásában, ami befolyásolja a teljesítményt.

Tehát a React számos módon kezeli ezt, mivel virtuális DOM-ot használ.

reactdome

A react-dom csomag DOM-specifikus módszereket biztosít az alkalmazás legfelső szintjén, hogy szükség esetén elkerülje a React modellt.

 import * as ReactDOM from 'react-dom'; 

Ha az ES5-öt npm-mel használja, akkor azt is írja be:

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

A react-dom A csomag az ügyfél- és kiszolgálóalkalmazásokhoz specifikus modulokat is tartalmaz:

• react-dom/kliens
• react-dom/server

A react-dom csomag exportálja ezeket a metódusokat:

• CreatePortal()
• flushSync()

A react-dom metódusok is exportálódnak:

• Vakol ()
• hidratál ()
• findDOMNode()
• unmountComponentAtNode ()

Megjegyzés: A hidratálást és a renderelést is újabb kliensmódszerekre cserélték.

Böngésző támogatás

A React támogatja az összes modern böngészőt, és néhány polifill szükséges a régebbi verziókhoz.

Megjegyzés: Nem tudunk támogatni olyan régebbi böngészőket, amelyek nem támogatják az ES5-módszereket, például az Internet Explorert. Megállapíthatja, hogy az alkalmazások működnek a legújabb böngészőkben, ha az oldalon található polifill-ek, például az es5-shim és az es5-sham, de egyedül marad, ha ezt az utat választja.

Referencia

CreatePortal()

Portált hoz létre () A portál lehetőséget biztosít a gyerekek beolvasására a DOM-csomópontba, amely a DOM-komponens rangsorán kívül található.

kijelölés rendezés java

flushSync()

Egyidejűleg kényszerítse a frissítéseket a megadott visszahívásban. Ez biztosítja a DOM azonnali frissítését.

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

Jegyzet:

• Használd takarékosan. A Flush Sync jelentősen rontotta a teljesítményt.
• A FlushSync a függőben lévő határokat a tartalék állapot megjelenítésére kényszeríti.
• Függőben lévő effektusokat futtat, és egyidejűleg alkalmazza a frissítéseket, mielőtt visszaküldi.
• flushSync öblítse ki a frissítéseket a visszahíváson kívül a frissítések visszahívásához. Például, ha egy kattintásból függőben lévő frissítések vannak, a React kiürítheti azt, mielőtt a visszahíváskor kiüríti a frissítéseket.

Legacy Reference

Vakol()

 render(element, container[, callback]) 

Megjegyzés: A render helyett a Root létrehozása lép a React alkalmazásban. Rendeljen meg egy React elemet a DOM-ban a mellékelt tárolóban, és fizessen vissza egy hivatkozást az összetevőre.

Ha egy React elemet korábban bármilyen tárolóba rendereltek, akkor az frissítést hajt végre rajta, és szükséges, hogy tükrözze a legújabb React elemet.

Akkor kerül végrehajtásra, amikor a komponens renderelésre kerül, ha az opcionális visszahívás biztosított.

Jegyzet:

A render () metódus szabályozza a konténercsomópont tartalmát, amikor az elhalad mellette. Minden létező DOM elem lecserélésre kerül.

A render () nem módosítja a tároló csomópontját (csak a tároló gyermekeit módosíthatja). Lehetséges lehet egy komponens beszúrása egy meglévő DOM-csomópontba a gyermekelemek felülírása nélkül.

Renderelje le () jelenleg a ReactComponent gyökérpéldányára való hivatkozás.

A visszatérési értéke azonban öröklődik, és elkerülhető, mivel bizonyos esetekben a React jövőbeli verziói aszinkron módon generálhatnak összetevőket.

Ha hivatkozásra van szüksége a ReactComponent prototípusra, a legjobb megoldás az, ha visszahívási hivatkozást csatol az elemhez.

A render () a renderelt tároló kiszolgálóra való hidratálására szolgál, elavult. Használat hydrateRoot() helyette.

hidrát()

hidrátot a hidrát gyökérre cseréljük.

Pontosan olyan, mint a render(), de olyan tárolóhoz használják, amelynek HTML-tartalmát a ReactDOMServer jeleníti meg. A React megpróbálja összekapcsolni az eseményfigyelőket az aktuális jelöléssel.

 hydrate(element, container[, callback]) 

Jegyzet:

A React elvárja, hogy a megjelenített tartalom azonos legyen a szerver és az ügyfél között. A szöveg tartalmát kijavíthatjuk, de a következetlenségeket hibaként kell kezelnünk, és ki kell javítanunk. Fejlesztési módban a React figyelmeztet a hidratálás közbeni következetlenségre.

Nincs garancia arra, hogy a konkrét eltéréseket az eltérések miatt korrigálják.

A legtöbb alkalmazásban teljesítmény okokból fontos, és túl költséges lesz az összes jelző érvényesítése.

Tegyük fel, hogy egy elem attribútuma vagy szövegtartalma elkerülhetetlenül különbözik a szerver és a kliens között (például az időbélyeg ). Ebben az esetben hozzáadásával elnémíthatjuk a riasztást suppressHydrationWarning = {igaz} az elemhez.

Ha nem szöveges elem, akkor nem próbálhatja meg javítani, így a jövőbeli frissítésekig inkonzisztens maradhat.

Akkor hajthat végre kétmenetes renderelést, ha szándékosan mást kell megadnunk a szerveren és az ügyfélen. A kliensen hagyott összetevők olyan állapotváltozókat tudnak olvasni, mint a this.state.isClient, ahol igaz értékre lesz állítva komponentDidMount().

A kezdeti renderelés ugyanazt fogja csinálni, mint a szerver, elkerülve az inkonzisztenciákat, de a további átadás szinkronban történik a hidratálás után.

Megjegyzés: Ez a megközelítés lelassítja az összetevőket, mivel kétszer csinálják, ezért óvatosan használja.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Jegyzet:

unmountComponentAtNode -re cserélték root.unmount() a Reactban. Törli a csatlakoztatott React komponenst a DOM-ból, és megtisztítja annak eseménykezelőit és állapotát.

Ha semmilyen alkatrészt nem szereltek fel a konténerre, az nem tud semmit tenni. Igazat ad vissza, ha nincs komponens csatlakoztatva, és false értéket, ha nincs leválasztható összetevő.

findDOMNode()

Megjegyzés: A findDOMNode egy menekülési sraffozás, amely az alapul szolgáló DOM-csomópont eléréséhez használható. Ez a menekülési nyílás a legtöbb esetben nem ajánlott, mert átüti az absztrakciót. StrictMode-ban elavult.

FindDOMNode(komponens)

Ha ez az összetevő a DOM-hoz lett csatlakoztatva, akkor ez a megfelelő natív böngésző DOM-elemet adja vissza. Ez a módszer hasznos értékek DOM-ból való kiolvasására, például űrlapmezők értékeire, és DOM-mérések végrehajtására. A legtöbb esetben hivatkozást csatolhat a DOM csomópontra, és elkerülheti a findDOMNode használatát.

Ha egy összetevő nullát vagy false értéket ad vissza, a findDOMNode nullát ad vissza. Amikor egy összetevőt karakterláncként jelenít meg, a findDOMNode egy szöveges DOM-csomópontot ad vissza, amely tartalmazza az értéket. A komponens visszaadhat egy töredéket több gyermekkel, ha a findDOMNode visszaadta az első nem üres utód DOM csomópontját.

Jegyzet:

magyarázza az adatfüggetlenséget

A findDOMNode csak a csatlakoztatott összetevőkön működik (vagyis a DOM-ban elhelyezett komponenseken). Ha megpróbálja ezt egy olyan komponensen meghívni, amely még nem lett felcsatolva (például a findDOMNode() függvényt a render()-en egy olyan komponensen, amely még nem jött létre), kivételt dob ​​a rendszer.

A findDOMNode nem használható függvénykomponensekben.

DOM elemek

A React böngészőtől független DOM-rendszert valósít meg a teljesítmény és a böngészők közötti kompatibilitás érdekében. Megragadjuk az alkalmat, hogy megtisztítsuk a böngésző DOM-megvalósításának néhány durva élét.

A React alkalmazásban az összes DOM-tulajdonságnak és attribútumnak (beleértve az eseménykezelőket is) camelcase-nek kell lennie. Például a HTML tabindex attribútum megfelel a React lap Index attribútumának.

Ez alól kivételt képeznek az aria-* és data-* attribútumok, amelyeknek kisbetűknek kell lenniük. Például területcímkeként megadhat egy területcímkét.

Különbségek az attribútumokban

Számos attribútum eltérően működik a React és a HTML között:

ellenőrizve

A bejelölt attribútumot egy jelölőnégyzet vagy rádió típusú komponensek támogatják. Ellenőrzött alkatrészek gyártásához hasznos. Ezzel meghatározhatja, hogy az összetevő be van-e jelölve vagy sem.

json a json példában

A DefaultChecked a nem bejelölt megfelelője, amely meghatározza, hogy az összetevőt az első felcsatoláskor ellenőrzik.

osztály név

A CSS-osztály megadásához használja a className attribútumot. Minden szokásos DOM és SVG elemre vonatkozik, mint pl. stb.

Ha a React with Web Components funkciót használja (nem gyakori), használja helyette a class attribútumot.

veszélyesenSetInnerHTML

A Dangerously SetInnerHTML a React helyettesíti az innerHTML használatát a DOM böngészőben. A HTML-kód konfigurálása kockázatos, mert könnyen ki lehet tenni a felhasználókat a cross-site scripting (XSS) támadásoknak.

Tehát beállíthatjuk a HTML-t közvetlenül a Reactból, de veszélyesen be kell írnia a SetInnerHTML-t, és át kell adnia egy objektumot a __html kulccsal, hogy ne felejtse el, hogy veszélyes.

Például:

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

A React elemek helyett a htmlFor szót használják, a Since for pedig egy fenntartott szó a JavaScriptben.

onChange

Az onChange esemény a várt módon működik; az esemény minden alkalommal aktiválódik, amikor egy űrlapmező megváltozik.

Szándékosan nem használjuk a böngésző meglévő viselkedését, mert a változás nagy hatással van a viselkedésére, és a React az eseményre támaszkodik, hogy valós időben kezelje a felhasználói bevitelt.

kiválasztott

Ha kiválasztottként szeretné megjelölni a lehetőséget, tekintse meg az opció értékét az értékben. A részletes útmutatásért lásd a „Címke kiválasztása” részt.

Jegyzet:

Maximum esetekben az osztálynevek egy külső CSS-stíluslapon meghatározott osztályokra utalnak. A React alkalmazások stílusokat használnak kiszámított stílusok hozzáadásához a megjelenítési időben. A style attribútum a CSS-karakterlánc helyett a Camel tulajdonságokkal rendelkező JavaScript objektumot fogadja el.

Megfelel DOM-stílusú JavaScript tulajdonságait, hatékonyabb, és elkerüli XSS biztonsági lyukak.

Például:

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

Ne feledje, hogy a stílusok nincsenek automatikusan előtagozva. A régebbi böngészők támogatásához meg kell adnunk stílustulajdonságokat:

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

A stíluskulcsok teve, hogy megfeleljenek a DOM csomópontok tulajdonságainak a JS-n belüli elérésének. Az MS szolgáltatói előtagjai nagybetűvel kezdődnek.

A React automatikusan „px” utótagot ad néhány soron belüli számstílus-tulajdonsághoz. Ha a 'px'-től eltérő mértékegységeket szeretnénk használni, akkor az értéket karakterláncként adjuk meg a kívánt mértékegységgel.

például:

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

Azonban nem minden stílustulajdonság konvertálódik pixel karakterláncokká.

Szerkeszthető tartalomra vonatkozó figyelmeztetés letiltása

Figyelmeztetés jelenik meg, ha egy gyermekeknek szóló elem szerkeszthető tartalomként van megjelölve, mivel az nem fog működni. Az attribútum elnyomja a figyelmeztetést.

Elnyomás figyelmeztetés

Ha szerveroldali React renderinget használunk, akkor ez figyelmeztetés, ha a szerver és a kliens eltérő tartalommal jelenít meg. Ritka esetekben azonban nehéz garantálni a pontos egyezést. Például az időbélyegek várhatóan különböznek a kiszolgálón vagy a kliensen.

Ha az elnyomási figyelmeztetést igazra állítja, akkor nem fog figyelmeztetni az attribútumok és az elem tartalma közötti eltérésekre.

Csak egy szintmélységben működött, és menekülésre szánták.

érték

Az érték attribútumot a , és összetevők határozzák meg. Használhatja az összetevő értékének beállítására.

Ellenőrzött alkatrészek gyártásához hasznos. defaultValue és egyenlő a nem bejelölt értékkel állítja be az összetevő értékét soros csatlakoztatáskor.

Minden támogatott HTML attribútum

Bármilyen egyéni és szabványos DOM attribútum támogatott.

A React JavaScript-központú API-t biztosított a DOM-ban. A React összetevői pedig gyakran tartalmaznak egyéni és DOM-mal kapcsolatos kellékeket, majd a React ugyanazokat a CamelCase-konvenciókat használja, mint a DOM API:

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