¿Qué es "montaje" en React js?

128

Escucho el término "montar" demasiadas veces mientras aprendo ReactJS. Y parece haber métodos de ciclo de vida y errores con respecto a este término. ¿Qué significa exactamente Reaccionar al montar?

Ejemplos: componentDidMount() and componentWillMount()

javascript reactjs puertas
fuente

Respuestas:

138

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.

Filip Dupanović
fuente
9
Me gustaría señalar que cuando llamas React.createElement(FooComponent)no estás creando una instancia de FooComponent. fooes una representación virtual de DOM FooComponenttambién conocida como elemento React. Pero tal vez eso es lo que quieres decir con FooComponenttipo 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.
John Leidegren
55
El montaje se refiere a la conexión de la instancia del componente React al nodo DOM que es necesario para realizar actualizaciones de renderización incrementales / diferenciales de árbol en llamadas de renderización posteriores.
John Leidegren
3
Me tomé la libertad de editar esta respuesta porque ya está aceptada, pero había algunas ideas falsas (por ejemplo, no se puede ejecutar findDOMNodeen elementos React).
Dan Abramov
1
El desmontaje de @Rahamin ocurre cuando el componente se quita / reemplaza, si navega entre escenas de tal manera que no hay renderizado, no se garantiza una señal de desmontaje. componentWillUnmount no es lo mismo que descargar página.
John Leidegren
1
@Yossi aquí está un ejemplo de montaje de forma explícita y de la ONU el montaje de un componente en un conjunto de pruebas: stackoverflow.com/a/55359234/6225838
CPHPython
38

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:

Reaccionar es tan rápido porque nunca habla directamente con el DOM. React mantiene una rápida representación en memoria del DOM.

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.

"Creemos que los verdaderos fundamentos de React son simplemente ideas de componentes y elementos: poder describir lo que quiere renderizar de manera declarativa. Estas son las piezas compartidas por todos estos paquetes diferentes. Las partes de React específicas para cierta representación los objetivos no suelen ser lo que pensamos cuando pensamos en Reaccionar ". - Reaccionar js Blog

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.

"A medida que analizamos paquetes como react-native, react-art, react-canvas y react-three, queda claro que la belleza y la esencia de React no tienen nada que ver con los navegadores o el DOM". - Reaccionar js Blog

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 componentDidRendery componentWillRendersería mucho mejores nombres.

Faris Zacina
fuente
66
Alguien acaba de señalarme esta respuesta desde otro foro. No creo que componentDidRendersea ​​un sustituto componentDidMountporque el componente puede renderizarse varias veces cuando los accesorios cambian después de haberlo montado una vez.
Gaurav
@TheMinister Se llamaba una biblioteca "DOM virtual" porque no comenzó como isomórfica, sino que en realidad estaba vinculada al DOM desde el principio. Fue una idea de último momento para hacerlo isomorfo.
Isiah Meadows
Entonces, ¿el montaje es intercambiable con el render ? En ese caso, ¿es cierto que un componente está montado / renderizado para cada una de las siguientes hipótesis ?: (id === that.id) ? <Component /> : null| /app/items/:idEl | this.setState(...).
Cody
1
Enlace a / react-js-the-king-of-universal-apps / está roto
Michael Freidgeim
Edité la publicación dos veces para eliminar el enlace roto /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?
Aaditya Sharma
12

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

frontsideup
fuente
Si el montaje es similar a appendChild, ¿qué es render?
Deke
Creo que se podría decir que renderes el método real que hará el montaje en sí. Entonces componentWillMount== antes, render== realiza la inserción DOM, y componentDidMount== después del montaje (o renderha llamado a una API DOM para insertar el componente y esa operación asincrónica se ha completado por completo)
Rob
8

https://facebook.github.io/react/docs/tutorial.html

Aquí, componentDidMount es un método llamado automáticamente por React cuando se representa un componente.

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.

Ross Presser
fuente
¿Entonces el montaje se puede llamar "colocado"?
puertas
Yo diría que sí.
Ross Presser
Diría que la cita es algo engañosa, ya que solo se llama después del renderizado inicial , no en los renderizados causados ​​por actualizaciones. Entonces componentDidUpdatese llama en su lugar.
Hannes Johansson
1 para este facebook.github.io/react/docs/... , la descripción no confirma que se coloca;)
puertas
5

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).

Mark Brownsword
fuente
3

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.

Pranesh Ravi
fuente