El trabajo principal de React es descubrir cómo modificar el DOM para que coincida con lo que los componentes quieren que se muestren en la pantalla.
React lo hace "montando" (agregando nodos al DOM), "desmontando" (quitándolos del DOM) y "actualizando" (haciendo cambios a los nodos que ya están en el DOM).
La forma en que un nodo React se representa como un nodo DOM y dónde y cuándo aparece en el árbol DOM es administrado por la API de nivel superior . Para tener una mejor idea de lo que está sucediendo, mira el ejemplo más simple posible:
// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);
Entonces, ¿qué es fooy qué puedes hacer con él? foo, en este momento, es un objeto JavaScript simple que se ve más o menos así (simplificado):
{
type: FooComponent,
props: {}
}
Actualmente no está en ninguna parte de la página, es decir, no es un elemento DOM, no existe en ninguna parte del árbol DOM y, aparte de ser el nodo del elemento React, no tiene otra representación significativa en el documento. Simplemente le dice a React lo que debe estar en la pantalla si este elemento React se procesa. Todavía no está "montado".
Puede decirle a React que lo "monte" en un contenedor DOM llamando a:
ReactDOM.render(foo, domContainer);
Esto le dice a React que es hora de mostrar fooen la página. React creará una instancia de la FooComponentclase y llamará a su rendermétodo. Digamos que representa un <div />, en ese caso, React creará un divnodo DOM para él y lo insertará en el contenedor DOM.
Este proceso de crear instancias y nodos DOM correspondientes a los componentes React, e insertarlos en el DOM, se denomina montaje.
Tenga en cuenta que normalmente solo llamaría ReactDOM.render()para montar los componentes raíz. No necesita "montar" manualmente los componentes secundarios. Cada vez que un componente padre llama setState(), y su rendermétodo dice que un niño en particular debe ser renderizado por primera vez, React automáticamente "montará" este niño en su padre.
React.createElement(FooComponent)no estás creando una instancia deFooComponent.fooes una representación virtual de DOMFooComponenttambién conocida como elemento React. Pero tal vez eso es lo que quieres decir conFooComponenttipo React . Independientemente, no monta componentes en React, llama a render, que a su vez podría montar el componente si es necesario crear un nodo DOM real para representar el componente en el árbol DOM. El montaje real es el evento en el que esto sucede por primera vez.findDOMNodeen elementos React).React es un marco isomorfo / universal . Eso significa que hay una representación virtual del árbol de componentes de la interfaz de usuario, y eso es independiente de la representación real que genera en el navegador. De la documentación:
Sin embargo, esa representación en memoria no está vinculada directamente al DOM en el navegador (a pesar de que se llama Virtual DOM, que es un nombre desafortunado y confuso para un marco de aplicaciones universal), y es solo un dato similar al DOM. estructura que representa toda la jerarquía de componentes de la interfaz de usuario y metadatos adicionales. El DOM virtual es solo un detalle de implementación.
Entonces, la conclusión es que React es agnóstico de representación , lo que significa que no le importa cuál es el resultado final. Puede ser un árbol DOM en el navegador, puede ser XML, componentes nativos o JSON.
Ahora que sabes cómo funciona React, es fácil responder a tu pregunta :)
El montaje es el proceso de generar la representación virtual de un componente en la representación final de la interfaz de usuario (por ejemplo, DOM o componentes nativos).
En un navegador, eso significaría generar un elemento React en un elemento DOM real (por ejemplo, un elemento HTML div o li ) en el árbol DOM. En una aplicación nativa, eso significaría generar un elemento React en un componente nativo. También puede escribir su propio renderizador y generar componentes React en JSON o XML o incluso XAML si tiene el coraje.
Por lo tanto, los controladores de montaje / desmontaje son críticos para una aplicación React, porque solo puede estar seguro de que un componente se genera / procesa cuando se monta . Sin embargo, el
componentDidMountcontrolador se invoca solo cuando se procesa en una representación de UI real (DOM o componentes nativos), pero no si se procesa en una cadena HTML en el servidor utilizandorenderToString, lo que tiene sentido, ya que el componente no se monta realmente hasta que alcanza navegador y se ejecuta en él.Y, sí, Mounting también es un nombre desafortunado / confuso, si me preguntas. En mi humilde opinión
componentDidRenderycomponentWillRendersería mucho mejores nombres.fuente
componentDidRendersea un sustitutocomponentDidMountporque el componente puede renderizarse varias veces cuando los accesorios cambian después de haberlo montado una vez.(id === that.id) ? <Component /> : null|/app/items/:idEl |this.setState(...)./react-js-the-king-of-universal-apps/( con los comentarios de edición mencionando claramente que es un enlace roto ), pero los compañeros han rechazado la edición las dos veces . ¿Alguien puede guiarme qué hay de malo en editar una respuesta y eliminar un enlace roto?El montaje se refiere al componente en React (nodos DOM creados) que se adjunta a alguna parte del documento. ¡Eso es!
Ignorando React, puedes pensar en estas dos funciones nativas como montaje:
replaceChild
añadir Niño
Cuáles son las funciones más comunes que React usa para montar internamente.
Pensar en:
componentWillMount === antes del montaje
Y:
componentDidMount === after-mount
fuente
appendChild, ¿qué esrender?renderes el método real que hará el montaje en sí. EntoncescomponentWillMount== antes,render== realiza la inserción DOM, ycomponentDidMount== después del montaje (orenderha llamado a una API DOM para insertar el componente y esa operación asincrónica se ha completado por completo)https://facebook.github.io/react/docs/tutorial.html
El concepto es que le estás diciendo a ReactJS, "por favor toma esta cosa, este cuadro de comentarios o imagen giratoria o lo que sea que quiera en la página del navegador, y sigue adelante y ponlo en la página del navegador. Cuando haya terminado, llama mi función a la que me he comprometido para
componentDidMountpoder continuar ".componentWillMountes lo opuesto. Se disparará inmediatamente ANTES de que su componente se procese.Ver también aquí https://facebook.github.io/react/docs/component-specs.html
Finalmente, el término "montaje" parece ser único para react.js. No creo que sea un concepto general de JavaScript, ni siquiera un concepto general de navegador.
fuente
componentDidUpdatese llama en su lugar.El montaje se refiere a la carga de la página inicial cuando su componente React se procesa por primera vez. De la documentación de React para el montaje: componentDidMount:
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).Puede contrastar esto con la función componentDidUpdate, que se llama cada vez que se procesa React (excepto el montaje inicial).
fuente
El objetivo principal de React js es crear componentes reutilizables. Aquí, los componentes son las partes individuales de una página web. Por ejemplo, en una página web, el encabezado es un componente, el pie de página es un componente, una notificación de brindis es un componente, etc. El término "montar" nos dice que estos componentes se cargan o representan en el DOM. Estas son muchas API y métodos de nivel superior que se ocupan de esto.
Para simplificar, montado significa que el componente se ha cargado en el DOM y desmontado significa que los componentes se han eliminado del DOM.
fuente