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 usarsetState()

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


Más tutoriales de react: