DOM reale/del browser:

DOM sta per 'Modello oggetto documento'. È una rappresentazione strutturata dell'HTML nella pagina Web o nell'applicazione. Rappresenta l'intera interfaccia utente (Interfaccia utente) del applicazione web come struttura dati ad albero.

È un rappresentazione strutturale degli elementi HTML di un'applicazione web in parole semplici.

Ogni volta che c'è qualche cambiamento nel stato dell'interfaccia utente dell'applicazione, DOM viene aggiornato e rappresenta la modifica. Il DOM viene renderizzato e manipolato ad ogni modifica per l'aggiornamento dell'interfaccia utente dell'applicazione, che influisce sulle prestazioni e la rallenta.

Pertanto, con molti componenti dell'interfaccia utente e la struttura complessa di DOM, Si aggiornerà in modo più costoso in quanto è necessario eseguire nuovamente il rendering con ogni modifica.

Il DOM è costituito come una struttura dati ad albero. Consiste nel nodo per ciascuno Elemento dell'interfaccia utente presente nel documento web.

linux esegui cmd

Aggiornamento del DOM:

Se conosciamo qualcosa su JavaScript potresti vedere persone che utilizzano il file 'getElementById()' O 'getElementByClass()' metodo per modificare il contenuto del DOM.

Ogni volta che si verifica un cambiamento nello stato della tua applicazione, il DOM viene aggiornato per riflettere il cambiamento nell'interfaccia utente.

Come il DOM virtuale accelera le cose:

Quando vengono aggiunte nuove cose all'applicazione, viene creato il DOM virtuale, rappresentato come un albero. Ogni elemento nell'applicazione è un nodo nell'albero.

Pertanto, ogni volta che si verifica un cambiamento nella posizione di un elemento, viene creato un nuovo DOM virtuale. L'albero DOM virtuale più recente viene confrontato con quello più recente, dove vengono annotate le modifiche.

Trova il modo possibile per apportare queste modifiche tramite il DOM effettivo. Quindi gli elementi aggiornati verranno nuovamente visualizzati sulla pagina.

In che modo il DOM virtuale aiuta in React:

Tutto in React viene osservato come un componente, un componente funzionale e un componente di classe. Un componente ha uno stato. Ogni volta che modifichiamo qualcosa nel file JSX, per dirla semplicemente, ogni volta che viene modificato lo stato del componente, react aggiorna il suo albero DOM virtuale.

React mantiene due DOM virtuali ogni volta. Il primo contiene il DOM virtuale aggiornato e l'altro è una versione pre-aggiornata del DOM virtuale aggiornato. Confronta la versione pre-aggiornata del DOM virtuale aggiornato e trova cosa è stato modificato nel DOM, ad esempio quali componenti verranno modificati.

Anche se può sembrare inefficace, il costo non è elevato, poiché l'aggiornamento del DOM virtuale non può richiedere molto tempo.

Quando si confronta l'attuale albero DOM virtuale con quello precedente è noto come 'sfidare'. Una volta che React sa cosa è cambiato, aggiorna gli oggetti nel DOM effettivo. React utilizza aggiornamenti batch per aggiornare il DOM effettivo. Le modifiche al DOM effettivo vengono inviate in batch anziché inviare aggiornamenti per la singola modifica nello stato del componente.

Il re-rendering dell'interfaccia utente è la parte più costosa e React riesce a farlo in modo più efficiente garantendo il Real DOM che riceve gli aggiornamenti batch per eseguire nuovamente il rendering dell'interfaccia utente. Viene chiamato il processo di conversione delle modifiche nel DOM effettivo riconciliazione.

Migliora le prestazioni ed è il motivo principale per cui gli sviluppatori adorano React e il suo DOM virtuale.

Cos'è il DOM virtuale di React?

Il concetto di Virtual DOM arriva a rendere le prestazioni del Real DOM migliori e più veloci. Il DOM virtuale è un simbolo virtuale del DOM.

Ma la differenza principale è che ogni volta, ad ogni modifica, viene aggiornato il DOM virtuale invece del DOM reale.

Ad esempio, il vero E DOM virtuale è rappresentato come a struttura ad albero. Ogni elemento nell'albero è un nodo. UN nodo viene aggiunto all'albero quando un nuovo elemento viene aggiunto all'interfaccia utente dell'applicazione.

Se la posizione di qualsiasi elemento cambia, a nuovo viene creato l'albero DOM virtuale. Il DOM virtuale calcola il numero minimo di operazioni sul DOM reale per apportare modifiche al DOM reale. È efficiente e offre prestazioni migliori riducendo i costi e le operazioni di ri-rendering dell'intero DOM reale.

Ora abbiamo una normale comprensione del DOM reale e virtuale.

Diamo un'occhiata a come Reagire funziona utilizzando DOM virtuale.

• Ogni interfaccia utente è un individuo componente, e ogni componente ha il suo stato.
• Segue la reazione modelli osservabili e osserva i cambiamenti di stato.
• Ogni volta che viene apportata una modifica allo stato del componente, React aggiorna l'albero DOM virtuale ma non cambia il vero e proprio albero DOM.
• Reagire confronta IL Versione attuale del DOM virtuale con il versione precedente Dopo in aggiornamento.
• React sa quali oggetti vengono modificati nel file DOM virtuale. Sostituisce gli oggetti nel file DOM effettivo , portando a manipolazione minima operazioni.
• Questo processo è noto come 'differenziazione'. Questa immagine renderà chiaro il concetto.

Nell'immagine, il blu scuro cerchi sono i nodi che sono stati cambiati. IL stato di questi componenti è cambiato. React calcola la differenza tra la versione precedente e quella attuale del albero DOM virtuale, e l'intero sottoalbero principale viene sottoposto nuovamente a rendering per mostrare l'interfaccia utente modificata.

L'albero aggiornato è batch aggiornato (che gli aggiornamenti al DOM reale vengono inviati in batch invece di inviare aggiornamenti per ogni modifica di stato.) al DOM reale.

Per approfondire questo aspetto, dobbiamo conoscere il Reagisci renderizza () funzione.

Quindi, dobbiamo conoscere alcuni degli aspetti importanti caratteristiche di Reagire.

JSX

JSX sta per JavaScriptXML. È un estensione della sintassi di JS. Usando JSX, possiamo scrivere Strutture HTML nel file che contiene Codice JavaScript.

Componenti

I componenti sono indipendente E riutilizzabile di codice. Ogni interfaccia utente nell'app React è un componente. Una singola applicazione ne ha molte componenti.

I componenti sono di due tipi, componenti di classe E componenti funzionali.

I componenti della classe sono con stato perché utilizzano il loro 'stato' per modificare l'interfaccia utente. I componenti funzionali sono componenti senza stato. Agiscono come una funzione JavaScript che accetta un parametro arbitrario chiamato 'props'.

Reagire ai ganci sono stati introdotti stati di accesso con componenti funzionali.

ciclo while Java

Metodi del ciclo di vita

Metodi del ciclo di vita sono metodi importanti integrato reagire, che operano sui componenti attraverso la loro durata nel DOM. Ogni componente di React è passato attraverso un ciclo di vita di eventi.

Il metodo render() è il massimo utilizzato metodo del ciclo di vita .

È l'unico metodo interno Componenti della classe React . Quindi, in ogni classe, viene chiamato il componente render().

Il metodo render() gestisce il rendering del componente tramite l'interfaccia utente. Il render() contiene tutta la logica visualizzata sullo schermo. Può anche avere a nullo value se non vogliamo mostrare nulla sul display.

L'esempio è mostrato di seguito:

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

L'esempio mostrerà il JSX scritto nel render().

Quando un stato O puntello viene aggiornato all'interno del componente, rendere() restituirà un diverso albero di elementi React.

Quando si scrive il codice nella console o nel file JavaScript, accadrà quanto segue:

• Il browser analizza l'HTML per trovare il nodo con l'ID.
• Rimuove l'elemento figlio dell'elemento.
• Aggiorna l'elemento (DOM) con il 'valore aggiornato'.
• Si ricalcola CSS per i nodi padre e figlio.
• Quindi, aggiorna il layout.

Infine, attraversa l'albero sullo schermo.

Quindi, come sappiamo, l'aggiornamento del file DOM comporta la modifica del contenuto. È più legato ad esso.

Algoritmi complessi sono coinvolti nel ricalcolo dei CSS e nella modifica dei layout, che influiscono sulle prestazioni.

Quindi, React ha molti modi per gestirlo, poiché utilizza qualcosa noto come DOM virtuale.

reactdome

Il pacchetto react-dom fornisce metodi specifici del DOM al livello più alto dell'applicazione per uscire dal modello React, se necessario.

 import * as ReactDOM from 'react-dom'; 

Se usi ES5 con npm dovresti scrivere anche:

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

IL reagire-dom Il pacchetto fornisce anche moduli specifici per le app client e server:

• reagire-dom/cliente
• react-dom/server

Il pacchetto react-dom esporta questi metodi:

• crearePortale()
• flushSync()

Vengono esportati anche i metodi react-dom:

• rendere ()
• idratare ()
• trovaDOMNode()
• smontaComponentAtNode ()

Nota: sia l'idratazione che il rendering sono stati sostituiti con metodi client più recenti.

Supporto del browser

React supporta tutti i browser moderni e per le versioni precedenti sono necessari alcuni polyfill.

Nota: non possiamo supportare i browser più vecchi che non supportano i metodi ES5, come Internet Explorer. Puoi scoprire che le app funzionano nei browser più recenti se polyfill come es5-shim ed es5-sham sono inclusi nella pagina, ma sei da solo se segui il percorso.

Riferimento

crearePortale()

Crea Portal () Il portale fornisce il modo di leggere i bambini nel nodo DOM, che esiste al di fuori della classificazione del componente DOM.

flushSync()

Forza React aggiorna simultaneamente la richiamata fornita. Garantisce che il DOM venga aggiornato immediatamente.

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

Nota:

• Utilizzare con parsimonia. Flush Sync ha danneggiato notevolmente le prestazioni.
• FlushSync forzerà i limiti in sospeso a mostrare lo stato di fallback.
• Esegue gli effetti in sospeso e applica contemporaneamente gli aggiornamenti prima di restituirli.
• flushSync scarica gli aggiornamenti all'esterno della callback per svuotare gli aggiornamenti della callback. Per esempio, se ci sono aggiornamenti in sospeso da un clic, React potrebbe eliminarli prima di eliminare gli aggiornamenti al callback.

Riferimento all'eredità

rendere()

 render(element, container[, callback]) 

Nota: il rendering viene sostituito con la creazione di Root in React. Rendi un elemento React nel DOM nel contenitore fornito e restituisci un riferimento al componente.

Se un elemento React fosse stato precedentemente renderizzato in un qualsiasi contenitore, verrebbe eseguito un aggiornamento su di esso ed è necessario riflettere l'ultimo elemento React.

Viene eseguito quando viene eseguito il rendering del componente se viene fornito il callback opzionale.

Nota:

Il metodo Render() controlla il contenuto del nodo contenitore quando passa. Qualsiasi elemento DOM esistente viene sostituito.

Render() non altera il nodo del contenitore (può solo modificare i figli del contenitore). Potrebbe essere possibile inserire un componente in un nodo DOM esistente senza sovrascrivere gli elementi figlio.

Render() attualmente fa riferimento all'istanza root di ReactComponent.

Tuttavia, il suo valore restituito è ereditato e può essere evitato poiché, in alcuni casi, le versioni future di React potrebbero generare componenti in modo asincrono.

Se hai bisogno di un riferimento al prototipo ReactComponent, la soluzione migliore è allegare un riferimento di richiamo all'elemento.

Render() viene utilizzato per idratare un contenitore renderizzato in modo che il server sia obsoleto. Utilizzo idrataRadice() al posto di esso.

idrato()

l'idrato viene sostituito con la radice idrato.

È esattamente come render() ma viene utilizzato per un contenitore il cui contenuto HTML viene renderizzato da ReactDOMServer. React proverà a connettere gli ascoltatori di eventi al markup corrente.

 hydrate(element, container[, callback]) 

Nota:

React si aspetta che il contenuto renderizzato sia identico tra server e client. Possiamo correggere il contenuto del testo, ma dobbiamo considerare le incoerenze come errori e correggerle. In modalità sviluppo, React avverte dell'incoerenza durante l'idratazione.

Non vi è alcuna garanzia che le differenze specifiche vengano corrette per le discrepanze.

È importante per motivi di prestazioni nella maggior parte delle applicazioni e sarebbe troppo costoso convalidare tutti i flag.

Supponiamo che l'attributo o il contenuto del testo di un elemento differisca inevitabilmente tra il server e il client (ad esempio, il timestamp ). In questo caso possiamo silenziare l'avviso aggiungendo sopprimeHydrationWarning = {true} all'elemento.

Se non è un elemento di testo, non può tentare di correggerlo in modo che possa rimanere incoerente fino a futuri aggiornamenti.

È possibile eseguire un rendering in due passaggi se è necessario fornire deliberatamente informazioni diverse sul server e sul client. I componenti lasciati sul client possono leggere variabili di stato come this.state.isClient, dove verrà impostato su true componenteDidMount().

scanner in java

Il passaggio di rendering iniziale farà lo stesso del server, evitando incoerenze, ma il passaggio aggiuntivo verrà effettuato in modo sincrono dopo l'idratazione.

Nota: questo approccio renderà i componenti più lenti poiché lo fanno due volte, quindi usalo con attenzione.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Nota:

smontaComponentAtNode è stato sostituito con root.unmount() in Reagire. Cancella il componente React montato dal DOM e pulisce i suoi gestori di eventi e il suo stato.

Se nessun componente è stato montato sul contenitore, non può fare nulla. Restituisce vero se nessun componente è montato e falso se non c'è nessun componente da smontare.

trovaDOMNode()

Nota: findDOMNode è una via di fuga utilizzata per accedere al nodo DOM sottostante. Questa via di fuga è scoraggiata nella maggior parte dei casi perché compromette l'astrazione dei componenti. È stato deprecato in StrictMode.

findDOMNode(componente)

Se questo componente è stato montato sul DOM, restituisce il corrispondente elemento DOM del browser nativo. Questo metodo è utile per leggere valori dal DOM, come i valori dei campi del modulo, ed eseguire misurazioni DOM. Nella maggior parte dei casi, puoi allegare un riferimento al nodo DOM ed evitare di utilizzare findDOMNode.

Quando un componente restituisce null o false, findDOMNode restituisce null. Quando un componente viene reso in una stringa, findDOMNode restituisce un nodo DOM di testo contenente quel valore. Il componente può restituire un frammento con più figli nel caso in cui findDOMNode abbia restituito il nodo DOM corrispondente al primo figlio non vuoto.

Nota:

findDOMNode funziona solo su componenti montati (ovvero, componenti che sono stati inseriti nel DOM). Se provi a chiamarlo su un componente che non è stato ancora montato (come chiamare findDOMNode() su render() su un componente che non è stato ancora creato), verrà generata un'eccezione.

findDOMNode non può essere utilizzato nei componenti della funzione.

Elementi DOM

React implementa un sistema DOM indipendente dal browser per le prestazioni e con compatibilità tra browser. Cogliamo l'occasione per ripulire alcuni aspetti irregolari nell'implementazione DOM del browser.

In React, tutte le proprietà e gli attributi DOM (inclusi i gestori di eventi) devono essere camelcase. Ad esempio, l'attributo HTML tabindex corrisponde all'attributo tab Index in React.

Le eccezioni sono gli attributi aria-* e data-*, che devono essere minuscoli. Ad esempio, puoi avere un'etichetta di area come etichetta di area.

Differenze negli attributi

Diversi attributi funzioneranno in modo diverso tra React e HTML:

controllato

L'attributo checked è supportato dai componenti di una casella di controllo o di una radio di tipo . È utile per la produzione di componenti controllati. Puoi usarlo per determinare se il componente è selezionato o meno.

DefaultChecked è la controparte non controllata che determina che il componente viene controllato la prima volta che viene montato.

nome della classe

Per specificare la classe CSS, utilizzare l'attributo className. Si applica a tutti gli elementi DOM e SVG regolari come, , eccetera.

Se usi React con i componenti Web (non comune), usa invece l'attributo class.

pericolosamenteSetInnerHTML

Dangerously SetInnerHTML è il sostituto di React per l'utilizzo di innerHTML nel browser DOM. La configurazione del codice HTML è rischiosa perché è facile esporre gli utenti a un attacco XSS (cross-site scripting).

Quindi possiamo impostare l'HTML direttamente da React, ma devi digitare pericolosamente SetInnerHTML e passare un oggetto con la chiave __html per ricordare che è pericoloso.

Per esempio:

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

Gli elementi React utilizzano invece htmlFor, poiché for è una parola riservata in JavaScript.

onChange

L'evento onChange si comporta come previsto; l'evento si attiva ogni volta che un campo del modulo viene modificato.

Non utilizziamo intenzionalmente il comportamento del browser esistente perché il cambiamento è importante per il suo comportamento e React si basa sull'evento per gestire l'input dell'utente in tempo reale.

selezionato

Se desideri contrassegnare come selezionato, fai invece riferimento al valore di tale opzione nel valore . Per istruzioni dettagliate, vedere 'Seleziona tag'.

Nota:

Nella maggior parte dei casi, i nomi delle classi si riferiscono a classi definite in un foglio di stile CSS esterno. Gli stili vengono utilizzati nelle app React per aggiungere stili calcolati in fase di rendering. L'attributo style accetta l'oggetto JavaScript con proprietà camel invece di una stringa CSS.

È conforme In stile DOM proprietà JavaScript, è più efficiente ed evita XSS buchi di sicurezza.

Per esempio:

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

Tieni presente che: gli stili non hanno il prefisso automatico. Per supportare i browser più vecchi, dobbiamo fornire le proprietà di stile:

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

Le chiavi di stile sono cammello per corrispondere all'accesso alle proprietà sui nodi DOM da JS. I prefissi del provider MS iniziano con una lettera maiuscola.

trova il mio iPhone da Android

React aggiungerà automaticamente un suffisso 'px' ad alcune proprietà di stile dei numeri in linea. Se vogliamo utilizzare unità diverse da 'px', specificare il valore come una stringa con l'unità desiderata.

Per esempio:

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

Tuttavia, non tutte le proprietà di stile vengono convertite in stringhe di pixel.

Elimina avviso contenuto modificabile

Viene visualizzato un avviso se un elemento per bambini è contrassegnato come contenuto modificabile, poiché non funzionerà. L'attributo elimina l'avviso.

Avviso di soppressione

Se utilizziamo il rendering React lato server, viene visualizzato un avviso quando il server e il client eseguono il rendering con contenuti diversi. Tuttavia, in rari casi è difficile garantire una corrispondenza esatta. Ad esempio, è previsto che i timestamp differiscano sul server o sul client.

Se imposti l'avviso di soppressione su true, non avviserà delle discrepanze tra attributi e contenuto dell'elemento.

Funzionava solo a un livello di profondità e doveva essere usato come via di fuga.

valore

L'attributo value è progettato dai componenti , e . Puoi usarlo per impostare il valore del componente.

È utile per la produzione di componenti controllati. defaultValue e uguale a deselezionato impostano il valore del componente quando montato in serie.

Tutti gli attributi HTML supportati

Sono supportati tutti gli attributi DOM personalizzati e standard.

React ha fornito un'API incentrata su JavaScript nel DOM. E i componenti React spesso contengono oggetti di scena personalizzati e relativi al DOM, quindi React utilizza le stesse convenzioni CamelCase dell'API DOM:

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