Cosas que quizás no sabías de React
Alguna vez te has preguntando ¿Cómo funciona el método render de ReactDOM? ¿Por qué hay que importar React cada vez que creamos un componente? Esto y más te enseñare en este artículo. ❤
¿Cómo funciona el método render de ReactDOM?
Este método es similar a document.appendChild() la diferencia consiste en que ReactDOM nos permite "incrustar" elementos de React en un contenedor y con appendChild solo podemos hacerlo con elementos HTML.
Otra de las diferencias que existen entre estos dos métodos, es que appendChild() hace un push del elemento al contenedor (lo que quiere decir que los elementos existentes se mantienen y se agrega uno nuevo), en cambio el render de React DOM reemplaza totalmente el contenido del contenedor, basicamente sería un container.innerHTML
Mencionado esto, podemos agregar un spinner en el contenedor donde se renderizará nuestra aplicación y este desaparecerá automáticamente en el montaje de la app 🤔.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<title>Dartiles Dev</title>
</head>
<body>
<div id="root">
<p>Este contenido será reemplazado por el método render de React DOM o se mantendrá si usamos el appendChild</p>
</div>
</body>
</html>Suponiendo que tenemos este HTML podemos agregar contenido con appendChild y render.
Veamos un ejemplo: const dartilesTitle = document.createElement("h1");
dartilesTitle.innerHTML = "Estas en dartiles.dev";
const container = document.getElementById("root");
container.appendChild(dartilesTitle);
import React from 'react'
import ReactDOM from 'react-dom'
const dartilesTitle = <h1>Estás en dartiles.dev</h1>
const container = document.getElementById('root')
ReactDOM.render(dartilesTitle, container)
Una forma de aprender a identificar el método render de ReactDOM es recordar que el primer parámetro del método se refiere a que queremos renderizar, es decir, el elemento que queremos añadir, mientras que el segundo se refiere a donde añadirlo; en que contenedor.
Te dejo un link en stackblitz con el setTimeout para que puedas observar lo que pasa con los dos métodos 😁
¿Por qué hay que importar React cada vez que creamos un componente?
Como te habrás fijado en el ejemplo de React, hacemos un import React from 'react' pero aparentemente en ningún lado lo usamos y si comentamos esta linea ocurre un error que nos dice que React is not defined
Entonces, ¿Por qué nos aparece este error si no estamos usando explícitamente React? Bien para encontrar la respuesta a nuestra pregunta, primero debemos saber que pasa por detrás cuando escribimos código JSX.
Cuando nosotros estamos escribiendo JSX (entiéndase jsx como el "html" dentro de javascript), al final babel está transformando ese código a React.createElement(), veámoslo mucho mejor con un ejemplo:
/* ANTES DE LA COMPILACIÓN */
import React from 'react'
const dartilesContainer = <div>Estás en dartiles.dev</div>
/* DESPUÉS DE LA COMPILACIÓN */
import React from 'react';
const dartilesContainer = React.createElement("div", null, "Estás en dartiles.dev");
// El código JSX desaparece y se convierte en React.createElementEs por eso que siempre necesitamos importar React al crear un componente o al utilizar código JSX, si bien es cierto hay frameworks como NextJS que hacen este trabajo por nosotros, en React no es así, al menos en las versiones anteriores a la 17.
Si nos vamos más a profundidad React.createElement crea un un objeto que contiene la información que React va a leer para crear elementos en el DOM. Partiendo del ejemplo anterior, algunas propiedades principales del objeto resultante es el siguiente:const dartilesContainer = {
type: 'div',
props: {
children: 'Estás en dartiles.dev'
}
}
Como te podrás imaginar si tuviéramos que escribir nuestro componentes con React.createElement directamente nuestros archivos crecerían drásticamente, además de que se sería engorroso trabajar con ellos. Es por eso que JSX existe, para simplificar nuestro código y hacernos más fácil la vida a la hora de crear componentes con él.
¿Cuándo NO importar React?
Muy probablemente hayas importado React al crear custom hooks, porque te acostumbraste que cada vez que creamos un nuevo archivo había que hacer esto y lo cierto es que no, solamente tienes que importarlo cuando veas código JSX; de igual forma no podrás olvidarte de hacerlo porque tu aplicación dará error.import { useState } from "react";
export const useHook = () => {
const [state, setState] = useState("Estás en dartiles.dev");
return [state, setState];
};
¿Qué es el Virtual DOM?
Seguramente en tu proceso de aprendizaje de React habrás visto el término "Virtual DOM", si estás un poco más experimentado sabrás que DOM se refiere al Document Object Model, la API para representar documentos HTML/XML.
Ahora que sabemos que Virtual DOM y DOM son cosas distintas, llamémoslo VDOM y DOM respectivamente.
La palabra Virtual sirve más que nada para diferenciarlo del DOM, su función es crear un "bridge" o puente entre nuestra aplicación y el DOM, manteniendo el memoria el estado de la aplicación y una copia del DOM.
Gracias a que React mantiene en memoria el DOM, cada vez que se produzca un cambio en algún componente se actualiza el VDOM, luego de eso se compara el VDOM anterior con el nuevo y la diferencia entre estas versiones es finalmente reflejada en el DOM.
Esto hace que se manipule únicamente las secciones que cambiaron y no todo el árbol del DOM, obteniendo así mejor performance para nuestra aplicación.
Lo explicado anteriormente es similar a lo que hace git, detecta que partes cambiaron y los almacena, y al hacer el merge se unifican los cambios.
Te dejo a continuación una imagen que encontré por internet que te ayudará a entender mucho mejor este concepto:
Conclusiones
Este es un resumen de cositas que quizás no sabías, hay mucho más y más profundas 🤓, te invito a decirme en los comentarios que crees que falto añadir en este artículo y compartir este artículo para los que están inciando en el aprendizaje de React ❤
Comentar