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

Miré la documentación de Facebook en ( React.Component ) y menciona cómo componentWillMountse invoca en el cliente / servidor, mientras que componentDidMountse invoca solo en el cliente. ¿Qué le hace componentWillMountal servidor?

componentWillMount es esencialmente el constructor. Puede establecer propiedades de instancia que no afecten al renderizado, extraer datos de una tienda de forma sincrónica y establecer un estado con él, y otro código simple sin efectos secundarios que necesite ejecutar al configurar su componente.

Rara vez se necesita, y en absoluto con las clases de ES6.

el constructormétodo no es el mismo que componentWillMount.

Según el autor de Redux, es arriesgado enviar acciones desde el constructor porque puede resultar en una mutación del estado mientras se renderiza.

Sin embargo, enviar desde componentWillMountestá bien.

del problema de github :

Esto sucede cuando dispatch () dentro del constructor de un componente provoca 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 provoca un setState () dentro de alguna otra parte de la aplicación. No creo que debamos manejar esto, es solo React tratando de hacer su mejor trabajo. La solución es, como ha señalado correctamente, dispatch () dentro de componentWillMount () en su lugar.

Para agregar a lo que dijo FakeRainBrigand, componentWillMountse llama al renderizar React en el servidor y en el cliente, pero componentDidMountsolo se llama en el cliente.

componentWillMountse realiza antes del INITIAL renderde un componente, y se usa para evaluar los accesorios y hacer cualquier lógica adicional basada en ellos (generalmente para actualizar también el estado), y como tal se puede realizar en el servidor para obtener el primer marcado renderizado del lado del servidor .

componentDidMountse realiza DESPUÉS de la inicial rendercuando se ha actualizado el DOM (pero de manera crucial ANTES de que esta actualización del DOM se pinte en el navegador, lo que le permite realizar todo tipo de interacciones avanzadas con el propio DOM). Esto, por supuesto, solo puede suceder en el navegador y, por lo tanto, no ocurre como parte de SSR, ya que el servidor solo puede generar marcado 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, debido a que el DOM se ha actualizado (pero el usuario aún no ha visto la actualización en el navegador), es posible interceptar la pintura real en la pantalla utilizando window.requestAnimationFramey luego hacer cosas como medir la Elementos DOM que se generarán, a los que puede realizar cambios de estado adicionales, muy útiles, por ejemplo, animar a una altura de un elemento que tiene contenidos de longitud variable desconocidos (ya que ahora puede medir los contenidos y asignar una altura a la animación), o para evitar flash de escenarios de contenido durante algún cambio de estado.

Sin embargo, tenga mucho cuidado de proteger los cambios de estado en cualquiera, componentDid...ya que de lo contrario puede causar un bucle infinito porque un cambio de estado también causará una nueva renderización y, por lo tanto, otra componentDid...y una y otra y otra vez.

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

Los métodos con el prefijo will se llaman justo antes de que suceda algo y

Los métodos con el prefijo did se denominan inmediatamente después de que sucede algo.

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

Sin embargo, hay un "problema": una llamada asincrónica para obtener 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" el procesamiento para esperar a que lleguen los datos. No puede devolver una promesa de componentWillMount o disputar 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 interfaz de usuario nativa (DOM, etc.). Tampoco tendremos acceso a las referencias secundarias, porque aún no se han creado. El componentWillMount () es una oportunidad para que manejemos la configuración, actualice nuestro estado y, en general, nos preparemos para el primer render. Esto significa que podemos comenzar a realizar cálculos o procesos basados ​​en los valores prop.

Caso de uso para el componentWillMount ()

Por ejemplo, si desea mantener la fecha de creación del componente en el estado de su componente, puede configurarlo con este método. Tenga en cuenta que la configuración del estado en este método no volverá a representar DOM. Es importante tener esto en cuenta, porque en la mayoría de los casos, cada vez que cambiamos el estado del componente, se activa una nueva renderización.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Caso de uso para el componentDidMount ()

Por ejemplo, si está creando una aplicación de noticias que obtiene datos sobre las noticias actuales y se las muestra al usuario y es posible que desee que estos datos se actualicen cada hora sin que el usuario tenga que actualizar la página.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()El método solo cambia la página actual en los componentes de la clase, pero ComponentWillMount()cambia todas las páginas que se vieron afectadas porsetStates()