Echte/browser-DOM:

DOM staat voor 'Documentobjectmodel'. Het is een gestructureerde weergave van HTML in de webpagina of applicatie. Het vertegenwoordigt de volledige gebruikersinterface (Gebruikersomgeving) van de webapplicatie als de boomgegevensstructuur.

Het is een structurele weergave van HTML-elementen van een webapplicatie in eenvoudige woorden.

Elke keer als er iets verandert in de status van de gebruikersinterface van de applicatie, DOM is bijgewerkt en vertegenwoordigt de wijziging. De DOM wordt weergegeven en gemanipuleerd bij elke wijziging voor het bijwerken van de gebruikersinterface van de applicatie, wat de prestaties beïnvloedt en vertraagt.

Daarom, met veel UI-componenten en de complexe structuur van DOM, Het wordt duurder bijgewerkt omdat het bij elke wijziging opnieuw moet worden weergegeven.

De DOM is opgebouwd als een boomdatastructuur. Het bestaat uit het knooppunt voor elk UI-element aanwezig in het webdocument.

ascii van a in java

Het DOM bijwerken:

Als we iets over JavaScript weten, zie je mogelijk dat mensen de 'getElementById()' of 'getElementByClass()' methode om de inhoud van DOM te wijzigen.

Telkens wanneer er een wijziging optreedt in de status van uw toepassing, wordt de DOM bijgewerkt om de wijziging in de gebruikersinterface weer te geven.

Hoe Virtual DOM dingen versnelt:

Wanneer er nieuwe dingen aan de applicatie worden toegevoegd, wordt de virtuele DOM gemaakt, weergegeven als een boom. Elk element in de applicatie is een knooppunt in de boom.

Daarom wordt er telkens wanneer er een verandering in de positie van een element plaatsvindt, een nieuwe virtuele DOM gecreëerd. De nieuwere virtuele DOM-boom wordt vergeleken met de nieuwste, waarin de wijzigingen worden genoteerd.

Het vindt de mogelijke manier om deze wijzigingen aan te brengen door de daadwerkelijke DOM. Vervolgens worden de bijgewerkte elementen opnieuw op de pagina weergegeven.

Hoe virtuele DOM helpt bij het reageren:

Alles in React wordt waargenomen als een component, een functionele component en een klassencomponent. Een component heeft een status. Telkens wanneer we iets in het JSX-bestand veranderen, om het simpel te zeggen: telkens wanneer de status van de component wordt gewijzigd, werkt de react zijn virtuele DOM-boom bij.

React onderhoudt elke keer twee virtuele DOM's. De eerste bevat de bijgewerkte virtuele DOM en de andere is een vooraf bijgewerkte versie van de bijgewerkte virtuele DOM. Het vergelijkt de vooraf bijgewerkte versie van de bijgewerkte virtuele DOM en zoekt uit wat er in de DOM is gewijzigd, zoals welke componenten zullen worden gewijzigd.

Hoewel het misschien ineffectief lijkt, zijn de kosten niet hoger, omdat het updaten van de virtuele DOM niet veel tijd kan kosten.

Bij het vergelijken van de huidige virtuele DOM-boom met de vorige staat bekend als 'uitdagen'. Zodra React weet wat er is veranderd, werkt het de objecten in de daadwerkelijke DOM bij. React gebruikt batchupdates om de daadwerkelijke DOM bij te werken. Wijzigingen in de daadwerkelijke DOM worden in batches verzonden in plaats van dat er updates worden verzonden voor de enkele wijziging in de status van de component.

Het opnieuw renderen van de gebruikersinterface is het duurste onderdeel, en React slaagt erin dit het meest efficiënt te doen door ervoor te zorgen dat de Real DOM de batchupdates ontvangt om de gebruikersinterface opnieuw weer te geven. Het proces van het converteren van de wijzigingen naar de daadwerkelijke DOM wordt genoemd verzoening.

Het verbetert de prestaties en is de belangrijkste reden waarom ontwikkelaars van React en de virtuele DOM houden.

Wat is de virtuele DOM van React?

Het concept van Virtual DOM is bedoeld om de prestaties van Real DOM beter en sneller te maken. Virtuele DOM is een virtueel symbool van de DOM.

Maar het belangrijkste verschil is dat elke keer, bij elke wijziging, de virtuele DOM wordt bijgewerkt in plaats van de daadwerkelijke DOM.

Bijvoorbeeld de echt En virtuele DOM wordt weergegeven als een boomstructuur. Elk element in de boom is een knooppunt. A knooppunt wordt aan de boom toegevoegd wanneer een nieuw item wordt toegevoegd aan de gebruikersinterface van de toepassing.

Als de positie van elementen verandert, a nieuw virtuele DOM-boom wordt gemaakt. De virtuele DOM berekent het minimum aantal bewerkingen op de echte DOM om wijzigingen aan te brengen in de echte DOM. Het is efficiënt en presteert beter door de kosten en werking van het opnieuw renderen van de hele echte DOM te verlagen.

Nu hebben we een normaal begrip van echte en virtuele DOM.

Laten we eens kijken hoe Reageer werkt door te gebruiken Virtuele DOM.

• Elke gebruikersinterface is een individu bestanddeel, en elk onderdeel heeft zijn staat.
• Reageren volgt waarneembare patronen en observeert de veranderingen in toestanden.
• Telkens wanneer er een wijziging wordt aangebracht in de status van het onderdeel, reageert React werkt de virtuele DOM-boom bij maar verandert niets aan de daadwerkelijke DOM-boom.
• Reageer vergelijkt de huidige versie van de virtuele DOM met de vorige versie na bijwerken.
• React weet welke objecten zijn gewijzigd in de virtuele DOM. Het vervangt de objecten in de werkelijke DOM , leiden naar minimale manipulatie activiteiten.
• Dit proces staat bekend als 'differentiatie'. Deze foto maakt het concept duidelijk.

Op de afbeelding de donkerblauw cirkels zijn de knooppunten die zijn veranderd. De staat van deze componenten is veranderd. React berekent het verschil tussen de vorige en de huidige versie van de virtuele DOM-boom, en de gehele bovenliggende subboom wordt opnieuw weergegeven om de gewijzigde gebruikersinterface weer te geven.

De bijgewerkte boom is batch bijgewerkt (dat updates naar de echte DOM in batches worden verzonden in plaats van updates te verzenden voor elke statuswijziging.) naar de echte DOM.

Om hier dieper op in te gaan, moeten we meer weten over de Reageer render () functie.

Vervolgens moeten we enkele belangrijke zaken weten functies van Reageren.

JSX

JSX betekent JavaScript-XML. Het is een syntaxis extensie van JS. Met JSX kunnen we schrijven HTML-structuren in het bestand dat bevat JavaScript-code.

Componenten

Componenten zijn onafhankelijk En herbruikbaar van code. Elke gebruikersinterface in de React-app is een component. Eén enkele applicatie heeft er veel componenten.

Componenten zijn van twee typen, klasse componenten En functionele componenten.

Klassecomponenten zijn stateful omdat ze hun 'state' gebruiken om de gebruikersinterface te wijzigen. Functionele componenten zijn staatloze componenten. Ze fungeren als een JavaScript-functie die een willekeurige parameter gebruikt, genaamd 'props'.

Reageer haken zijn geïntroduceerd om toegang te krijgen tot staten met functionele componenten.

Levenscyclusmethoden

Levenscyclusmethoden zijn belangrijke methoden ingebouwd reageren, die tijdens hun duur in de DOM op componenten inwerken. Elk onderdeel van React kende een levenscyclus van gebeurtenissen.

De render() methode is het maximaal gebruikte levenscyclus methode .

Het is de enige methode binnenin Reageer klassecomponenten . In elke klasse wordt dus component render() aangeroepen.

De render()-methode verzorgt de weergave van de component door de gebruikersinterface. De render () bevat alle logica die op het scherm wordt weergegeven. Het kan ook een nul waarde als we niets willen laten zien.

Voorbeeld wordt hieronder weergegeven:

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

Het voorbeeld laat zien JSX geschreven in render().

Wanneer een staat of prop wordt binnen het onderdeel bijgewerkt, veroorzaken() zal een andere boom met React-elementen retourneren.

Bij het schrijven van de code in de console of het JavaScript-bestand gebeuren de volgende dingen:

• De browser parseert de HTML om het knooppunt met de ID te vinden.
• Het verwijdert het onderliggende element van het element.
• Het werkt het element bij (DOM) met de 'bijgewerkte waarde'.
• Het wordt opnieuw berekend CSS voor bovenliggende en onderliggende knooppunten.
• Werk vervolgens de lay-out bij.

Beweeg ten slotte de boom op het scherm.

Dus omdat we weten dat het bijwerken van de DOM impliceert het veranderen van de inhoud. Het is er meer aan gehecht.

Complexe algoritmen zijn betrokken bij het herberekenen van CSS en het wijzigen van de lay-outs, wat de prestaties beïnvloedt.

React heeft dus veel manieren om ermee om te gaan, omdat het gebruik maakt van iets dat bekend staat als virtuele DOM.

reactiedome

Het react-dom-pakket biedt DOM-specifieke methoden op het hoogste niveau van de applicatie om indien nodig uit het React-model te ontsnappen.

 import * as ReactDOM from 'react-dom'; 

Als u ES5 met npm gebruikt, moet u ook schrijven:

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

De reageren-dom pakket biedt ook modules die specifiek zijn voor de client- en server-apps:

• reageren-dom/klant
• reageren-dom/server

De react-dom-pakketexport van deze methoden:

• createPortal()
• flushSync()

De react-dom-methoden worden ook geëxporteerd:

• veroorzaken ()
• hydrateren ()
• vindDOMNode()
• ontkoppelComponentAtNode ()

Opmerking: zowel hydrateren als renderen zijn vervangen door nieuwere clientmethoden.

Browserondersteuning

React ondersteunt alle moderne browsers en voor oudere versies zijn sommige polyfills vereist.

Opmerking: we kunnen geen oudere browsers ondersteunen die geen ES5-methoden ondersteunen, zoals Internet Explorer. Je kunt merken dat apps in de nieuwste browsers werken als polyfills zoals es5-shim en es5-sham op de pagina staan, maar je staat er alleen voor als je het pad kiest.

Referentie

createPortal()

Creëert Portal () Portal biedt de manier om kinderen in te lezen in het DOM-knooppunt, dat buiten de rangschikking van de DOM-component bestaat.

flushSync()

Forceer React-updates tegelijkertijd in de aangeboden callback. Het zorgt ervoor dat de DOM onmiddellijk wordt bijgewerkt.

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

Opmerking:

converteer geheel getal naar string-java

• Gebruik spaarzaam. Flush Sync heeft een aanzienlijke negatieve invloed op de prestaties.
• FlushSync dwingt in behandeling zijnde grenzen om de fallback-status weer te geven.
• Het voert lopende effecten uit en past tegelijkertijd de updates toe voordat deze worden geretourneerd.
• flushSync spoelt updates buiten de callback om de updates van de callback leeg te maken. Bijvoorbeeld, als er updates in behandeling zijn na een klik, kan React deze leegmaken voordat de updates bij de callback worden gewist.

Verouderde referentie

veroorzaken()

 render(element, container[, callback]) 

Opmerking: Render wordt vervangen door het maken van Root in React. Render een React-element in de DOM in de meegeleverde container en betaal een verwijzing naar de component terug.

Als een React-element eerder in een container zou worden weergegeven, zou het er een update op uitvoeren, en het is noodzakelijk om het nieuwste React-element weer te geven.

Het wordt uitgevoerd wanneer de component wordt weergegeven als de optionele callback is voorzien.

Opmerking:

De methode Render () bestuurt de inhoud van het containerknooppunt wanneer het voorbijkomt. Elk bestaand DOM-element wordt vervangen.

Render () verandert het knooppunt van de container niet (het kan alleen de onderliggende elementen van de container wijzigen). Het is mogelijk mogelijk een component in een bestaand DOM-knooppunt in te voegen zonder de onderliggende elementen te overschrijven.

Render () momenteel een verwijzing naar de rootinstantie van ReactComponent.

tekenreeks in Java-methoden

De retourwaarde ervan wordt echter overgenomen en kan worden vermeden, omdat in sommige gevallen toekomstige versies van React componenten asynchroon kunnen genereren.

Als u een verwijzing naar het ReactComponent-prototype nodig heeft, is de beste oplossing om een ​​terugroepreferentie aan het element toe te voegen.

Render () wordt gebruikt om een ​​gerenderde container te hydrateren zodat de server verouderd is. Gebruik hydrateRoot() in plaats daarvan.

hydrateren()

hydraat wordt vervangen door de hydraatwortel.

Het is precies hetzelfde als render(), maar wordt gebruikt voor een container waarvan de HTML-inhoud wordt weergegeven door ReactDOMServer. React zal proberen gebeurtenislisteners te verbinden met de huidige markup.

 hydrate(element, container[, callback]) 

Opmerking:

React verwacht dat de weergegeven inhoud identiek is tussen de server en de client. We kunnen de inhoud van de tekst corrigeren, maar we moeten de inconsistenties als fouten behandelen en corrigeren. In de ontwikkelingsmodus waarschuwt React voor inconsistenties tijdens hydratatie.

Er is geen garantie dat specifieke verschillen worden gecorrigeerd voor discrepanties.

Het is belangrijk om prestatieredenen in de meeste toepassingen, en het zal te duur zijn om alle vlaggen te valideren.

Stel dat het attribuut of de tekstinhoud van een element onvermijdelijk verschilt tussen de server en de client (bijvoorbeeld de tijdstempel ). In dit geval kunnen we de waarschuwing uitschakelen door toe te voegen suppressHydrationWarning = {waar} naar het element.

Als het geen tekstelement is, kan het niet proberen het te patchen, zodat het inconsistent kan blijven tot toekomstige updates.

U kunt een render in twee stappen uitvoeren als we met opzet verschillende versies op de server en de client moeten aanbieden. Componenten die op de client achterblijven, kunnen statusvariabelen zoals this.state.isClient lezen, waar deze op true wordt ingesteld componentDidMount().

De eerste renderpassage doet hetzelfde als de server, waarbij inconsistenties worden vermeden, maar de extra pass wordt synchroon uitgevoerd na hydratatie.

Opmerking: deze aanpak zorgt ervoor dat de componenten langzamer worden omdat ze dit twee keer doen, dus wees voorzichtig.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Opmerking:

unmountComponentAtNode is vervangen door root.unmount() in Reageer. Het wist de gekoppelde React-component van de DOM en ruimt de gebeurtenishandlers en status op.

Als er geen component op de container is gemonteerd, kan deze niets doen. Retourneert true als er geen component is aangekoppeld en false als er geen component is om te ontkoppelen.

vindDOMNode()

Opmerking: findDOMNode is een ontsnappingsluik dat wordt gebruikt om toegang te krijgen tot het onderliggende DOM-knooppunt. Dit ontsnappingsluik wordt in de meeste gevallen afgeraden omdat het de abstractie van het onderdeel doorboort. Het is verouderd in StrictMode.

findDOMNode(component)

Als deze component aan de DOM is gekoppeld, retourneert dit het overeenkomstige DOM-element van de native browser. Deze methode is handig voor het lezen van waarden uit de DOM, zoals formulierveldwaarden, en voor het uitvoeren van DOM-metingen. In de meeste gevallen kunt u een verwijzing naar het DOM-knooppunt toevoegen en het gebruik van findDOMNode vermijden.

Wanneer een component null of false retourneert, retourneert findDOMNode null. Wanneer een component wordt weergegeven in een tekenreeks, retourneert findDOMNode een tekst-DOM-knooppunt dat die waarde bevat. De component kan een fragment met meerdere kinderen retourneren als findDOMNode het DOM-knooppunt heeft geretourneerd dat overeenkomt met het eerste niet-lege kind.

Opmerking:

findDOMNode werkt alleen op gemonteerde componenten (dat wil zeggen componenten die in de DOM zijn geplaatst). Als u dit probeert aan te roepen op een component die nog niet is aangekoppeld (zoals het aanroepen van findDOMNode() op render() op een component die nog niet is gemaakt), wordt er een uitzondering gegenereerd.

findDOMNode kan niet worden gebruikt in functiecomponenten.

DOM-elementen

React implementeert een browseronafhankelijk DOM-systeem voor de prestaties en met cross-browser compatibiliteit. We maken van deze gelegenheid gebruik om enkele ruwe randen in de DOM-implementatie van de browser op te ruimen.

In React moeten alle DOM-eigenschappen en -attributen (inclusief gebeurtenishandlers) camelcase zijn. Het HTML-tabindex-attribuut komt bijvoorbeeld overeen met het tabblad Index-attribuut in React.

De uitzonderingen zijn de kenmerken aria-* en data-*, die in kleine letters moeten staan. U kunt bijvoorbeeld een gebiedstag als gebiedstag hebben.

Verschillen in attributen

Verschillende attributen zullen anders werken tussen React en HTML:

gecontroleerd

Het aangevinkte attribuut wordt ondersteund door componenten van een selectievakje of radio van het type . Het is nuttig voor het vervaardigen van gecontroleerde componenten. Hiermee kunt u bepalen of het onderdeel is gecontroleerd of niet.

DefaultChecked is de niet-aangevinkte tegenhanger die bepaalt dat de component wordt gecontroleerd wanneer deze voor de eerste keer wordt aangekoppeld.

naam van de klasse

Gebruik het attribuut className om de CSS-klasse op te geven. Het is van toepassing op alle reguliere DOM- en SVG-elementen zoals, , enz.

Als u React with Web Components gebruikt (ongebruikelijk), gebruik dan in plaats daarvan het class-attribuut.

gevaarlijkSetInnerHTML

Gevaarlijk SetInnerHTML is de vervanging van React voor het gebruik van innerHTML in de DOM-browser. Het configureren van HTML-code is riskant omdat gebruikers hierdoor gemakkelijk kunnen worden blootgesteld aan een cross-site scripting (XSS)-aanval.

We kunnen HTML dus rechtstreeks vanuit React instellen, maar je moet gevaarlijk SetInnerHTML typen en een object doorgeven met de __html-sleutel om te onthouden dat het gevaarlijk is.

Bijvoorbeeld:

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

React-elementen gebruiken in plaats daarvan htmlFor, omdat for een gereserveerd woord is in JavaScript.

Hoe een willekeurig getal in Java te genereren

opWijzigen

De onChange-gebeurtenis gedraagt ​​zich zoals verwacht; de gebeurtenis wordt geactiveerd telkens wanneer een formulierveld wordt gewijzigd.

We maken bewust geen gebruik van het bestaande browsergedrag, omdat verandering groots is vanwege het gedrag ervan en React afhankelijk is van de gebeurtenis om gebruikersinvoer in realtime te verwerken.

geselecteerd

Als u de optie als geselecteerd wilt markeren, raadpleeg dan de waarde van die optie in de 'waarde'. Zie 'Tag selecteren' voor gedetailleerde instructies.

Opmerking:

In maximale gevallen verwijzen klassenamen naar klassen die zijn gedefinieerd in een extern CSS-stijlblad. Stijlen worden in React-apps gebruikt om berekende stijlen toe te voegen tijdens het renderen. Het style-attribuut accepteert het JavaScript-object met camel-eigenschappen in plaats van een CSS-tekenreeks.

Het conformeert DOM-stijl JavaScript-eigenschappen zijn efficiënter en worden vermeden XSS beveiligings gaten.

Bijvoorbeeld:

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

Merk op dat: stijlen niet automatisch worden voorafgegaan. Om oudere browsers te ondersteunen, moeten we stijleigenschappen leveren:

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

Stijlsleutels komen overeen met toegang tot eigenschappen op DOM-knooppunten vanuit JS. Providervoorvoegsels MS beginnen met een hoofdletter.

React voegt automatisch een 'px'-achtervoegsel toe aan sommige inline nummerstijleigenschappen. Als we andere eenheden dan 'px' willen gebruiken, geef dan de waarde op als een string met de gewenste eenheid.

Bijvoorbeeld:

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

Niet alle stijleigenschappen worden echter geconverteerd naar pixelreeksen.

Onderdruk waarschuwing over bewerkbare inhoud

Er wordt een waarschuwing weergegeven als een element voor kinderen is gemarkeerd als bewerkbare inhoud, omdat dit niet zal werken. Het attribuut onderdrukt de waarschuwing.

Onderdrukkingswaarschuwing

Als we React-weergave aan de serverzijde gebruiken, is dit een waarschuwing wanneer de server en de client met verschillende inhoud worden weergegeven. In zeldzame gevallen is het echter moeilijk om een ​​exacte match te garanderen. Er wordt bijvoorbeeld verwacht dat tijdstempels verschillen op de server of de client.

Als u de onderdrukkingswaarschuwing instelt op true, wordt er niet gewaarschuwd voor discrepanties tussen attributen en inhoud van het element.

Het werkte slechts op één niveau diepte en was bedoeld om te worden gebruikt als ontsnapping.

waarde

Het waardeattribuut is ontworpen door de , en componenten. U kunt het gebruiken om de waarde van het onderdeel in te stellen.

Het is nuttig voor het vervaardigen van gecontroleerde componenten. defaultValue en gelijk aan uitgeschakeld stellen de waarde van de component in wanneer deze serieel is gemonteerd.

Alle ondersteunde HTML-kenmerken

Elk aangepast en standaard DOM-kenmerk wordt ondersteund.

React heeft een JavaScript-centrische API in de DOM geleverd. En React-componenten bevatten vaak aangepaste en DOM-gerelateerde rekwisieten, en vervolgens gebruikt React dezelfde CamelCase-conventies als de DOM API:

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