Cosa significa il termine 'render' in ReactJS (come rendere un componente)?

In poche parole, il rendering è il processo di trasformazione dei tuoi componenti React in nodi DOM (Document Object Model) che il tuo browser può capire e visualizzare sullo schermo.

La manipolazione DOM è estremamente lenta. Al contrario, la manipolazione degli elementi React è molto, molto più veloce. React sfrutta al meglio questo aspetto creando una rappresentazione virtuale di come dovrebbe essere il DOM, chiamata Virtual DOM[1].

Ogni volta che si apportano modifiche all'applicazione React in esecuzione, come l'inserimento di testo, la rimozione di un elemento, l'aggiunta di un elemento, ecc, React raggruppa tutti questi cambiamenti nel suo Virtual DOM, quindi confronta questa rappresentazione con il DOM reale, trova ciò che deve essere aggiornato, e quindi apporta le più piccole modifiche possibili al DOM reale per mantenerli sincronizzati, mantenendo l'applicazione efficiente.

Infine, vale la pena notare che React si separa in 2 librerie: la libreria principale di React e la libreria ReactDOM. La libreria React gestisce tutta la creazione e la manipolazione degli elementi, mentre la libreria ReactDOM si occupa esclusivamente del rendering di questi elementi al browser. Questa separazione di interessi permette a React di non puntare solo al browser, ma anche a qualsiasi altra piattaforma.

Per esempio, si può scrivere un'app in React e poi trasformarla in un'app mobile nativa per iOS o Android, usando la libreria react-native invece di ReactDOM, o costruire un'app di realtà virtuale sostituendo ReactDOM con react-vr. Le possibilità sono infinite, a patto che si possa scrivere una libreria per rendere i propri elementi al giusto target.

Puoi saperne di più su React Native qui[2], e su React VR qui[3].

Footnotes

[1] Come funziona Virtual-DOM e diffing in React - Gethyl George Kurian - Medium[2] React Native - Un framework per costruire app native usando React[3] React VR | Un framework per costruire app VR usando React