Pregunta ¿Cuál es la diferencia entre componentWillMount y componentDidMount en ReactJS?


Miré la documentación de Facebook en https://facebook.github.io/react/docs/component-specs.html y menciona cómo se invoca componentWillMount en el cliente / servidor, mientras que componentDidMount se invoca solo en el cliente. ¿Qué hace componentWillMount para el servidor?


73
2018-04-27 14:54


origen


Respuestas:


componentWillMount es esencialmente el constructor. Puede establecer propiedades de instancia que no afecten el procesamiento, extraer datos de una tienda sincrónicamente y setState con él, y otro código libre de efecto secundario simple que necesita ejecutar al configurar su componente.

Rara vez es necesario, y en absoluto con las clases de ES6.


58
2018-04-27 15:47



el constructor método no es lo mismo que componentWillMount.

Según el autor de Redux, es arriesgado enviar acciones del constructor porque puede provocar la mutación del estado mientras se procesa.

Sin embargo, el envío desde componentWillMount está bien.

de problema de Github:

Esto sucede cuando dispatch () dentro del constructor de un componente causa un setState () dentro de otro componente. React realiza un seguimiento del "propietario actual" para tales advertencias, y cree que estamos llamando a setState () dentro del constructor cuando técnicamente el constructor causa un setState () dentro de alguna otra parte de la aplicación.   No creo que debamos manejar esto, es solo Reaccionar intentando hacer su mejor trabajo. La solución es, como notó correctamente, despachar () dentro de componentWillMount () en su lugar.


49
2018-06-08 13:09



Para agregar a lo que dijo FakeRainBrigand, componentWillMount se llama cuando se renderiza React en el servidor, pero componentDidMount solo se llama al cliente.


32
2018-04-27 17:45



componentWillMount se hace antes del INICIAL render de un componente, y se usa para evaluar accesorios y hacer cualquier lógica extra basada en ellos (generalmente también para actualizar el estado), y como tal se puede realizar en el servidor para obtener el primer marcado prestado del lado del servidor.

componentDidMount se realiza DESPUÉS de la inicial render cuando el DOM ha sido actualizado (pero de manera crucial ANTES de que esta actualización DOM esté pintada en el navegador, lo que le permite realizar todo tipo de interacciones avanzadas con el DOM). Esto, por supuesto, solo puede ocurrir en el navegador mismo y no ocurre como parte de SSR, ya que el servidor solo puede generar marcas y no el DOM en sí, esto se hace después de que se envía al navegador si se usa SSR.

Interacciones avanzadas con el DOM que dices? Whaaaat? ... Sí - en este punto porque el DOM ha sido actualizado (pero el usuario aún no ha visto la actualización en el navegador) es posible interceptar la pintura real en la pantalla mediante el uso de window.requestAnimationFrame y luego haga cosas como medir los elementos DOM reales que se mostrarán, a los que puede realizar más cambios de estado, muy útil, por ejemplo, animar a una altura de un elemento que tiene un contenido desconocido de longitud variable (ya que ahora puede medir los contenidos y asignar una altura a la animación), o para evitar destellos de escenarios de contenido durante algún cambio de estado.

Tenga mucho cuidado para proteger los cambios de estado en cualquier componentDid... de lo contrario, puede causar un bucle infinito porque un cambio de estado también provocará una repetición, y por lo tanto otro componentDid... y sigue y sigue y sigue


18
2017-07-06 11:09



Según la documentación ( https://facebook.github.io/react/docs/react-component.html )

Métodos prefijados con será son llamados justo antes de algo pasa y

Métodos prefijados con hizo se llaman rjusto después algo pasa.


3
2017-07-06 09:49



componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Sin embargo, hay un "gotcha": una llamada asincrónica para recuperar datos   no regresar antes de que ocurra el procesamiento. Esto significa que el componente se   renderizar con datos vacíos al menos una vez.

No hay forma de "pausar" la representación para esperar a que lleguen los datos. Tú   no puede devolver una promesa de componentWillMount o disputa en un   setTimeout de alguna manera.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

nuestro Componente no tendrá acceso a la UI nativa (DOM, etc.). Tampoco tendremos acceso a las referencias de los niños, porque aún no se han creado. El componenteWillMount () nos brinda la posibilidad de manejar la configuración, actualizar nuestro estado y, en general, prepararnos para la primera renderización. Esto significa que podemos comenzar a realizar cálculos o procesos basados ​​en los valores prop.


1
2017-11-01 10:55