javascript - Use las funciones del ciclo de vida de componentWillMount o componentDidMount para la solicitud asíncrona en React

ajax reactjs

Question

Estoy leyendo sobre reaccionar ciclo de vida y me estoy confundiendo un poco. Algunos recomiendan usar componentWillMount para hacer llamadas ajax:

https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby

Llamar a setState en componentDidMount desencadenará otra llamada render () y puede dar lugar a un cambio de diseño.

y en otros lugares dice no poner llamadas ajax en el componente WillMount:

https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

... esta función podría terminar siendo llamada varias veces antes de que se llame el renderizado inicial, por lo que podría provocar múltiples efectos secundarios. Debido a este hecho, no se recomienda utilizar esta función para operaciones que causen efectos secundarios.

¿Cual es correcta?

Answer 1

ComponentDidMount es el lugar.

Pero si tiene tiempo intente mirar Redux y realizar las solicitudes en acciones, a medida que su aplicación crezca, ayudará mucho a administrar el estado de la aplicación.

;)

Answer 2

Los documentos de React recomiendan el uso de componentDidMount para realizar solicitudes de red

componentDidMount() se invoca inmediatamente después de montar un componente. La inicialización que requiere nodos DOM debería ir aquí. Si necesita cargar datos desde un punto final remoto, este es un buen lugar para instanciar la solicitud de red.

Llamar a setState() en este método activará una representación adicional, pero se garantiza que se vaciará durante el mismo tic. Esto garantiza que, aunque se llame dos veces al render() en este caso, el usuario no verá el estado intermedio.

Según el caso para componentWillMount :

EDITAR:

Este ciclo de vida está en desuso desde v16.3.0 de react y ya no se recomienda su uso. Sin embargo, se renombró a UNSAFE_componentWillUpdate y se espera que funcione hasta al menos v17 de react

Antes de la v16.3.0

Una llamada asincrónica para recuperar datos no regresará antes de que ocurra el render. 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 que lleguen los datos. No puede devolver una promesa de componentWillMount o setTimeout un setTimeout alguna manera. La forma correcta de manejar esto es configurar el estado inicial del componente para que sea válido para la representación.

Para resumirlo

En la práctica, componentDidMount es el mejor lugar para realizar llamadas para recuperar datos, por dos razones:

• El uso de DidMount deja en claro que los datos no se cargarán hasta después del procesamiento inicial. Esto le recuerda que debe configurar el estado inicial correctamente, de modo que no termine con undefined estado undefined que cause errores.
• Si alguna vez necesita renderizar su aplicación en el servidor, se llamará a componentWillMount dos veces, una vez en el servidor y otra vez en el cliente, lo que probablemente no sea lo que desea. Poner el código de carga de datos en componentDidMount asegurará que los datos solo se obtengan del cliente.

Answer 3

componentDidMount es el método de ciclo de vida recomendado para realizar llamadas Ajax como se describe en sus documentos