DOM real/navegador:

DOM significa 'Model d'objectes de document'. És una representació estructurada d'HTML a la pàgina web o aplicació. Representa tota la IU (Interfície d'usuari) del aplicació web com a estructura de dades en arbre.

És un representació estructural d'elements HTML d'una aplicació web en paraules senzilles.

Sempre que hi hagi algun canvi en el estat de la interfície d'usuari de l'aplicació, DOM s'actualitza i representa el canvi. El DOM es representa i es manipula amb cada canvi per actualitzar la interfície d'usuari de l'aplicació, cosa que afecta el rendiment i el ralenteix.

Per tant, amb molts components de la interfície d'usuari i la complexa estructura de DOM, S'actualitzarà més car, ja que s'ha de tornar a representar amb cada canvi.

El DOM es constitueix com una estructura de dades en arbre. Consisteix en el node per a cadascun Element d'IU present al document web.

java obtenint la data actual

Actualització del DOM:

Si en sabem alguna cosa sobre JavaScript, és possible que veieu gent utilitzant el 'getElementById()' o 'getElementByClass()' mètode per modificar el contingut del DOM.

Sempre que es produeixi algun canvi en l'estat de la vostra aplicació, el DOM s'actualitza per reflectir el canvi a la interfície d'usuari.

Com el Virtual DOM accelera les coses:

Quan s'afegeix alguna cosa nova a l'aplicació, es crea el DOM virtual, representat com un arbre. Cada element de l'aplicació és un node de l'arbre.

Per tant, sempre que hi ha un canvi en la posició d'un element, es crea un nou DOM virtual. L'arbre DOM virtual més nou es compara amb l'últim, on s'anoten els canvis.

Troba la manera possible de fer aquests canvis mitjançant el DOM real. Aleshores, els elements actualitzats es tornarien a representar a la pàgina.

Com ajuda Virtual DOM a React:

Tot a React s'observa com un component, un component funcional i un component de classe. Un component té un estat. Cada vegada que canviem alguna cosa al fitxer JSX, per dir-ho simplement, sempre que es canvia l'estat del component, react actualitza el seu arbre DOM virtual.

React manté dos DOM virtuals cada vegada. El primer conté el DOM virtual actualitzat i l'altre és una versió prèviament actualitzada del DOM virtual actualitzat. Compara la versió prèviament actualitzada del DOM virtual actualitzat i troba el que s'ha canviat al DOM, com els components que es canviaran.

Encara que pugui semblar ineficaç, el cost ja no és, ja que l'actualització del DOM virtual no pot trigar molt de temps.

Quan es compara l'arbre DOM virtual actual amb l'anterior, es coneix com 'desafiar'. Un cop React sap què ha canviat, actualitza els objectes al DOM real. React utilitza actualitzacions per lots per actualitzar el DOM real. Els canvis al DOM real s'envien per lots en lloc d'enviar cap actualització per al canvi únic a l'estat del component.

Tornar a renderitzar la interfície d'usuari és la part més cara, i React aconsegueix fer-ho de manera més eficient assegurant el DOM real que rep les actualitzacions per lots per tornar a renderitzar la interfície d'usuari. S'anomena el procés de conversió dels canvis al DOM real reconciliació.

Millora el rendiment i és la principal raó per la qual als desenvolupadors els agrada reaccionar i el seu DOM virtual.

Què és el DOM virtual de React?

El concepte de Virtual DOM ve per fer que el rendiment de Real DOM sigui millor i més ràpid. DOM virtual és un símbol virtual del DOM.

Però la diferència principal és que cada vegada, amb cada canvi, el DOM virtual s'actualitza en lloc del DOM real.

Per exemple, el real i DOM virtual es representa com a estructura d'arbre. Cada element de l'arbre és un node. A node s'afegeix a l'arbre quan s'afegeix un element nou a la interfície d'usuari de l'aplicació.

Si la posició d'algun element canvia, a nou es crea l'arbre DOM virtual. El DOM virtual calcula el nombre mínim d'operacions al DOM real per fer canvis al DOM real. És eficient i funciona millor reduint el cost i l'operació de tornar a renderitzar tot el DOM real.

Ara tenim una comprensió normal del DOM real i virtual.

Vegem com Reacciona funciona mitjançant l'ús DOM virtual.

• Cada IU és un individu component, i cada component té el seu estat.
• Reacciona a continuació patrons observables i observa els canvis dels estats.
• Sempre que es faci qualsevol canvi a l'estat del component, Reacciona actualitza l'arbre DOM virtual però no canvia el arbre DOM real.
• Reacciona compara el versió actual del DOM virtual amb el versió anterior després actualització.
• React sap quins objectes es canvien al DOM virtual. Substitueix els objectes del DOM real , que condueix a mínima manipulació operacions.
• Aquest procés es coneix com 'diferenciació'. Aquesta imatge deixarà clar el concepte.

A la imatge, el blau fosc cercles són els nodes que s'han canviat. El estat d'aquests components ha canviat. React calcula la diferència entre la versió anterior i actual del fitxer arbre DOM virtual, i es torna a representar tot el subarbre principal per mostrar la interfície d'usuari que es modifica.

L'arbre actualitzat és lot actualitzat (que les actualitzacions del DOM real s'envien per lots en lloc d'enviar actualitzacions per a cada canvi d'estat.) al DOM real.

Per aprofundir en això, hem de conèixer el renderització de reacció () funció.

Aleshores, hem de conèixer algunes de les coses importants característiques de Reaccionar.

JSX

JSX significa XML JavaScript. És un extensió de sintaxi de JS. Utilitzant JSX, podem escriure Estructures HTML a l'arxiu que conté codi JavaScript.

Components

Els components són independent i reutilitzable de codi. Cada interfície d'usuari de l'aplicació React és un component. Una sola aplicació en té moltes components.

Els components són de dos tipus, components de la classe i components funcionals.

Els components de la classe tenen estat perquè utilitzen el seu 'estat' per canviar la interfície d'usuari. Els components funcionals són components sense estat. Actuen com una funció de JavaScript que pren un paràmetre arbitrari anomenat 'props'.

React Hooks s'han introduït per accedir a estats amb components funcionals.

Mètodes del cicle de vida

Mètodes de cicle de vida són mètodes importants incorporat per reaccionar, que operen sobre components durant la seva durada en el DOM. Cada component de React va seguir un cicle de vida d'esdeveniments.

imprimir des de java

El mètode render() és el màxim utilitzat mètode del cicle de vida .

És l'únic mètode dins Components de la classe React . Així, a cada classe, s'anomena el component render().

El mètode render (). gestiona la representació del component per la interfície d'usuari. El render () conté tota la lògica que es mostra a la pantalla. També pot tenir un nul valor si no volem mostrar res a la pantalla.

A continuació es mostra un exemple:

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

L'exemple mostrarà el JSX escrit al render().

Quan un estat o prop s'actualitza dins del component, render () retornarà un arbre diferent d'elements React.

Quan s'escriu el codi a la consola o al fitxer JavaScript, això passarà:

• El navegador analitza l'HTML per trobar el node amb l'ID.
• Elimina l'element fill de l'element.
• Actualitza l'element (DOM) amb el 'valor actualitzat'.
• Es torna a calcular CSS per als nodes pare i fill.
• A continuació, actualitzeu el disseny.

Finalment, travessa l'arbre a la pantalla.

Així, com sabem, actualitzar el DOM implica canviar el contingut. Hi està més lligat.

Els algorismes complexos participen en el recàlcul de CSS i el canvi de dissenys, que afecten el rendiment.

Per tant, React té moltes maneres de tractar-ho, ja que utilitza una cosa que es coneix com a DOM virtual.

reactome

El paquet react-dom proporciona mètodes específics de DOM al nivell superior de l'aplicació per escapar de la ruta del model React si cal.

 import * as ReactDOM from 'react-dom'; 

Si utilitzeu ES5 amb npm, també hauríeu d'escriure:

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

El reaccionar-dom paquet també proporciona mòduls específics per a les aplicacions de client i servidor:

• reaccionar-dom/client
• react-dom/servidor

El paquet react-dom exporta aquests mètodes:

• createPortal()
• flushSync()

També s'exporten els mètodes react-dom:

• render ()
• hidratar ()
• findDOMNode()
• unmountComponentAtNode ()

Nota: tant hydrate com render s'han substituït per mètodes de client més nous.

Suport del navegador

React és compatible amb tots els navegadors moderns i es requereixen alguns polyfills per a les versions anteriors.

Nota: no podem admetre navegadors antics que no admeten mètodes ES5, com ara Internet Explorer. Podeu trobar que les aplicacions funcionen en els navegadors més recents si els polyfills com es5-shim i es5-sham que s'inclouen a la pàgina, però sou pel vostre compte si agafeu el camí.

Referència

createPortal()

Crea portal () Portal proporciona la manera de llegir nens al node DOM, que existeix fora de la classificació del component DOM.

flushSync()

Força les actualitzacions de React a la devolució de trucada proporcionada simultàniament. Assegura que el DOM s'actualitza immediatament.

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

Nota:

• Feu servir amb moderació. Flush Sync va afectar significativament el rendiment.
• FlushSync forçarà els límits pendents per mostrar l'estat de reserva.
• S'executa efectes pendents i simultàniament aplica les actualitzacions abans de retornar-lo.
• flushSync esborra les actualitzacions fora de la devolució de trucada per esborrar les actualitzacions de la devolució de trucada. Per exemple, si hi ha actualitzacions pendents d'un clic, React pot esborrar-les abans d'esborrar les actualitzacions a la devolució de trucada.

Referència del llegat

render ()

 render(element, container[, callback]) 

Nota: Render se substitueix per crear l'arrel a React. Representeu un element React al DOM al contenidor subministrat i retorneu una referència al component.

Si un element de React s'hagués representat prèviament a qualsevol contenidor, es realitzaria una actualització i cal reflectir l'últim element de React.

S'executa quan es representa el component si es proporciona la devolució de trucada opcional.

Nota:

El mètode Render () controla el contingut del node contenidor quan passa. Es substitueix qualsevol element DOM existent.

Render () no altera el node del contenidor (només pot modificar els fills del contenidor). Podria ser possible inserir un component en un node DOM existent sense sobreescriure els elements secundaris.

Render () de referència actualment a la instància arrel de ReactComponent.

Tanmateix, el seu valor de retorn s'hereta i es pot evitar, ja que, en alguns casos, futures versions de React poden generar components de manera asíncrona.

Si necessiteu una referència al prototip de ReactComponent, la millor solució és adjuntar una referència de recuperació a l'element.

Render () s'utilitza per hidratar un contenidor renderitzat perquè el servidor estigui obsolet. Ús hydrateRoot() en el seu lloc.

hidratar ()

l'hidrat es substitueix per l'arrel d'hidrat.

És exactament com render() però s'utilitza per a un contenidor el contingut HTML del qual és representat per ReactDOMServer. React intentarà connectar els oients d'esdeveniments amb el marcatge actual.

 hydrate(element, container[, callback]) 

Nota:

React espera que el contingut representat sigui idèntic entre el servidor i el client. Podem corregir el contingut del text, però hem de tractar les incoherències com a errors i corregir-les. En mode de desenvolupament, React adverteix de la inconsistència durant la hidratació.

No hi ha cap garantia que les diferències específiques es corregin per discrepàncies.

És important per raons de rendiment a la majoria d'aplicacions, i serà massa car validar tots els indicadors.

Suposem que l'atribut o el contingut de text d'un element difereix inevitablement entre el servidor i el client (per exemple, la marca de temps ). En aquest cas, podem silenciar l'alerta afegint-hi suppressHydrationWarning = {true} a l'element.

Si no és un element de text, no pot intentar pegar-lo perquè pugui romandre inconsistent fins a futures actualitzacions.

Podeu realitzar una renderització de dues passades si necessitem proporcionar diferents al servidor i al client deliberadament. Els components que queden al client poden llegir variables d'estat com this.state.isClient, on s'establirà en true a componentDidMount().

La passada de renderització inicial farà el mateix que el servidor, evitant incoherències, però la passada addicional es farà de manera sincrònica després de la hidratació.

Nota: aquest enfocament farà que els components siguin més lents, ja que ho fan dues vegades, així que feu-lo servir amb compte.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Nota:

unmountComponentAtNode ha estat substituït per root.unmount() en Reaccionar. Esborra el component React muntat del DOM i neteja els seus controladors d'esdeveniments i l'estat.

Si no s'ha muntat cap component al contenidor, no pot fer res. Retorna true si no hi ha cap component muntat i false si no hi ha cap component per desmuntar.

objecte de la matriu en java

findDOMNode()

Nota: findDOMNode és una escotilla d'escapada que s'utilitza per accedir al node DOM subjacent. Aquesta escotilla d'escapament es desaconsella en la majoria dels casos perquè perfora l'abstracció del component. Ha quedat obsolet a StrictMode.

findDOMNode (component)

Si aquest component s'ha muntat al DOM, retorna l'element DOM del navegador natiu corresponent. Aquest mètode és útil per llegir valors del DOM, com ara valors de camps de formulari, i realitzar mesures DOM. En la majoria dels casos, podeu adjuntar una referència al node DOM i evitar fer servir findDOMNode.

Quan un component retorna null o fals, findDOMNode retorna null. Quan un component es representa a una cadena, findDOMNode retorna un node DOM de text que conté aquest valor. El component pot retornar un fragment amb diversos fills en cas que findDOMNode hagi retornat el node DOM corresponent al primer fill no buit.

Nota:

findDOMNode només funciona amb components muntats (és a dir, components que s'han col·locat al DOM). Si intenteu cridar-ho en un component que encara no s'ha muntat (com ara trucar a findDOMNode() a render() en un component que encara no s'ha creat), es llançarà una excepció.

findDOMNode no es pot utilitzar en components de funció.

Elements DOM

React implementa un sistema DOM independent del navegador per al rendiment i amb compatibilitat entre navegadors. Aprofitem aquesta oportunitat per netejar algunes de les vores aspres de la implementació DOM del navegador.

A React, totes les propietats i atributs DOM (inclosos els controladors d'esdeveniments) han de ser camelcase. Per exemple, l'atribut HTML tabindex correspon a l'atribut tab Index a React.

Les excepcions són els atributs aria-* i data-*, que han d'anar en minúscules. Per exemple, podeu tenir una etiqueta d'àrea com a etiqueta d'àrea.

Diferències en els atributs

Diversos atributs funcionaran de manera diferent entre React i HTML:

comprovat

L'atribut marcat és compatible amb components d'una casella de selecció o ràdio de tipus . És útil per a la fabricació de components controlats. Podeu utilitzar-ho per determinar si el component està comprovat o no.

DefaultChecked és la contrapart no marcada que determina que el component es comprova la primera vegada que es munta.

className

Per especificar la classe CSS, utilitzeu l'atribut className. S'aplica a tots els elements normals DOM i SVG com, , etc.

Si utilitzeu React with Web Components (poc comú), utilitzeu l'atribut class.

dangerouslySetInnerHTML

Dangerously SetInnerHTML és el reemplaçament de React per utilitzar innerHTML al navegador DOM. La configuració del codi HTML és arriscada perquè és fàcil exposar els usuaris a un atac de scripting entre llocs (XSS).

Així que podem configurar HTML directament des de React, però has d'escriure SetInnerHTML de manera perillosa i passar un objecte amb la clau __html per recordar que és perillós.

Per exemple:

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

Els elements React utilitzen htmlFor, ja que per a és una paraula reservada a JavaScript.

onChange

L'esdeveniment onChange es comporta com s'esperava; l'esdeveniment s'activa cada vegada que es canvia un camp de formulari.

No utilitzem intencionadament el comportament del navegador existent perquè el canvi és gran per al seu comportament i React depèn de l'esdeveniment per gestionar l'entrada de l'usuari en temps real.

seleccionat

Si voleu marcar com a seleccionat, consulteu el valor d'aquesta opció al valor de. Consulteu 'Seleccioneu l'etiqueta' per obtenir instruccions detallades.

Nota:

En els casos màxims, els noms de classe fan referència a classes definides en un full d'estil CSS extern. Els estils s'utilitzen a les aplicacions React per afegir estils calculats en temps de renderització. L'atribut style accepta l'objecte JavaScript amb propietats camel en lloc d'una cadena CSS.

Es conforma Estil DOM propietats de JavaScript, és més eficient i evita XSS forats de seguretat.

Per exemple:

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

Tingueu en compte que: els estils no tenen prefix automàtic. Per admetre navegadors antics, hem de proporcionar propietats d'estil:

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

Les claus d'estil corresponen a l'accés a propietats als nodes DOM des de JS. Els prefixos del proveïdor MS comencen amb una lletra majúscula.

React afegirà automàticament un sufix 'px' a algunes propietats d'estil de nombre en línia. Si volem utilitzar unitats diferents de 'px', especifiqueu el valor com a cadena amb la unitat desitjada.

per exemple:

101 milions

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

Tanmateix, no totes les propietats d'estil es converteixen en cadenes de píxels.

Suprimeix l'alerta de contingut editable

Hi ha un avís si un element per a nens està marcat com a contingut editable, ja que no funcionarà. L'atribut suprimeix l'avís.

Avís de supressió

Si fem servir la representació React del costat del servidor, és un avís quan el servidor i el client es mostren amb contingut diferent. Tanmateix, és difícil garantir una coincidència exacta en casos excepcionals. Per exemple, s'espera que les marques de temps siguin diferents al servidor o al client.

Si configureu l'avís de supressió com a true, no advertirà sobre desajustos entre els atributs i el contingut de l'element.

Només funcionava a un nivell de profunditat i estava pensat per ser utilitzat com a escapada.

valor

L'atribut de valor està dissenyat pels components , i. Podeu utilitzar-lo per establir el valor del component.

És útil per a la fabricació de components controlats. defaultValue i igual a no marcat defineixen el valor del component quan es munta en sèrie.

Tots els atributs HTML admesos

S'admet qualsevol atribut DOM personalitzat i estàndard.

React ha proporcionat una API centrada en JavaScript al DOM. I els components de React sovint contenen accessoris personalitzats i relacionats amb DOM, i després React utilitza les mateixes convencions de CamelCase que l'API DOM:

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