Real/Browser DOM:
DOM står for 'Dokumentobjektmodel'. Det er en struktureret repræsentation af HTML på websiden eller applikationen. Det repræsenterer hele brugergrænsefladen (Brugergrænseflade) af webapplikation som trædatastrukturen.
Det er en strukturel repræsentation af HTML-elementer af en webapplikation i enkle ord.
Når der er nogen ændring i tilstand af applikationens brugergrænseflade, DOM er opdateret og repræsenterer ændringen. DOM gengives og manipuleres med hver ændring til opdatering af applikationens brugergrænseflade, hvilket påvirker ydeevnen og sænker den.
Derfor, med mange UI-komponenter og den komplekse struktur af DOM, Den opdateres dyrere, da den skal gengives igen med hver ændring.
DOM er konstitueret som en trædatastruktur. Den består af noden for hver UI element findes i webdokumentet.
scanner i java
Opdatering af DOM:
Hvis vi ved noget om JavaScript, vil du muligvis se folk bruge 'getElementById()' eller 'getElementByClass()' metode til at ændre indholdet af DOM.
Når der sker en ændring i din applikations tilstand, opdateres DOM for at afspejle ændringen i brugergrænsefladen.
Hvordan Virtual DOM fremskynder tingene:
Når der tilføjes nye ting til applikationen, oprettes den virtuelle DOM, repræsenteret som et træ. Hvert element i applikationen er en node i træet.
Derfor, når der er en ændring i positionen af et element, oprettes en ny virtuel DOM. Det nyere virtuelle DOM-træ sammenlignes med det seneste, hvor ændringerne noteres.
Den finder den mulige måde at foretage disse ændringer af den faktiske DOM. Så ville de opdaterede elementer gengives på siden.
Hvordan Virtual DOM hjælper med at reagere:
Alt i React observeres som en komponent, en funktionel komponent og en klassekomponent. En komponent har en tilstand. Hver gang vi ændrer noget i JSX-filen, for at sige det enkelt, når komponentens tilstand ændres, opdaterer react sit virtuelle DOM-træ.
React vedligeholder to virtuelle DOM'er hver gang. Den første indeholder den opdaterede virtuelle DOM, og den anden er en præ-opdateret version af den opdaterede virtuelle DOM. Den sammenligner den forud-opdaterede version af den opdaterede virtuelle DOM og finder, hvad der blev ændret i DOM, som hvilke komponenter der vil blive ændret.
Selvom det kan virke ineffektivt, er omkostningerne ikke længere, da opdatering af den virtuelle DOM ikke kan tage meget tid.
Når man sammenligner det aktuelle virtuelle DOM-træ med det forrige, kaldes det 'trodsende'. Når React ved, hvad der har ændret sig, opdaterer den objekterne i den faktiske DOM. React bruger batchopdateringer til at opdatere den faktiske DOM. Ændringer til den faktiske DOM sendes i batches i stedet for at sende nogen opdateringer for den enkelte ændring til komponentens tilstand.
Gengivelse af brugergrænsefladen er den dyreste del, og React formår at gøre det mest effektivt ved at sikre, at den rigtige DOM, der modtager batchopdateringerne, gengiver brugergrænsefladen. Processen med at konvertere ændringerne til den faktiske DOM kaldes forsoning.
Det forbedrer ydeevnen og er hovedårsagen til, at udviklere elsker at reagere og dets virtuelle DOM.
Hvad er Reacts virtuelle DOM?
Konceptet Virtual DOM kommer til at gøre Real DOM's ydeevne bedre og hurtigere. Virtual DOM er et virtuelt symbol på DOM.
Men den største forskel er, at hver gang, med hver ændring, bliver den virtuelle DOM opdateret i stedet for den faktiske DOM.
For eksempel ægte og virtuel DOM er repræsenteret som en træstruktur. Hvert element i træet er en node. EN node føjes til træet, når et nyt element føjes til applikationens brugergrænseflade.
Hvis placeringen af nogle elementer ændres, a ny virtuelt DOM-træ oprettes. Den virtuelle DOM beregner det mindste antal operationer på den rigtige DOM for at foretage ændringer i den rigtige DOM. Den er effektiv og yder bedre ved at reducere omkostningerne og driften ved at gengive hele den rigtige DOM.
Nu har vi en normal forståelse af Real og Virtual DOM.
Lad os se på hvordan Reagere virker ved at bruge Virtuelt DOM.
- Hver UI er en individuel komponent, og hver komponent har sin tilstand.
- Reager følger observerbare mønstre og observerer ændringerne i stater.
- Når der foretages en ændring af komponentens tilstand, skal du reagere opdaterer det virtuelle DOM-træ men ændrer ikke faktiske DOM-træ.
- Reagere sammenligner det nuværende version af virtuel DOM med tidligere version efter opdatering.
- React ved, hvilke objekter der ændres i virtuel DOM. Det erstatter objekterne i faktiske DOM , der fører til minimal manipulation operationer.
- Denne proces er kendt som 'differentiering'. Dette billede vil gøre konceptet klart.
På billedet er mørkeblå cirkler er noder der er blevet ændret. Det stat af disse komponenter er ændret. React beregner forskellen mellem den forrige og den nuværende version af virtuelt DOM-træ, og hele det overordnede undertræ gengives igen for at vise brugergrænsefladen, som er ændret.
Det opdaterede træ er batch opdateret (at opdateringer til den rigtige DOM sendes i batches i stedet for at sende opdateringer for hver tilstandsændring.) til den rigtige DOM.
For at komme dybere ind i dette, er vi nødt til at kende til Reager gengivelse () fungere.
Så skal vi vide om nogle af de vigtige funktioner af React.
JSX
JSX står for JavaScript XML. Det er en syntaksudvidelse af JS. Ved hjælp af JSX kan vi skrive HTML strukturer i filen, der indeholder JavaScript-kode.
Komponenter
Komponenter er uafhængig og genbrugelig af kode. Hver brugergrænseflade i React-appen er en komponent. En enkelt applikation har mange komponenter.
Komponenterne er af to typer, klasse komponenter og funktionelle komponenter.
Klassekomponenter er stateful, fordi de bruger deres 'tilstand' til at ændre brugergrænsefladen. Funktionelle komponenter er statsløse komponenter. De fungerer som en JavaScript-funktion, der tager en vilkårlig parameter kaldet 'rekvisitter'.
React Hooks er blevet introduceret for at få adgang til tilstande med funktionelle komponenter.
Livscyklus metoder
Livscyklus metoder er vigtige metoder indbygget at reagere, som opererer på komponenter gennem deres varighed i DOM. Hver komponent i React gik gennem en livscyklus af begivenheder.
Metoden render() er den maksimalt anvendte metode livscyklus metode .
Det er den eneste metode indenfor Reaktionsklassekomponenter . Så i hver klasse kaldes komponent render().
Render () metoden håndterer komponentens gengivelse af brugergrænsefladen. Gengivelsen () indeholder al logikken, der vises på skærmen. Den kan også have en nul værdi, hvis vi ikke ønsker at vise noget på displayet.
replaceall i streng java
Eksempel er vist nedenfor:
class Header extends React.Component{ render(){ return React Introduction } } Eksemplet vil vise JSX skrevet i render().
Når en stat eller rekvisit er opdateret i komponenten, render() vil returnere et andet træ af React-elementer.
Når du skriver koden i konsollen eller JavaScript-filen, vil disse ske:
- Browseren analyserer HTML'en for at finde noden med ID'et.
- Det fjerner elementets underordnede element.
- Det opdaterer elementet (DOM) med 'opdateret værdi'.
- Den genberegner CSS til forældre- og børneknuder.
- Opdater derefter layoutet.
Til sidst skal du krydse træet på skærmen.
Så som vi ved, at opdatering af DOM indebærer at ændre indholdet. Det er mere knyttet til det.
Komplekse algoritmer er involveret i genberegning af CSS og ændring af layouts, hvilket påvirker ydeevnen.
Så React har mange måder at håndtere det på, da det bruger noget kendt som virtuel DOM.
reactdome
React-dom-pakken giver DOM-specifikke metoder på øverste niveau af applikationen til at undslippe ruten ud af React-modellen, hvis det er nødvendigt.
import * as ReactDOM from 'react-dom';
Hvis du bruger ES5 med npm, skal du også skrive:
var ReactDOM = require('react-dom');
Det reagere-dom pakken indeholder også moduler, der er specifikke for klient- og serverapps:
- reagere-dom/klient
- react-dom/server
React-dom-pakken eksporterer disse metoder:
- createPortal()
- flushSync()
React-dom metoderne eksporteres også:
- gengive ()
- hydrat ()
- findDOMNode()
- unmountComponentAtNode ()
Bemærk: Både hydrat og render er blevet erstattet med nyere klientmetoder.
Browser support
React understøtter alle moderne browsere, og nogle polyfills er påkrævet til ældre versioner.
Bemærk: Vi kan ikke understøtte ældre browsere, der ikke understøtter ES5-metoder, som Internet Explorer. Du kan opdage, at apps fungerer i de nyeste browsere, hvis polyfills som es5-shim og es5-sham, der er inkluderet på siden, men du er på din egen, hvis du tager vejen.
Reference
createPortal()
Opretter portal () Portal giver mulighed for at læse børn ind i DOM-noden, som eksisterer uden for rangeringen af DOM-komponenten.
flushSync()
Force React-opdateringer i det leverede tilbagekald samtidigt. Det sikrer, at DOM opdateres med det samme.
// Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. Bemærk:
- Brug sparsomt. Flush Sync forringede ydeevnen markant.
- FlushSync vil tvinge afventende grænser til at vise reservetilstanden.
- Det kører afventende effekter og anvender samtidig opdateringerne, før det returneres.
- flushSync flush opdateringer uden for tilbagekaldet for at flushe opdateringerne tilbagekaldet. For eksempel, hvis der er nogen afventende opdateringer fra et klik, kan React tømme den, før den fjerner opdateringerne ved tilbagekaldet.
Legacy Reference
render()
render(element, container[, callback])
Bemærk: Render erstattes med at skabe Root i React. Gengiv et React-element i DOM ved den medfølgende beholder og tilbagebetal en reference til komponenten.
Hvis et React-element tidligere blev gengivet i en container, ville det udføre en opdatering på det, og det er nødvendigt at afspejle det seneste React-element.
Den udføres, når komponenten gengives, hvis det valgfri tilbagekald er givet.
Bemærk:
hej verden med java
Render ()-metoden styrer indholdet af containernoden, når den passerer forbi. Ethvert eksisterende DOM-element udskiftes.
Render () ændrer ikke containerens node (det kan kun ændre containerens børn). Det kan være muligt at indsætte en komponent i en eksisterende DOM-node uden at overskrive de underordnede elementer.
Render () tilbage reference til root-instansen af ReactComponent.
Dens returværdi er dog nedarvet og kan undgås, da fremtidige versioner af React i nogle tilfælde kan generere komponenter asynkront.
Hvis du har brug for en reference til ReactComponent-prototypen, er den bedste løsning at vedhæfte en tilbagekaldelsesreference til elementet.
Render () bruges til at hydrere en gengivet container til serveren er forældet. Brug hydratRoot() i stedet for det.
hydrat()
hydrat erstattes med hydratroden.
Det er nøjagtigt som render(), men bruges til en container, hvis HTML-indhold er gengivet af ReactDOMServer. React vil forsøge at forbinde begivenhedslyttere til den aktuelle markup.
hydrate(element, container[, callback])
Bemærk:
React forventer, at gengivet indhold er identisk mellem serveren og klienten. Vi kan rette indholdet af teksten, men vi skal behandle uoverensstemmelserne som fejl og rette dem. I udviklingstilstand advarer React om inkonsistensen under hydrering.
Der er ingen sikkerhed for, at specifikke forskelle er korrigeret for uoverensstemmelser.
Det er vigtigt af hensyn til ydeevnen i de fleste applikationer, og det vil være for dyrt at validere alle flag.
Antag, at et elements attribut eller tekstindhold uundgåeligt er forskelligt mellem serveren og klienten (f.eks. tidsstemplet ). I dette tilfælde kan vi slå alarmen fra ved at tilføje suppressHydrationWarning = {true} til elementet.
Hvis det ikke er et tekstelement, kan det ikke forsøge at patche det, så det kan forblive inkonsekvent indtil fremtidige opdateringer.
Du kan udføre en to-pass rendering, hvis vi har brug for at give forskellige på serveren og klienten bevidst. Komponenter, der er tilbage på klienten, kan læse tilstandsvariabler som this.state.isClient, hvor den indstilles til sand i componentDidMount().
Det indledende gengivelsespass vil gøre det samme som serveren, og undgå uoverensstemmelser, men det ekstra pass vil blive lavet synkront efter hydrering.
Bemærk: Denne tilgang vil gøre komponenterne langsommere, da de gør det to gange, så brug det forsigtigt.
unmountComponentAtNode() unmountComponentAtNode(container)
Bemærk:
unmountComponentAtNode er udskiftet med root.unmount() i React. Den sletter den monterede React-komponent fra DOM'en og renser dens hændelseshandlere og tilstand.
Hvis ingen komponent var monteret på beholderen, kan den ikke gøre noget. Returnerer sand, hvis ingen komponent er monteret, og falsk, hvis der ikke er nogen komponent, der skal afmonteres.
findDOMNode()
Bemærk: findDOMNode er en escape-luge, der bruges til at få adgang til den underliggende DOM-node. Denne flugtluge frarådes i de fleste tilfælde, fordi den gennemborer komponentabstraktionen. Det er blevet forældet i StrictMode.
findDOMNode(komponent)
Hvis denne komponent er blevet monteret på DOM, returnerer dette det tilsvarende native browser DOM-element. Denne metode er nyttig til at læse værdier fra DOM, såsom formularfeltværdier, og udføre DOM-målinger. I de fleste tilfælde kan du vedhæfte en reference til DOM-noden og undgå at bruge findDOMNode.
Når en komponent returnerer null eller false, returnerer findDOMNode null. Når en komponent gengives til en streng, returnerer findDOMNode en tekst DOM-node, der indeholder denne værdi. Komponenten kan returnere et fragment med flere børn, hvis findDOMNode har returneret DOM-noden svarende til det første ikke-tomme barn.
Bemærk:
findDOMNode virker kun på monterede komponenter (det vil sige komponenter, der er blevet placeret i DOM). Hvis du forsøger at kalde dette på en komponent, der ikke er monteret endnu (såsom kalder findDOMNode() på render() på en komponent, der ikke er oprettet endnu), vil en undtagelse blive kastet.
findDOMNode kan ikke bruges i funktionskomponenter.
DOM elementer
React implementerer et browser-uafhængigt DOM-system for ydeevnen og med cross-browser-kompatibilitet. Vi benytter lejligheden til at rydde op i nogle af de hårde kanter i browserens DOM-implementering.
I React skal alle DOM egenskaber og attributter (inklusive hændelseshandlere) være camelcase. For eksempel svarer HTML-tabindex-attributten til fane-indeks-attributten i React.
Undtagelserne er aria-* og data-* attributterne, som skal være små bogstaver. For eksempel kan du have et områdemærke som et områdemærke.
Forskelle i attributter
Flere attributter vil fungere forskelligt mellem React og HTML:
kontrolleret
Den afkrydsede attribut understøttes af komponenter i en afkrydsningsboks eller radio af typen. Det er nyttigt til fremstilling af kontrollerede komponenter. Du kan bruge dette til at bestemme, om komponenten er kontrolleret eller ej.
DefaultChecked er den umarkerede modpart, der bestemmer, at komponenten kontrolleres første gang, den monteres.
klassenavn
For at angive CSS-klassen skal du bruge attributten className. Det gælder for alle almindelige DOM- og SVG-elementer som , , etc.
Hvis du bruger React with Web Components (ualmindelig), skal du bruge class-attributten i stedet.
farligtSætIndreHTML
Dangerously SetInnerHTML er Reacts erstatning for at bruge innerHTML i DOM-browseren. Konfiguration af HTML-kode er risikabelt, fordi det er nemt at udsætte brugerne for et cross-site scripting (XSS) angreb.
Så vi kan indstille HTML direkte fra React, men du skal på en farlig måde skrive SetInnerHTML og sende et objekt med __html-nøglen for at huske, at det er farligt.
For eksempel:
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor React-elementer bruger i stedet htmlFor, siden for er et reserveret ord i JavaScript.
på Skift
OnChange-hændelsen opfører sig som forventet; hændelsen udløses hver gang et formularfelt ændres.
Vi bruger med vilje ikke den eksisterende browseradfærd, fordi ændring er storslået for dens adfærd, og React er afhængig af hændelsen til at håndtere brugerinput i realtid.
valgte
Hvis du vil markere som valgt, skal du henvise til denne indstillings værdi i 's-værdien i stedet for. Se 'Vælg tag' for detaljerede instruktioner.
Bemærk:
I maksimum tilfælde refererer klassenavne til klasser defineret i et eksternt CSS-typografiark. Styles bruges i React-apps til at tilføje beregnede stilarter på gengivelsestidspunktet. Style-attributten accepterer JavaScript-objektet med kamelegenskaber i stedet for en CSS-streng.
Det stemmer overens DOM-stil JavaScript-egenskaber, er mere effektiv og undgår XSS sikkerhedshuller.
For eksempel:
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } Bemærk at: stilarter ikke har autopræfiks. For at understøtte ældre browsere skal vi levere stilegenskaber:
const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } Stilnøgler er camel for at svare til adgang til egenskaber på DOM-noder fra JS. Udbyderpræfikser MS begynder med et stort bogstav.
React vil automatisk tilføje et 'px'-suffiks til nogle inline-nummerstilegenskaber. Hvis vi vil bruge andre enheder end 'px', skal du angive værdien som en streng med den ønskede enhed.
for eksempel:
// Result style: '10px' Hello World! // Result style: '10%' Hello World!
Det er dog ikke alle stilegenskaberne, der konverteres til pixelstrenge.
Undertryk advarsel om redigerbart indhold
Der er en advarsel, hvis et element til børn er markeret som indholdsredigerbart, da det ikke vil fungere. Attributten undertrykker advarslen.
Advarsel om undertrykkelse
Hvis vi bruger server-side React rendering, er det en advarsel, når serveren og klienten renderer med forskelligt indhold. Det er dog svært at garantere en nøjagtig match i sjældne tilfælde. For eksempel forventes tidsstempler at være forskellige på serveren eller klienten.
Hvis du indstiller undertrykkelsesadvarslen til sand, vil den ikke advare om uoverensstemmelser mellem attributter og indhold af elementet.
Det fungerede kun på et niveaus dybde og var beregnet til at blive brugt som en flugt.
værdi
Værdiattributten er designet af komponenterne , og. Du kan bruge den til at indstille værdien af komponenten.
fang og prøv java
Det er nyttigt til fremstilling af kontrollerede komponenter. defaultValue og lig med unchecked indstiller komponentens værdi, når den er monteret serielt.
Alle understøttede HTML-attributter
Enhver tilpasset og standard DOM-attribut understøttes.
React har leveret en JavaScript-centreret API i DOM. Og React-komponenter indeholder ofte brugerdefinerede og DOM-relaterede rekvisitter, og så bruger React de samme CamelCase-konventioner som DOM API:
// Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API