Real/Browser DOM:

DOM står för 'Dokumentobjektmodell'. Det är en strukturerad representation av HTML i webbsidan eller applikationen. Det representerar hela användargränssnittet (Användargränssnitt) av webbapplikation som träddatastrukturen.

Det är en strukturell representation av HTML-element av en webbapplikation i enkla ord.

Närhelst det sker någon förändring i status för applikationens användargränssnitt, DOM uppdateras och representerar ändringen. DOM renderas och manipuleras med varje ändring för uppdatering av applikationens användargränssnitt, vilket påverkar prestandan och saktar ner den.

Därför, med många UI-komponenter och den komplexa strukturen av DOM, Det kommer att uppdateras dyrare eftersom det måste renderas om vid varje ändring.

DOM är uppbyggd som en träddatastruktur. Den består av noden för varje UI-element finns i webbdokumentet.

bash längd av sträng

Uppdatering av DOM:

Om vi ​​kan en del om JavaScript kan du se personer som använder 'getElementById()' eller 'getElementByClass()' metod för att ändra innehållet i DOM.

Närhelst det sker någon ändring i tillståndet för din applikation, uppdateras DOM för att återspegla ändringen i användargränssnittet.

Hur Virtual DOM påskyndar saker och ting:

När några nya saker läggs till i applikationen skapas den virtuella DOM, representerad som ett träd. Varje element i applikationen är en nod i trädet.

Därför, när det sker en förändring i positionen för ett element, skapas en ny virtuell DOM. Det nyare virtuella DOM-trädet jämförs med det senaste, där ändringarna noteras.

Den hittar det möjliga sättet att göra dessa ändringar av den faktiska DOM. Sedan skulle de uppdaterade elementen återrenderas på sidan.

Hur Virtual DOM hjälper till att reagera:

Allt i React observeras som en komponent, en funktionell komponent och en klasskomponent. En komponent har ett tillstånd. Närhelst vi ändrar något i JSX-filen, för att uttrycka det enkelt, närhelst tillståndet för komponenten ändras, uppdaterar react sitt virtuella DOM-träd.

React upprätthåller två virtuella DOM:er varje gång. Den första innehåller den uppdaterade virtuella DOM, och den andra är en föruppdaterad version av den uppdaterade virtuella DOM. Den jämför den föruppdaterade versionen av den uppdaterade virtuella DOM och hittar vad som ändrades i DOM, som vilka komponenter som kommer att ändras.

Även om det kan verka ineffektivt är kostnaden inte längre, eftersom uppdateringen av den virtuella DOM inte kan ta mycket tid.

När man jämför det nuvarande virtuella DOM-trädet med det föregående kallas det 'trotsande'. När React väl vet vad som har förändrats uppdaterar den objekten i själva DOM. React använder batchuppdateringar för att uppdatera den faktiska DOM. Ändringar av den faktiska DOM skickas i omgångar istället för att skicka några uppdateringar för den enda ändringen till komponentens tillstånd.

Återrendering av UI är den dyraste delen, och React lyckas göra det mest effektivt genom att se till att Real DOM som tar emot batchuppdateringarna återrenderar UI. Processen att konvertera ändringarna till den faktiska DOM kallas försoning.

Det förbättrar prestandan och är den främsta anledningen till att utvecklare älskar React och dess virtuella DOM.

Vad är Reacts virtuella DOM?

Konceptet med Virtual DOM kommer att göra prestandan för Real DOM bättre och snabbare. Virtual DOM är en virtuell symbol för DOM.

Men den största skillnaden är att varje gång, med varje ändring, uppdateras den virtuella DOM istället för den faktiska DOM.

Till exempel verklig och virtuell DOM representeras som en trädstruktur. Varje element i trädet är en nod. A nod läggs till i trädet när ett nytt objekt läggs till i applikationens användargränssnitt.

Om positionen för några element ändras, a ny virtuellt DOM-träd skapas. Den virtuella DOM beräknar det minsta antalet operationer på den verkliga DOM för att göra ändringar i den verkliga DOM. Den är effektiv och presterar bättre genom att minska kostnaden och driften av att återrendera hela den verkliga DOM.

Nu har vi en normal förståelse av Real och Virtual DOM.

Låt oss titta på hur Reagera fungerar genom att använda Virtuell DOM.

• Varje användargränssnitt är en individ komponent, och varje komponent har sitt tillstånd.
• Reagera följer observerbara mönster och observerar förändringar i stater.
• Närhelst någon ändring görs i komponentens tillstånd, Reagera uppdaterar det virtuella DOM-trädet men ändrar inte faktiska DOM-trädet.
• Reagera jämför de aktuell version av virtuell DOM med föregående version efter uppdatering.
• React vet vilka objekt som ändras i virtuell DOM. Den ersätter objekten i faktiska DOM , leder till minimal manipulation operationer.
• Denna process är känd som 'differentiering'. Denna bild kommer att göra konceptet tydligt.

På bilden är mörkblå cirklar är de knutpunkter som har ändrats. De stat av dessa komponenter har ändrats. React beräknar skillnaden mellan den tidigare och nuvarande versionen av virtuellt DOM-träd, och hela det överordnade underträdet återrenderas för att visa användargränssnittet som har ändrats.

Det uppdaterade trädet är batch uppdaterad (att uppdateringar till den verkliga DOM skickas i omgångar istället för att skicka uppdateringar för varje tillståndsändring.) till den verkliga DOM.

För att komma djupare in i detta behöver vi veta om Reagera render () fungera.

Då måste vi veta om några av de viktiga Funktioner av React.

JSX

JSX står för JavaScript XML. Det är en syntaxförlängning av JS. Med JSX kan vi skriva HTML-strukturer i filen som innehåller JavaScript-kod.

Komponenter

Komponenter är oberoende och återanvändbar av kod. Varje användargränssnitt i React-appen är en komponent. En enda applikation har många komponenter.

Komponenterna är av två typer, klasskomponenter och funktionella komponenter.

Klasskomponenter är stateful eftersom de använder sitt 'tillstånd' för att ändra användargränssnittet. Funktionella komponenter är tillståndslösa komponenter. De fungerar som en JavaScript-funktion som tar en godtycklig parameter som kallas 'rekvisita'.

React Hooks har införts för att komma åt tillstånd med funktionella komponenter.

Livscykelmetoder

Livscykelmetoder är viktiga metoder inbyggt att reagera, som verkar på komponenter under deras varaktighet i DOM. Varje komponent i React gick genom en livscykel av händelser.

Metoden render() är det maximala som används livscykelmetod .

Det är den enda metoden inom Reaktionsklasskomponenter . Så i varje klass anropas komponent render().

Metoden render (). hanterar komponentens rendering av användargränssnittet. Renderingen () innehåller all logik som visas på skärmen. Den kan också ha en null värde om vi inte vill visa något på displayen.

Exempel visas nedan:

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

Exemplet kommer att visa JSX skrivet i render().

När en stat eller stötta uppdateras i komponenten, framställa() kommer att returnera ett annat träd med React-element.

När du skriver koden i konsolen eller JavaScript-filen kommer dessa att hända:

• Webbläsaren analyserar HTML-koden för att hitta noden med ID:t.
• Det tar bort elementets underordnade element.
• Det uppdaterar elementet (DOM) med 'uppdaterat värde'.
• Den räknar om CSS för föräldra- och barnnoder.
• Uppdatera sedan layouten.

Gå till sist genom trädet på skärmen.

Så som vi vet att uppdatering av DOM innebär att innehållet ändras. Det är mer fäst vid det.

Komplexa algoritmer är involverade i att räkna om CSS och ändra layouterna, vilket påverkar prestandan.

Så, React har många sätt att hantera det, eftersom det använder något som kallas virtuell DOM.

reactdome

React-dom-paketet tillhandahåller DOM-specifika metoder på toppnivån i applikationen för att fly ut ur React-modellen vid behov.

 import * as ReactDOM from 'react-dom'; 

Om du använder ES5 med npm bör du också skriva:

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

De reagera-dom Paketet innehåller också moduler specifika för klient- och serverapparna:

• reager-dom/klient
• react-dom/server

React-dom-paketet exporterar dessa metoder:

sträng till heltal

• createPortal()
• flushSync()

React-dom-metoderna exporteras också:

• framställa ()
• hydrat ()
• findDOMNode()
• unmountComponentAtNode ()

Obs: Både hydrat och render har ersatts med nyare klientmetoder.

Webbläsarstöd

React stöder alla moderna webbläsare, och vissa polyfills krävs för äldre versioner.

Obs: Vi kan inte stödja äldre webbläsare som inte stöder ES5-metoder, som Internet Explorer. Du kan upptäcka att appar fungerar i de senaste webbläsarna om polyfills som es5-shim och es5-sham som ingår på sidan, men du är på egen hand om du tar vägen.

Referens

createPortal()

Skapar portal () Portal tillhandahåller sättet att läsa in barn i DOM-noden, som finns utanför rangordningen för DOM-komponenten.

flushSync()

Force React-uppdateringar i den tillhandahållna återuppringningen samtidigt. Det säkerställer att DOM uppdateras omedelbart.

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

Notera:

• Använd sparsamt. Flush Sync skadade prestandan avsevärt.
• FlushSync tvingar väntande gränser att visa reservtillståndet.
• Den kör väntande effekter och tillämpar samtidigt uppdateringarna innan den returneras.
• flushSync spola uppdateringar utanför callback för att spola uppdateringar callback. Till exempel, om det finns några väntande uppdateringar från ett klick kan React spola det innan uppdateringarna spolas vid återuppringningen.

Legacy Reference

framställa()

 render(element, container[, callback]) 

Obs: Render ersätts med att skapa Root i React. Återge ett React-element till DOM vid den medföljande behållaren och återbetala en referens till komponenten.

Om ett React-element tidigare renderats i någon behållare, skulle det utföra en uppdatering av det, och det är nödvändigt att återspegla det senaste React-elementet.

Den exekveras när komponenten renderas om den valfria återuppringningen tillhandahålls.

Notera:

Metoden Render () styr innehållet i behållarnoden när den passerar. Alla befintliga DOM-element ersätts.

Render () ändrar inte behållarens nod (den kan bara ändra behållarens underordnade). Det kan vara möjligt att infoga en komponent i en befintlig DOM-nod utan att skriva över de underordnade elementen.

Rendera () för närvarande tillbaka referens till rotinstansen av ReactComponent.

Dess returvärde ärvs dock och kan undvikas eftersom framtida versioner av React i vissa fall kan generera komponenter asynkront.

Om du behöver en referens till ReactComponent-prototypen är den bästa lösningen att bifoga en återkallningsreferens till elementet.

Render () används för att hydratisera en renderad behållare till servern är föråldrad. Använda sig av hydrateRoot() i stället för den.

hydrat()

hydrat ersätts med hydratroten.

Det är exakt som render() men används för en behållare vars HTML-innehåll renderas av ReactDOMServer. React kommer att försöka ansluta händelseavlyssnare till den aktuella markeringen.

 hydrate(element, container[, callback]) 

Notera:

plsql

React förväntar sig att renderat innehåll är identiskt mellan servern och klienten. Vi kan rätta till innehållet i texten, men vi måste behandla inkonsekvenserna som fel och rätta till dem. I utvecklingsläge varnar React för inkonsekvensen under hydrering.

Det finns ingen garanti för att specifika skillnader korrigeras för avvikelser.

Det är viktigt av prestandaskäl i de flesta applikationer, och det blir för dyrt att validera alla flaggor.

Anta att ett elements attribut eller textinnehåll oundvikligen skiljer sig mellan servern och klienten (till exempel, tidsstämpeln ). I det här fallet kan vi tysta varningen genom att lägga till suppressHydrationWarning = {true} till elementet.

Om det inte är ett textelement kan det inte försöka korrigera det så att det kan förbli inkonsekvent tills framtida uppdateringar.

Du kan utföra en två-pass rendering om vi behöver tillhandahålla olika på servern och klienten medvetet. Komponenter som finns kvar på klienten kan läsa tillståndsvariabler som this.state.isClient, där den ställs in på sant i componentDidMount().

Det initiala renderingspasset kommer att göra samma sak som servern, vilket undviker inkonsekvenser, men det extra passet kommer att göras synkront efter hydratisering.

Obs: Detta tillvägagångssätt kommer att göra komponenterna långsammare eftersom de gör det två gånger, så använd det försiktigt.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Notera:

unmountComponentAtNode har ersatts med root.unmount() i React. Den raderar den monterade React-komponenten från DOM och rensar dess händelsehanterare och tillstånd.

Om ingen komponent var monterad på behållaren kan den inte göra någonting. Returnerar sant om ingen komponent är monterad och falsk om det inte finns någon komponent att avmontera.

findDOMNode()

Notera: findDOMNode är en escape-lucka som används för att komma åt den underliggande DOM-noden. Denna utrymningslucka avråds i de flesta fall eftersom den genomborrar komponentabstraktionen. Det har fasats ut i StrictMode.

findDOMNode(komponent)

Om den här komponenten har monterats till DOM returnerar detta motsvarande inbyggda webbläsar-DOM-element. Den här metoden är användbar för att läsa värden från DOM, såsom formulärfältsvärden, och utföra DOM-mätningar. I de flesta fall kan du bifoga en referens till DOM-noden och undvika att använda findDOMNode.

När en komponent returnerar null eller false returnerar findDOMNode null. När en komponent renderas till en sträng returnerar findDOMNode en text-DOM-nod som innehåller det värdet. Komponenten kan returnera ett fragment med flera barn om findDOMNode har returnerat DOM-noden som motsvarar det första icke-tomma barnet.

Notera:

findDOMNode fungerar bara på monterade komponenter (det vill säga komponenter som har placerats i DOM). Om du försöker anropa detta på en komponent som inte har monterats ännu (som att anropa findDOMNode() på render() på en komponent som inte har skapats ännu), kommer ett undantag att kastas.

findDOMNode kan inte användas i funktionskomponenter.

DOM-element

React implementerar ett webbläsaroberoende DOM-system för prestanda och med kompatibilitet över webbläsare. Vi tar tillfället i akt att rensa upp några av de grova kanterna i webbläsarens DOM-implementering.

I React måste alla DOM-egenskaper och attribut (inklusive händelsehanterare) vara camelcase. Till exempel motsvarar HTML tabindex-attributet tabindex-attributet i React.

Undantagen är attributen aria-* och data-*, som måste vara gemener. Du kan till exempel ha en areatagg som en areatagg.

Skillnader i attribut

Flera attribut kommer att fungera olika mellan React och HTML:

kontrollerade

Det markerade attributet stöds av komponenter i en kryssruta eller radio av typen. Det är användbart för tillverkning av kontrollerade komponenter. Du kan använda detta för att avgöra om komponenten är markerad eller inte.

DefaultChecked är den okontrollerade motsvarigheten som bestämmer att komponenten kontrolleras första gången den monteras.

klassnamn

Använd attributet className för att ange CSS-klassen. Det gäller alla vanliga DOM- och SVG-element som , , etc.

Om du använder React with Web Components (ovanligt), använd class-attributet istället.

farligtSetInnerHTML

Dangerously SetInnerHTML är Reacts ersättare för att använda innerHTML i DOM-webbläsaren. Att konfigurera HTML-kod är riskabelt eftersom det är lätt att utsätta användarna för en cross-site scripting (XSS) attack.

Så vi kan ställa in HTML direkt från React, men du måste på ett farligt sätt skriva SetInnerHTML och skicka ett objekt med __html-nyckeln för att komma ihåg att det är farligt.

Till exempel:

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

React-element använder istället htmlFor, Eftersom for är ett reserverat ord i JavaScript.

på Ändra

OnChange-händelsen beter sig som förväntat; händelsen aktiveras varje gång ett formulärfält ändras.

Vi använder avsiktligt inte det befintliga webbläsarbeteendet eftersom förändringen är stor för dess beteende och React förlitar sig på att händelsen hanterar användarinmatning i realtid.

vald

Om du vill markera som valt, hänvisar du till det alternativets värde i 's-värdet istället. Se 'Välj tagg' för detaljerade instruktioner.

Notera:

I maximala fall refererar klassnamn till klasser definierade i en extern CSS-stilmall. Stilar används i React-appar för att lägga till beräknade stilar vid rendering. Style-attributet accepterar JavaScript-objektet med kamelegenskaper istället för en CSS-sträng.

Det överensstämmer DOM-stil JavaScript-egenskaper, är effektivare och undviker XSS säkerhetshål.

Till exempel:

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

Observera att: stilar inte har autoprefix. För att stödja äldre webbläsare måste vi tillhandahålla stilegenskaper:

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

Stilnycklar är camel för att motsvara åtkomst av egenskaper på DOM-noder inifrån JS. Leverantörsprefix MS börjar med en stor bokstav.

React kommer automatiskt att lägga till ett 'px'-suffix till vissa inline-nummerstilsegenskaper. Om vi ​​vill använda andra enheter än 'px', ange värdet som en sträng med önskad enhet.

till exempel:

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

Men inte alla stilegenskaper konverteras till pixelsträngar.

Undertryck varning för redigerbart innehåll

Det finns en varning om ett element till barn är markerat som innehåll redigerbart, eftersom det inte kommer att fungera. Attributet undertrycker varningen.

Undertryckningsvarning

Om vi ​​använder React-rendering på serversidan är det en varning när servern och klienten renderar med olika innehåll. Det är dock svårt att garantera en exakt matchning i sällsynta fall. Till exempel förväntas tidsstämplarna skilja sig åt på servern eller klienten.

byta namn på katalogen i linux

Om du ställer in undertryckningsvarningen till sann, kommer den inte att varna om felmatchningar mellan attribut och innehåll i elementet.

Den fungerade bara på en nivås djup och var tänkt att användas som en utrymning.

värde

Värdeattributet är designat av komponenterna , och. Du kan använda den för att ställa in värdet på komponenten.

Det är användbart för tillverkning av kontrollerade komponenter. defaultValue och lika med omarkerad ställer in komponentens värde när den monteras seriellt.

Alla HTML-attribut som stöds

Alla anpassade och vanliga DOM-attribut stöds.

React har tillhandahållit ett JavaScript-centrerat API i DOM. Och React-komponenter innehåller ofta anpassade och DOM-relaterade rekvisita, och sedan använder React samma CamelCase-konventioner som DOM API:

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