Recientemente comencé a aprender React, y cuando llegué a esta sección de la documentación, encontré el siguiente ejemplo:
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Podemos ver que document.title se está actualizando dentro del React Effect Hook. Ya vi que la documentación establece claramente que:
La obtención de datos, la configuración de una suscripción y el cambio manual del DOM en los componentes de React son ejemplos de efectos secundarios.
Pero, ¿cuál es la razón en este caso para tratar la manipulación del DOM como un efecto secundario? Por supuesto, lo primero que me vino a la mente es que tiene que ver con el proceso de renderizado de React, ya que el marco manipula el DOM por ti y si intentas manipularlo directamente, tal vez pueda causar comportamientos inesperados.
Pero estas son las dudas que tengo:
¿Qué sucede exactamente entre bastidores cuando se actualiza
document.titledesde un Effect Hook y qué sucedería si se hiciera desde el exterior?
De los documentos de React :
La función pasada a
useEffectse ejecutará después de que el procesamiento se confirme en la pantalla. Piense en los efectos como una vía de escape del mundo puramente funcional de React al mundo imperativo.
Por lo tanto, la función de devolución de llamada se ejecutaría después de cada procesamiento, y se ejecutaría su declaración que actualiza document.title , actualizando el título del documento. Es tan simple como eso, y actualizar el título del documento usando esa declaración funcionaría de la misma manera en otros lugares fuera de una devolución de llamada de gancho de efecto (por ejemplo, en respuesta al evento de click de un botón).
¿La etiqueta
<title>está contenida en el DOM virtual de React?
No, los únicos elementos que forman parte del "DOM virtual" son aquellos que son descendientes del elemento raíz que procesas usando ReactDOM . ConsulteReactDOM.createRoot para obtener más detalles.
¿Alguna de estas cosas tiene que ver con el proceso de reconciliación de ReactDOM?
Sí, y no es un proceso simple. Puede leer sobre la reconciliación , leer la guía de arquitectura de fibra y ver la fuente de React DOM para obtener una comprensión muy completa.