El estado de reacción

Cómo interactuar con el estado de sus componentes

Establecer el estado predeterminado

En el constructor de componentes, inicialicethis.state. Por ejemplo, el componente BlogPostExcerpt podría tener unclickedExpresar:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

Accediendo al estado

losclickeadose puede acceder al estado haciendo referenciathis.state.clicked:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
<p>Clicked: {this.state.clicked}</p>
</div>
)
}
}

Mutando el estado

Un estado nunca debe ser mutado usando

this.state.clicked = true

En su lugar, siempre debes usarsetState()en su lugar, pasándole un objeto:

this.setState({ clicked: true })

El objeto puede contener un subconjunto o un superconjunto del estado. Solo se mutarán las propiedades que pase, las omitidas se dejarán en su estado actual.

Por qué siempre deberías usar`setState()`

La razón es que al usar este método, React sabe que el estado ha cambiado. A continuación, iniciará la serie de eventos que llevarán a que el Componente se vuelva a renderizar, junto con cualquierDOMactualizar.

Flujo de datos unidireccional

Un estado siempre es propiedad de un componente. Cualquier dato que se vea afectado por este estado solo puede afectar a los componentes debajo de él: sus hijos

Cambiar el estado de un componente nunca afectará a su padre, ni a sus hermanos, ni a ningún otro componente de la aplicación: solo a sus hijos.

Esta es la razón por la que el estado a menudo se mueve hacia arriba en el árbol de componentes.

Moviendo el estado hacia arriba en el árbol

Debido a la regla de flujo de datos unidireccional, si dos componentes necesitan compartir el estado, el estado debe moverse a un ancestro común.

Muchas veces, el antepasado más cercano es el mejor lugar para administrar el estado, pero no es una regla obligatoria.

El estado se transmite a los componentes que necesitan ese valor a través de accesorios:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher currency={this.state.currency} />
</div>
)
}
}

El estado puede ser mutado por un componente hijo pasando una función mutante como un accesorio:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
handleChangeCurrency = event => {
this.setState({ currency: this.state.currency === ‘€’ ? ‘$’ : ‘€’ })
}
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher
currency={this.state.currency}
handleChangeCurrency={this.handleChangeCurrency}
/>
</div>
)
}
}
const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}
const Display = props => {
return <p>Current currency is {props.currency}.</p>
}

Descarga mi gratisReact Handbook