Cómo ejecutar Javascript después de que el método de renderización de Reactjs haya terminado

Un componente de React puede ser creado usando una función o un componente basado en una clase, y el componente basado en una clase puede usar diferentes ganchos de ciclo de vida.

Pero muy a menudo, necesitamos cargar datos del servidor para renderizar los mismos datos en el DOM. Para hacer eso, podemos usar un gancho de ciclo de vida muy usado llamado componenteDidMount.

El método componentDidMount() se activará en cuanto el componente se monte o se inserte en el DOM.

La sintaxis básica para usar el componenteDidMount() se parece a esto.

123componentDidMount(){// su código fuente para cargar los datos iniciales}</pre
jsx

Este método es muy utilizado por los desarrolladores porque se carga inmediatamente una vez que el componente está montado. Por lo tanto, es bastante útil cuando necesitamos obtener datos de un punto final remoto.

Este gancho también se utiliza para aplicar o configurar la suscripción con el renderizado inicial, pero necesitamos desuscribirlo utilizando otro gancho llamado componentWillUnmount().

Veamos un ejemplo de cómo obtener datos de un punto final remoto y utilizar los mismos datos en render() para renderizarlos en el DOM.

Llamamos a la API usando Axios, y el método debería verse así.

<pre>1234567891011asyncgetTodos(){let data =await axios .get("https://jsonplaceholder.typicode.com/todos?_limit=10").then(function(response){return response;}).catch(function(error){console.log(error);});this.setState({ todos: data.data});}</pre>
jsx

Nota : Hemos utilizado el json-placeholder gratuito de la API, que proporciona los datos ficticios para el propósito de la demostración.

En el método anterior, hemos utilizado Axios como cliente basado en promesas HTTP, que utiliza XMLHttpRequests para solicitar datos del navegador.

Ahora llamemos al método getTodos() desde el gancho del componenteDidMount(), así.

123componentDidMount(){this.getTodos();}</pre
jsx

Al llamar a este método, podremos llamar al punto final remoto una vez que el componente actual sea montado y añadido en el árbol DOM.

Finalmente, usaremos los datos de respuesta provenientes de la API en el render(), así.

12345678910111213141516171819202122render(){const{ todos }=este.state;return(<div><h3>Uso del componenteDidMount para la renderización inicial de datos</h3><hr/>{todos && todos. map(todo=>{retorno(<table><tr><td>{todo.id}</td><td><pkey={todo. id}>{todo.título}</p></td></tr></table>);})}</div>);}</pre
jsx

Aquí en el método render(), hemos usado un map() para iterar los elementos de los todos que están almacenados en el objeto estado.

El código del componente completo debería verse así.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354importReact,{Componente}de" reaccionar&cuadrar;;importar{render }de&cuadrar; reaccionar-dominio&cuadrar;;importar axios de&cuadrar; axios&cuadrar;;claseUsardmontajesextendeComponente{constructor(){super();esto. state={ name:"React"};this.getTodos=this.getTodos.bind(this);}componentDidMount(){this.getTodos();}asyncgetTodos(){let data =await axios .get("https://jsonplaceholder.typicode.com/todos?_limit=10").then(function(response){return response;}).catch(function(error){console. log(error);});this.setState({ todos: data.data});}render(){const{ todos }=this.state;return(<div><h3>Usando componentDidMount para la renderización inicial de datos</h3><hr/>{todos && todos. map(todo=>{retorno(<table><tr><td>{todo.id}</td><td><pkey={todo.id}>{todo. título}</p></td></tr></table>);})}</div>);}}exportación por defectoUsingdidmount;</pre
jsx

En este ejemplo, hemos implementado:

• El gancho componentDidMount() que llama al método getTodos() para obtener datos de la API usando el cliente AXIOS
• El método getTodos(), donde hemos implementado un fragmento de AXIOS para obtener la respuesta
• El método render(), donde renderizamos los datos usando el map() en el árbol DOM real.

Este es uno de los enfoques básicos que los desarrolladores utilizan para trabajar con un punto final remoto para obtener datos después de que se monta un componente. También hay otras formas de hacer lo mismo.