Saltar al contenido

Reaccionar tutorial de la administración del estado para el beginnersDec, 17thIn este tutorial, vamos a aprender acerca de la administración del Estado en reaccionar aplicaciones …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la administración estatal en aplicaciones reaccionar con la ayuda de ejemplos.

¿Qué es un estado?

Estado es un conjunto de datos (privados) que se relaciona con el componente particular donde no podemos acceder al estado desde el exterior del componente.

Cómo inicializar un estado en reaccionar?

Para inicializar un estado en el reaccionamos tenemos que declarar una nueva propiedad llamada Estado y initialize con el objeto.

Nota: El estado es una palabra reservada en reaccionar.

class Login extends React.Component {

// state
state= { }
render(){
return (

)
}

}

Dentro del componente de sesión que inicializa un estado con el objeto vacío. Nuestro objetivo es añadir la funcionalidad de inicio de sesión al componente mediante el almacenamiento de los datos de acceso en el interior del objeto de estado. En

class Welcome extends React.Component{

render(){
return

Welcome to react world

}
}

class Login extends React.Component {

state= {
isLogin : false }

render(){
return (

{this.state.isLogin && }

)
}

}

del código anterior, se añadió la propiedad y isLogin componente para el componente de sesión.

También hemos añadido una condición, render componente sólo si el valor de la propiedad isLogin es cierto.

Cómo cambiar el estado?

Para cambiar el estado del componente que tenemos que utilizar el método this.setState () proporcionada por el react.we no puede cambiar el estado directamente como this.state.isLogin = false. paso

final para agregar la funcionalidad de inicio de sesión. método

class Welcome extends React.Component{

render(){
return

Welcome to react world

}
}

class Login extends React.Component {

state= {
isLogin : false }

handleLogin = ()=>{
this.setState({
isLogin : !this.state.isLogin })
}

render(){
return (

{this.state.isLogin && }

)
}

}

Juego con codepen

this.setState () actualiza de forma asíncrona el estado al aceptar el primer argumento como un objeto.

¿Qué pasa cuando nos ponemos al día un estado?

El padre y todos sus componentes hijos se vuelven de nuevo con el estado actualizado.

Por ejemplo : En el código anterior cuando cambiamos un estado dentro de la misma y su componente secundario componente de sesión component.The también se vuelve de nuevo.