Una guida rapida per imparare React e come funziona il suo DOM virtuale

Foto di @simonmigaj da Unsplash
Questo fa parte della mia serie "React for principianti" sull'introduzione di React, le sue caratteristiche principali e le migliori pratiche da seguire. Altri articoli stanno arrivando!
Articolo successivo>

Vuoi imparare React senza eseguire la scansione della documentazione (ben scritta a proposito)? Hai fatto clic sull'articolo giusto.

Impareremo come eseguire React con un singolo file HTML e quindi esponerci a un primo frammento.

Alla fine, sarai in grado di spiegare questi concetti: oggetti di scena, componente funzionale, JSX e DOM virtuale.

L'obiettivo è creare un orologio che mostri ore e minuti. React offre di progettare il nostro codice con componenti. Creiamo il nostro componente orologio.

Ignora le importazioni di scriptplate HTML e script per dipendenze (con unpkg, vedi esempio React). Le poche righe rimanenti sono in realtà codice React.

Innanzitutto, definire il componente Watch e il suo modello. Quindi montare React nel DOM e chiedere di renderizzare un orologio.

Iniettare dati nel componente

Il nostro orologio è piuttosto stupido, mostra le ore e i minuti che gli abbiamo fornito.

Puoi provare a giocare e cambiare il valore di quelle proprietà (chiamati oggetti di scena in React). Visualizzerà sempre ciò che hai chiesto anche se non si tratta di numeri.

Questo tipo di componente React con solo una funzione di rendering sono componenti funzionali. Hanno una sintassi più concisa rispetto alle classi.

I puntelli sono solo dati passati a un componente, generalmente da un componente circostante. Il componente utilizza i puntelli per la logica aziendale e il rendering.

Ma non appena gli oggetti di scena non appartengono al componente sono immutabili. Pertanto, il componente che ha fornito gli oggetti di scena è l'unico pezzo di codice in grado di aggiornare i valori degli oggetti di scena.

L'uso degli oggetti di scena è piuttosto semplice. Creare un nodo DOM con il nome del componente come nome del tag. Quindi assegnagli gli attributi che prendono il nome dagli oggetti di scena. Quindi i puntelli saranno disponibili tramite this.props nel componente.

Che dire di HTML non quotato?

Ero sicuro che noterai il codice HTML non quotato restituito dalla funzione di rendering. Questo codice utilizza il linguaggio JSX, è una sintassi abbreviata per definire un modello HTML nei componenti di React.

Ora potresti voler evitare che JSX definisca il modello del componente. In realtà, JSX sembra zucchero sintattico.

Dai un'occhiata al seguente frammento che mostra sia la sintassi JSX che React per costruire la tua opinione.

Andare oltre con il DOM virtuale

Quest'ultima parte è più complicata ma molto interessante. Ti aiuterà a capire come React sta lavorando sotto il cofano.

L'aggiornamento di elementi in una pagina Web (un nodo nella struttura DOM) comporta l'utilizzo dell'API DOM. Ridipingerà la pagina ma può essere lenta (vedi questo articolo per il motivo).

Molti framework come React e Vue.js aggirano questo problema. Trovano una soluzione chiamata Virtual DOM.

L'idea è semplice Leggere e aggiornare l'albero del DOM è molto costoso. Apporta quindi il minor numero di modifiche possibile e aggiorna il minor numero possibile di nodi.

La riduzione delle chiamate all'API DOM comporta la conservazione della rappresentazione dell'albero DOM. Dal momento che stiamo parlando di framework JavaScript, la scelta di JSON sembra legittima.

Questo approccio riflette immediatamente le modifiche nel DOM virtuale.

Inoltre, raccoglie alcuni aggiornamenti da applicare successivamente al Real DOM in una sola volta (per evitare problemi di prestazioni).

Ricordi React.createElement? In realtà, questa funzione (chiamata direttamente o tramite JSX) crea un nuovo nodo nel DOM virtuale.

Per applicare gli aggiornamenti, entra in gioco la funzionalità principale del DOM virtuale, l'algoritmo di riconciliazione.

Il suo compito è trovare la soluzione più ottimizzata per risolvere la differenza tra lo stato DOM virtuale precedente e quello corrente.

E quindi applicare il nuovo DOM virtuale al DOM reale.

Ulteriori letture

Questo articolo approfondisce le spiegazioni di DOM interne e virtuali di React. Tuttavia, è importante sapere un po 'su come funziona un framework quando lo si utilizza.

Se vuoi sapere come funziona il DOM virtuale in dettaglio, segui i miei consigli di lettura. Puoi scrivere il tuo DOM virtuale e conoscere il rendering DOM.

Grazie per aver letto. Scusa se questo è troppo tecnico per il tuo primo passo in React. Ma spero ora che tu sia a conoscenza di quali oggetti di scena, componente funzionale, JSX e Virtual DOM sono.

Se hai trovato utile questo articolo, fai clic alcune volte sul pulsante per fare in modo che gli altri trovino l'articolo e mostri il tuo supporto!

Non dimenticare di seguirmi per ricevere notifiche sui miei articoli in arrivo

Questo fa parte della mia serie "React for principianti" sull'introduzione di React, le sue caratteristiche principali e le migliori pratiche da seguire.
Articolo successivo>

Dai un'occhiata ai miei altri articoli

➥ JavaScript

  • Come migliorare le tue abilità JavaScript scrivendo il tuo framework di sviluppo Web
  • Errori comuni da evitare durante l'utilizzo di Vue.js

➥ Suggerimenti e trucchi

  • Ferma il debug doloroso di JavaScript ed abbraccia Intellij con la mappa di origine
  • Come ridurre enormi pacchetti JavaScript senza sforzo

Originariamente pubblicato su www.linkedin.com il 6 febbraio 2018.