logo

TechCodeview

Hva er Dom i React?

Ekte/nettleser-DOM:

DOM står for 'Dokumentobjektmodell'. Det er en strukturert representasjon av HTML på nettsiden eller applikasjonen. Den representerer hele brukergrensesnittet (Brukergrensesnitt) av nettapplikasjon som tredatastrukturen.

Det er en strukturell representasjon av HTML-elementer av en nettapplikasjon i enkle ord.

Hva er Dom i React?

Når det er noen endring i tilstanden til applikasjonens brukergrensesnitt, DOM er oppdatert og representerer endringen. DOM-en gjengis og manipuleres med hver endring for oppdatering av applikasjonens brukergrensesnitt, noe som påvirker ytelsen og bremser den.

Derfor, med mange UI-komponenter og den komplekse strukturen til DOM, Den vil oppdateres dyrere ettersom den må gjengis på nytt med hver endring.

DOM er konstituert som en tredatastruktur. Den består av noden for hver UI-element finnes i webdokumentet.

boolesk til streng java

Oppdatering av DOM:

Hvis vi kan noe om JavaScript, kan du se folk som bruker 'getElementById()' eller 'getElementByClass()' metode for å endre innholdet i DOM.

Hver gang det skjer endringer i tilstanden til applikasjonen din, oppdateres DOM for å gjenspeile endringen i brukergrensesnittet.

Hvordan Virtual DOM øker hastigheten:

Når nye ting legges til i applikasjonen, opprettes den virtuelle DOM-en, representert som et tre. Hvert element i applikasjonen er en node i treet.

Derfor, når det er en endring i posisjonen til et element, opprettes en ny virtuell DOM. Det nyere virtuelle DOM-treet sammenlignes med det siste, hvor endringene noteres.

Den finner den mulige måten å gjøre disse endringene på av den faktiske DOM. Deretter ville de oppdaterte elementene gjengitt på siden.

Hvordan Virtual DOM hjelper med å reagere:

Alt i React blir observert som en komponent, en funksjonell komponent og en klassekomponent. En komponent har en tilstand. Hver gang vi endrer noe i JSX-filen, for å si det enkelt, hver gang tilstanden til komponenten endres, oppdaterer react det virtuelle DOM-treet.

React opprettholder to virtuelle DOM-er hver gang. Den første inneholder den oppdaterte virtuelle DOM, og den andre er en forhåndsoppdatert versjon av den oppdaterte virtuelle DOM. Den sammenligner den forhåndsoppdaterte versjonen av den oppdaterte virtuelle DOM og finner hva som ble endret i DOM, som hvilke komponenter som vil bli endret.

Selv om det kan virke ineffektivt, er kostnaden ikke lenger, siden oppdatering av den virtuelle DOM ikke kan ta mye tid.

Når man sammenligner det gjeldende virtuelle DOM-treet med det forrige kalles 'trossende'. Når React vet hva som har endret seg, oppdaterer den objektene i den faktiske DOM. React bruker batchoppdateringer for å oppdatere den faktiske DOM. Endringer i den faktiske DOM sendes i batcher i stedet for å sende noen oppdateringer for enkeltendringen til komponentens tilstand.

Gjengivelse av brukergrensesnittet er den dyreste delen, og React klarer å gjøre det mest effektivt ved å sikre at Real DOM som mottar batchoppdateringene gjengir brukergrensesnittet på nytt. Prosessen med å konvertere endringene til den faktiske DOM kalles forsoning.

Det forbedrer ytelsen og er hovedgrunnen til at utviklere elsker å reagere og dens virtuelle DOM.

Hva er Reacts virtuelle DOM?

Konseptet med Virtual DOM kommer for å gjøre ytelsen til Real DOM bedre og raskere. Virtual DOM er et virtuelt symbol på DOM.

Men hovedforskjellen er at hver gang, med hver endring, blir den virtuelle DOM oppdatert i stedet for den faktiske DOM.

For eksempel ekte og virtuell DOM er representert som en trestruktur. Hvert element i treet er en node. EN node legges til treet når et nytt element legges til i applikasjonens brukergrensesnitt.

Hvis plasseringen av noen elementer endres, a ny virtuelt DOM-tre opprettes. Den virtuelle DOM beregner minimum antall operasjoner på den virkelige DOM for å gjøre endringer i den virkelige DOM. Den er effektiv og yter bedre ved å redusere kostnadene og driften av å gjengi hele den virkelige DOM.

Hva er Dom i React?

Nå har vi en normal forståelse av ekte og virtuell DOM.

La oss se på hvordan Reagere fungerer ved å bruke Virtuelt DOM.

  • Hvert brukergrensesnitt er et individ komponent, og hver komponent har sin tilstand.
  • Reager følger observerbare mønstre og observerer endringene i stater.
  • Når det gjøres endringer i komponentens tilstand, Reager oppdaterer det virtuelle DOM-treet men endrer ikke faktiske DOM-tre.
  • Reagere sammenligner de gjeldende versjon av virtuell DOM med forrige versjon etter oppdatering.
  • React vet hvilke objekter som endres i virtuell DOM. Den erstatter objektene i faktiske DOM , fører til minimal manipulasjon operasjoner.
  • Denne prosessen er kjent som 'differensiering'. Dette bildet vil gjøre konseptet klart.
Hva er Dom i React?

På bildet er mørke blå sirkler er noder som er endret. De stat av disse komponentene er endret. React beregner forskjellen mellom forrige og nåværende versjon av virtuelt DOM-tre, og hele det overordnede undertreet gjengis på nytt for å vise brukergrensesnittet som er endret.

Det oppdaterte treet er batch oppdatert (at oppdateringer til den virkelige DOM sendes i batcher i stedet for å sende oppdateringer for hver tilstandsendring.) til den virkelige DOM.

For å komme dypere inn i dette, må vi vite om Reager gjengivelse () funksjon.

Da må vi vite om noe av det viktige egenskaper av React.

JSX

JSX står for JavaScript XML. Det er en syntaksutvidelse av JS. Ved å bruke JSX kan vi skrive HTML-strukturer i filen som inneholder JavaScript-kode.

Komponenter

Komponenter er uavhengig og gjenbrukbare av kode. Hvert brukergrensesnitt i React-appen er en komponent. En enkelt applikasjon har mange komponenter.

Komponenter er av to typer, klasse komponenter og funksjonelle komponenter.

Klassekomponenter er tilstandsfulle fordi de bruker 'tilstanden' til å endre brukergrensesnittet. Funksjonelle komponenter er statsløse komponenter. De fungerer som en JavaScript-funksjon som tar en vilkårlig parameter kalt 'rekvisitter'.

React Hooks har blitt introdusert for å få tilgang til tilstander med funksjonelle komponenter.

Livssyklusmetoder

Livssyklusmetoder er viktige metoder innebygd å reagere, som opererer på komponenter gjennom deres varighet i DOM. Hver komponent i React gikk gjennom en livssyklus av hendelser.

Metoden render() er den maksimale som brukes livssyklus metode .

Det er den eneste metoden innenfor Reager klasse komponenter . Så i hver klasse kalles komponent render().

Gjengi ()-metoden håndterer komponentens gjengivelse av brukergrensesnittet. Gjengivelsen () inneholder all logikken som vises på skjermen. Den kan også ha en null verdi hvis vi ikke ønsker å vise noe på skjermen.

konvertere streng til int

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 rekvisitt er oppdatert i komponenten, gjengi() vil returnere et annet tre med React-elementer.

Når du skriver koden i konsollen eller JavaScript-filen, vil disse skje:

  • Nettleseren analyserer HTML-en for å finne noden med ID-en.
  • Den fjerner elementets underordnede element.
  • Den oppdaterer elementet (DOM) med 'oppdatert verdi'.
  • Den regner om CSS for foreldre- og barnnoder.
  • Oppdater deretter oppsettet.

Til slutt går du gjennom treet på skjermen.

Så som vi vet at oppdatering av DOM innebærer å endre innholdet. Det er mer knyttet til det.

Komplekse algoritmer er involvert i å beregne CSS på nytt og endre oppsettene, noe som påvirker ytelsen.

Så, React har mange måter å håndtere det på, siden den bruker noe kjent som virtuell DOM.

reactdome

React-dom-pakken gir DOM-spesifikke metoder på toppnivået i applikasjonen for å unnslippe ruten ut av React-modellen om nødvendig.

 import * as ReactDOM from 'react-dom';

Hvis du bruker ES5 med npm, bør du også skrive:

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

De reagere-dom pakken inneholder også moduler som er spesifikke for klient- og serverappene:

  • reagere-dom/klient
  • react-dom/server

React-dom-pakken eksporterer disse metodene:

  • createPortal()
  • flushSync()

React-dom-metodene eksporteres også:

  • gjengi ()
  • hydrat ()
  • findDOMNode()
  • unmountComponentAtNode ()

Merk: Både hydrat og render er erstattet med nyere klientmetoder.

Nettleserstøtte

React støtter alle moderne nettlesere, og noen polyfills kreves for eldre versjoner.

Merk: Vi kan ikke støtte eldre nettlesere som ikke støtter ES5-metoder, som Internet Explorer. Du kan finne at apper fungerer i de nyeste nettleserne hvis polyfills som es5-shim og es5-sham som er inkludert på siden, men du er på egen hånd hvis du tar veien.

Henvisning

createPortal()

Oppretter portal () Portal gir mulighet for å lese barn inn i DOM-noden, som eksisterer utenfor rangeringen av DOM-komponenten.

flushSync()

Force React-oppdateringer i den oppgitte tilbakeringingen samtidig. Det sikrer at DOM oppdateres umiddelbart.

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

Merk:

  • Bruk med måte. Flush Sync skadet ytelsen betydelig.
  • FlushSync vil tvinge ventende grenser til å vise reservetilstanden.
  • Den kjører ventende effekter og bruker samtidig oppdateringene før den returneres.
  • flushSync flush oppdateringer utenfor tilbakeringingen for å flushe oppdateringene tilbakeringingen. For eksempel, hvis det er noen ventende oppdateringer fra et klikk, kan React tømme den før du tømmer oppdateringene ved tilbakeringing.

Legacy Reference

gjengi() 

 render(element, container[, callback])

Merk: Render erstattes med å lage Root i React. Gjengi et React-element inn i DOM ved den medfølgende beholderen og tilbakebetal en referanse til komponenten.

Hvis et React-element tidligere ble gjengitt i en beholder, ville det utføre en oppdatering på det, og det er nødvendig å gjenspeile det siste React-elementet.

Den utføres når komponenten gjengis hvis den valgfrie tilbakeringingen er gitt.

Merk:

hei verden med java

Render ()-metoden kontrollerer innholdet i beholdernoden når den går forbi. Ethvert eksisterende DOM-element erstattes.

Render () endrer ikke containerens node (den kan bare endre containerens underordnede). Det kan være mulig å sette inn en komponent i en eksisterende DOM-node uten å overskrive de underordnede elementene.

Gjengi () tilbakereferanse til rotforekomsten av ReactComponent.

Imidlertid er returverdien arvet og kan unngås, da fremtidige versjoner av React i noen tilfeller kan generere komponenter asynkront.

Hvis du trenger en referanse til ReactComponent-prototypen, er den beste løsningen å legge ved en tilbakekallingsreferanse til elementet.

Render () brukes til å hydrere en gjengitt beholder til serveren er foreldet. Bruk hydrateRoot() i stedet for det.

hydrat()

hydrat erstattes med hydratrot.

Det er nøyaktig som render(), men brukes for en container hvis HTML-innhold er gjengitt av ReactDOMServer. React vil prøve å koble hendelseslyttere til gjeldende markering.

 hydrate(element, container[, callback])

Merk:

React forventer at gjengitt innhold er identisk mellom serveren og klienten. Vi kan rette innholdet i teksten, men vi må behandle inkonsekvensene som feil og rette dem. I utviklingsmodus advarer React om inkonsekvensen under hydrering.

Det er ingen garanti for at spesifikke forskjeller er korrigert for avvik.

Det er viktig av ytelsesgrunner i de fleste applikasjoner, og det vil være for dyrt å validere alle flagg.

Anta at et elements attributt eller tekstinnhold uunngåelig er forskjellig mellom serveren og klienten (f.eks. tidsstemplet ). I dette tilfellet kan vi dempe varselet ved å legge til suppressHydrationWarning = {true} til elementet.

Hvis det ikke er et tekstelement, kan det ikke prøve å lappe det slik at det kan forbli inkonsekvent inntil fremtidige oppdateringer.

Du kan utføre en to-pass gjengivelse hvis vi trenger å tilby forskjellig på serveren og klienten bevisst. Komponenter som er igjen på klienten kan lese tilstandsvariabler som this.state.isClient, der den settes til sann i componentDidMount().

Det første gjengivelsespasset vil gjøre det samme som serveren, og unngå inkonsekvenser, men tilleggspasset vil gjøres synkront etter hydrering.

Merk: Denne tilnærmingen vil gjøre komponentene tregere siden de gjør det to ganger, så bruk det forsiktig.

 unmountComponentAtNode() unmountComponentAtNode(container)

Merk:

unmountComponentAtNode er erstattet med root.unmount() i React. Den sletter den monterte React-komponenten fra DOM og renser hendelsesbehandlerne og tilstanden.

Hvis ingen komponent var montert på beholderen, kan den ikke gjøre noe. Returnerer sann hvis ingen komponent er montert og usann hvis det ikke er noen komponent å avmontere.

findDOMNode()

Merk: findDOMNode er en escape-luke som brukes for å få tilgang til den underliggende DOM-noden. Denne rømningsluken frarådes i de fleste tilfeller fordi den gjennomborer komponentabstraksjonen. Den har blitt avviklet i StrictMode.

findDOMNode(komponent)

Hvis denne komponenten har blitt montert til DOM, returnerer dette det tilsvarende DOM-elementet i nettleseren. Denne metoden er nyttig for å lese verdier fra DOM, for eksempel skjemafeltverdier, og utføre DOM-målinger. I de fleste tilfeller kan du legge ved en referanse til DOM-noden og unngå å bruke findDOMNode.

Når en komponent returnerer null eller usann, returnerer findDOMNode null. Når en komponent gjengis til en streng, returnerer findDOMNode en tekst DOM-node som inneholder den verdien. Komponenten kan returnere et fragment med flere barn i tilfelle findDOMNode har returnert DOM-noden som tilsvarer det første ikke-tomme barnet.

Merk:

findDOMNode fungerer kun på monterte komponenter (det vil si komponenter som er plassert i DOM). Hvis du prøver å kalle dette på en komponent som ikke er montert ennå (for eksempel å kalle findDOMNode() på render() på en komponent som ikke er opprettet ennå), vil et unntak bli kastet.

findDOMNode kan ikke brukes i funksjonskomponenter.

DOM-elementer

React implementerer et nettleseruavhengig DOM-system for ytelsen og med kompatibilitet på tvers av nettlesere. Vi benytter anledningen til å rydde opp i noen av de grove kantene i nettleserens DOM-implementering.

I React må alle DOM-egenskapene og attributtene (inkludert hendelsesbehandlere) være camelcase. HTML-tabindex-attributtet tilsvarer for eksempel tab-indeks-attributtet i React.

Unntakene er aria-* og data-* attributtene, som må være små. Du kan for eksempel ha et områdemerke som områdemerke.

Forskjeller i attributter

Flere attributter vil fungere annerledes mellom React og HTML:

krysset av

Det sjekkede attributtet støttes av komponenter i en avmerkingsboks eller radio av typen . Det er nyttig for produksjon av kontrollerte komponenter. Du kan bruke dette til å avgjøre om komponenten er sjekket eller ikke.

DefaultChecked er den ukontrollerte motparten som bestemmer at komponenten kontrolleres første gang den monteres.

klassenavn

For å spesifisere CSS-klassen, bruk className-attributtet. Det gjelder alle vanlige DOM- og SVG-elementer som , , etc.

Hvis du bruker React with Web Components (uvanlig), bruk klasseattributtet i stedet.

farligSetInnerHTML

Dangerously SetInnerHTML er Reacts erstatning for bruk av innerHTML i DOM-nettleseren. Konfigurering av HTML-kode er risikabelt fordi det er lett å utsette brukerne for et cross-site scripting (XSS) angrep.

Så vi kan sette HTML direkte fra React, men du må på en farlig måte skrive SetInnerHTML og sende et objekt med __html-tasten for å huske at det er farlig.

For eksempel:

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

React-elementer bruker htmlFor i stedet, Siden for er et reservert ord i JavaScript.

på Endre

OnChange-hendelsen oppfører seg som forventet; hendelsen utløses hver gang et skjemafelt endres.

Vi bruker med vilje ikke den eksisterende nettleseratferden fordi endringen er stor for oppførselen, og React er avhengig av at hendelsen håndterer brukerinndata i sanntid.

valgt

Hvis du vil merke som valgt, referer til det alternativets verdi i 's-verdien i stedet. Se 'Velg tag' for detaljerte instruksjoner.

Merk:

I maksimale tilfeller refererer klassenavn til klasser definert i et eksternt CSS-stilark. Stiler brukes i React-apper for å legge til beregnede stiler på gjengivelsestidspunktet. Style-attributtet godtar JavaScript-objektet med kamelegenskaper i stedet for en CSS-streng.

Det samsvarer DOM-stil JavaScript-egenskaper, er mer effektiv og unngår XSS sikkerhetshull.

For eksempel: 

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

Merk at: stiler ikke har autoprefiks. For å støtte eldre nettlesere, må vi levere 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 ; }

Stilnøkler er kameler for å tilsvare tilgang til egenskaper på DOM-noder fra JS. Leverandørprefikser MS begynner med en stor bokstav.

React vil automatisk legge til et 'px'-suffiks til noen innebygde tallstilegenskaper. Hvis vi ønsker å bruke andre enheter enn 'px', spesifiser verdien som en streng med ønsket enhet.

for eksempel: 

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

Imidlertid er ikke alle stilegenskapene konvertert til pikselstrenger.

Undertrykk varsel om redigerbart innhold

Det er en advarsel hvis et element til barn er merket som innhold redigerbart, da det ikke vil fungere. Attributten undertrykker advarselen.

Advarsel om undertrykkelse

Hvis vi bruker server-side React-gjengivelse, er det en advarsel når serveren og klienten gjengir med forskjellig innhold. Det er imidlertid vanskelig å garantere eksakt samsvar i sjeldne tilfeller. For eksempel forventes tidsstempler å variere på serveren eller klienten.

Hvis du setter undertrykkelsesadvarselen til sann, vil den ikke varsle om uoverensstemmelser mellom attributter og innhold i elementet.

Den fungerte bare på ett nivå dybde og var ment å brukes som en flukt.

verdi

Verdi-attributtet er designet av , og-komponentene. Du kan bruke den til å angi verdien til komponenten.

kandidatnøkkel

Det er nyttig for produksjon av kontrollerte komponenter. defaultValue og lik uavmerket setter komponentens verdi når den er montert seriell.

Alle støttede HTML-attributter

Alle tilpassede og standard DOM-attributter støttes.

React har gitt en JavaScript-sentrisk API i DOM. Og React-komponenter inneholder ofte tilpassede og DOM-relaterte rekvisitter, og deretter bruker React de samme CamelCase-konvensjonene som DOM API:

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