Renderizado y Confirmación
Antes de que tus componentes se muestren en pantalla, React debe renderizarlos. Comprender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu código y a explicar su comportamiento.
Aprenderás
- Qué significa renderizar en React
- Cuándo y por qué React renderiza un componente
- Los pasos involucrados en mostrar un componente en pantalla
- Por qué el renderizado no siempre produce una actualización del DOM
Imagina que tus componentes son cocineros en la cocina, preparando platos deliciosos con ingredientes. En este escenario, React es el camarero que toma los pedidos de los clientes y les lleva sus órdenes. Este proceso de solicitar y servir la interfaz de usuario tiene tres pasos:
- Desencadenarun renderizado (entregar el pedido del cliente a la cocina)
- Renderizarel componente (preparar el pedido en la cocina)
- Confirmaren el DOM (colocar el pedido en la mesa)
Desencadenar
Renderizar
Confirmar
Ilustrado porRachel Lee Nabors
Paso 1: Desencadenar un renderizado
Hay dos razones para que un componente se renderice:
- Es el renderizado inicial del componente.
- El estado del componente (o de uno de sus ancestros) ha sido actualizado.
Renderizado inicial
Cuando tu aplicación se inicia, necesitas desencadenar el renderizado inicial. Los frameworks y sandboxes a veces ocultan este código, pero se hace llamando acreateRootcon el nodo DOM objetivo, y luego llamando a su métodorendercon tu componente:
Intenta comentar la llamada aroot.render()y ¡verás desaparecer el componente!
Nuevos renderizados cuando se actualiza el estado
Una vez que el componente se ha renderizado inicialmente, puedes desencadenar más renderizados actualizando su estado con lafunción de establecimiento (set).Actualizar el estado de tu componente pone automáticamente en cola un renderizado. (Puedes imaginar esto como un cliente de restaurante que pide té, postre y todo tipo de cosas después de hacer su primer pedido, dependiendo de su estado de sed o hambre).
Actualización de estado...
...desencadena...
...¡renderizado!
Ilustrado porRachel Lee Nabors
Paso 2: React renderiza tus componentes
Después de que desencadenas un renderizado, React llama a tus componentes para averiguar qué mostrar en pantalla."Renderizar" es React llamando a tus componentes.
- En el renderizado inicial,React llamará al componente raíz.
- En renderizados posteriores,React llamará al componente de función cuya actualización de estado desencadenó el renderizado.
Este proceso es recursivo: si el componente actualizado devuelve algún otro componente, React renderizaráesecomponente a continuación, y si ese componente también devuelve algo, renderizaráeseotro componente, y así sucesivamente. El proceso continuará hasta que no haya más componentes anidados y React sepa exactamente qué debe mostrarse en pantalla.
En el siguiente ejemplo, React llamará aGallery() y
- Durante el renderizado inicial,Reactcreará los nodos del DOMpara
<section>,<h1>y tres etiquetas<img>. - Durante un re-renderizado,React calculará cuáles de sus propiedades, si las hay, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación.
Precaución
El renderizado siempre debe ser uncálculo puro:
- Mismas entradas, misma salida.Dadas las mismas entradas, un componente siempre debe devolver el mismo JSX. (¡Cuando alguien pide una ensalada con tomates, no debería recibir una ensalada con cebollas!)
- Se ocupa de sus propios asuntos.No debe cambiar ningún objeto o variable que existiera antes del renderizado. (Un pedido no debería cambiar el pedido de nadie más).
De lo contrario, puedes encontrar errores confusos y comportamientos impredecibles a medida que tu base de código crece en complejidad. Al desarrollar en "Modo Estricto", React llama a la función de cada componente dos veces, lo que puede ayudar a sacar a la luz errores causados por funciones impuras.
Paso 3: React confirma los cambios en el DOM
Después de renderizar (llamar) tus componentes, React modificará el DOM.
- Para el renderizado inicial,React usará la API del DOMappendChild()para colocar en pantalla todos los nodos del DOM que ha creado.
- Para re-renderizados,React aplicará las operaciones mínimas necesarias (¡calculadas durante el renderizado!) para que el DOM coincida con la salida del último renderizado.
React solo cambia los nodos del DOM si hay una diferencia entre renderizados.Por ejemplo, aquí hay un componente que se re-renderiza con diferentes props pasadas desde su padre cada segundo. Observa cómo puedes agregar algo de texto en el<input>, actualizando suvalue, pero el texto no desaparece cuando el componente se re-renderiza:
Esto funciona porque durante este último paso, React solo actualiza el contenido del<h1>con la nuevatime. Ve que el<input>aparece en el JSX en el mismo lugar que la última vez, por lo que React no toca el<input>—¡ni suvalue!
Epílogo: Pintado del navegador
Después de que se completa el renderizado y React actualiza el DOM, el navegador volverá a pintar la pantalla. Aunque este proceso se conoce como "renderizado del navegador", nos referiremos a él como "pintado" para evitar confusiones a lo largo de la documentación.
Ilustrado porRachel Lee Nabors
Recapitulación
- Cualquier actualización de pantalla en una aplicación React ocurre en tres pasos:
- Disparador
- Renderizado
- Confirmación
- Puedes usar el Modo Estricto para encontrar errores en tus componentes
- React no toca el DOM si el resultado del renderizado es el mismo que la última vez