Mi comprensión actual es que un componente se monta en el DOM cuando es necesario verlo o cuando la ruta requiere ese componente. También renderizará sus componentes secundarios. ¿Significa esto que un componente se desmontará cuando visite una ruta que no tenga ese componente o cada vez que visite cualquier página que no muestre el elemento que produce ese componente? Por lo tanto, será necesario volver a montar un componente cada vez que aparezca en el DOM (fuera de los cambios de prop y estado), ¿correcto?
Durante la Reconciliación de VirtualDOM , si un componente existía pero ya no existirá, el componente se considera desmontado y se le da la oportunidad de limpiarlo (a través de componentWillUnmount ).
Lo contrario es cierto, durante la reconciliación, si un componente no existía, pero ahora existe, el componente se considera listo para montarse y se le da la oportunidad de prepararse ( constructor / componentWillMount )
Al derribar un árbol, se destruyen los nodos DOM antiguos. Las instancias de componentes reciben componentWillUnmount(). Al construir un nuevo árbol, se insertan nuevos nodos DOM en el DOM. Las instancias de componentes reciben componentWillMount() y luego componentDidMount(). Cualquier estado asociado con el árbol antiguo se pierde.
https://facebook.github.io/react/docs/reconciliation.html
Vale la pena leer esa página en particular si aún no lo has hecho. También explica por qué key es bastante importante para los elementos repetidos.
El componente se montará en DOM solo cuando sea necesario renderizarlo. Si cambia la ruta o actualiza la página o desea representar su componente en eventos específicos (por ejemplo, onClick mostrar/ocultar el componente), entonces se llamará a componentWillUnmount() y el componente se eliminará de DOM
En pocas palabras, cuando un componente se ha montado, se llama a componentDidMount() , cuando el componente está a punto de desmontarse, se llama a componentWillUnmount() . Durante el renderizado, si el componente no se va a montar ni a desmontar, no se llamará a ninguno de los métodos mencionados anteriormente. En su lugar, simplemente se actualizarán los cambios realizados en el código del componente.
Recuerde que la mayoría de las aplicaciones React son aplicaciones de una sola página, lo que significa que solo actualizan la página existente, no crean ninguna página nueva como page1.html, page2.html. Lo que sucede es que React desmonta los componentes innecesarios de la página 1 y monta los componentes necesarios descritos en la página 2 para que se parezca a la página 2. Pero en realidad no "deja page1.html" y lo lleva a una página completamente nueva llamada page2.html. Todo lo que hace es simplemente sacar y empujar componentes en un lienzo o página. En otras palabras, React "trae" la página 2 a la página 1. Pero el lienzo sigue siendo el mismo (página 1).
Entonces, la respuesta a su pregunta es sí, un componente se desmontará y se volverá a montar cuando se elimine o se agregue a la página.