Saltar al contenido

Reaccionan métodos de ciclo de vida tutorialNov, 30thIn esta tutorial, vamos a aprender acerca de cómo utilizar los métodos del ciclo de vida …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar los métodos de ciclo de vida en reaccionar.

Reaccionar métodos de ciclo de vida invocadas en las diferentes fases de un component.There son métodos que están disponibles durante el componente se crea, insertado y cuando un componente se actualiza o se elimina de la dom.

simple definición : Reaccionar nos ofrece métodos personalizados que se ejecutan distintos momentos durante el nacimiento hasta la muerte componente.

componentDidMount ()

  • Este método se invoca después de que el componente está montado en el árbol DOM de este un buen lugar para hacer las solicitudes de red.

ejemplo:

import React,{Component} from 'react'
import axios from 'axios';

class App extends Component{

state = {
todo:null
}

componentDidMount(){
axios.get('https://jsonplaceholder.typicode.comodos/1')
.then(res=>{
this.setState({
todo:res.data
})
})
.catch(err=>console.log(err))
}

render(){
return (

Http requests in react

{this.state.todo ?

{this.state.todo.title}

:

Loading...

}

)
}

}

shouldComponentUpdate (nextProps, del estado siguiente) Método de

  • shouldComponentUpdate solamente re-renders el componente si un estado o puntales se actualizan.
  • Este método se invoca antes de una actualización ocurre de forma predeterminada devuelve falso. Este método no se llama para la inicial render o cuando se utiliza un método forceUpdate ().

ejemplo:

class App extends React.Component {
state = {
num:0
};

handleClick = () => {
this.setState({
num: Math.floor(Math.random() * 3 + 1),
})

};

shouldComponentUpdate(nextProps, nextState) {
if(this.state.num !== nextState.num){
return true
}
return false
}
render() {
return (

shouldComponentUpdate

{this.state.num}

);
}
}

En el código anterior, sólo vuelve a renderizar el componente de aplicación si el state.number anterior no es igual a la siguiente state.number.

componentDidUpdate ()

  • Este método se invoca inmediatamente después de un componente se actualiza y no se interpone en el primer render. Método

componentDidUpdate () no se invoca si shouldComponentUpdate () devuelven método falsa.

componentDidUpdate(nextProps, nextState){

if(this.state.auth !== nextState.auth){
this.router.push('/login')
}

}

En lo anterior hemos utilizado el método componentDidUpdate para empujar al usuario a la página de inicio de sesión en caso de que él o ella se cerrará la sesión.

componentwillUnmount ()

Este método se invoca justo antes de un componente se desmonta desde el DOM. Este es el lugar ideal para llevar a cabo la limpieza y la cancelación de las solicitudes de red, los temporizadores de compensación.

ejemplo:

componentDidMount() {
document.addEventListener("mousemove", this.handleMove);
document.addEventListener("mouseup", this.handleDown);
}

componentWillUnmount() {
document.removeEventListener("mousemove", this.handleMove);
document.removeEventListener("mouseup", this.handleDown);
}