L'état de réaction

Comment interagir avec l'état de vos composants

Définition de l'état par défaut

Dans le constructeur de composants, initialisezthis.state. Par exemple, le composant BlogPostExcerpt peut avoir unclickedEtat:

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

Accéder à l'état

Lecliquél'état est accessible en référençantthis.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>
)
}
}

Mutation de l'État

Un état ne doit jamais être muté en utilisant

this.state.clicked = true

Au lieu de cela, vous devez toujours utilisersetState()à la place, en lui passant un objet:

this.setState({ clicked: true })

L'objet peut contenir un sous-ensemble, ou un sur-ensemble, de l'état. Seules les propriétés que vous transmettez seront mutées, celles omises resteront dans leur état actuel.

Pourquoi vous devriez toujours utiliser`setState()`

La raison en est qu'en utilisant cette méthode, React sait que l'état a changé. Il démarrera alors la série d'événements qui conduiront au nouveau rendu du composant, avec toutDOMmettre à jour.

Flux de données unidirectionnel

Un état appartient toujours à un composant. Toutes les données affectées par cet état ne peuvent affecter que les composants situés en dessous: ses enfants.

La modification de l'état d'un composant n'affectera jamais son parent, ses frères et sœurs, ou tout autre composant de l'application: uniquement ses enfants.

C'est la raison pour laquelle l'état est souvent déplacé vers le haut dans l'arborescence des composants.

Déplacement de l'état vers le haut dans l'arborescence

En raison de la règle de flux de données unidirectionnel, si deux composants doivent partager l'état, l'état doit être déplacé vers un ancêtre commun.

Souvent, l'ancêtre le plus proche est le meilleur endroit pour gérer l'État, mais ce n'est pas une règle obligatoire.

L'état est transmis aux composants qui ont besoin de cette valeur via des accessoires:

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>
)
}
}

L'état peut être muté par un composant enfant en passant une fonction de mutation vers le bas comme accessoire:

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>
}

Téléchargez mon gratuitManuel React