L'API de contexte React

L'API de contexte est un moyen efficace de transmettre l'état à travers l'application sans avoir à utiliser d'accessoires

LeAPI de contextea été introduit pour vous permettre de transmettre l'état (et d'activer la mise à jour de l'état) dans l'application, sans avoir à utiliser d'accessoires.

L'équipe React suggère de s'en tenir aux accessoires si vous n'avez que quelques niveaux d'enfants à passer, car il s'agit toujours d'une API beaucoup moins compliquée que l'API de contexte.

Dans de nombreux cas, cela nous permet d'éviter d'utiliserRedux, en simplifiant beaucoup nos applications et en apprenant également à utiliser React.

Comment ça marche?

Vous créez un contexte en utilisantReact.createContext(), qui renvoie un objet Contexte:

const { Provider, Consumer } = React.createContext()

Ensuite, vous créez un composant wrapper qui renvoie unFournisseurcomposant, et vous ajoutez comme enfants tous les composants à partir desquels vous souhaitez accéder au contexte:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }
render() {
return (
<Provider value={{ state: this.state }}>{this.props.children}</Provider>
)
}
}
class HelloWorld extends React.Component {
render() {
return (
<Container>
<Button />
</Container>
)
}
}

J'ai utilisé Container comme nom de ce composant car ce sera un fournisseur mondial. Vous pouvez également créer des contextes plus petits.

À l'intérieur d'un composant encapsulé dans un fournisseur, vous utilisez unConsommateurcomposant pour utiliser le contexte:

class Button extends React.Component {
  render() {
    return (
      <Consumer>
        {context => <button>{context.state.something}</button>}
      </Consumer>
    )
  }
}

Vous pouvez également passer des fonctions dans une valeur Provider, et ces fonctions seront utilisées par le consommateur pour mettre à jour l'état du contexte:

<Provider value={{
  state: this.state,
  updateSomething: () => this.setState({something: 'ho!'})}}>
  {this.props.children}
</Provider>
/* … */
<Consumer>
{(context) => (
<button onClick={context.updateSomething}>{context.state.something}</button>
)}
</Consumer>

Vous pouvez voir cela en actiondans ce Glitch.

Vous pouvez créer plusieurs contextes pour répartir votre état entre les composants, tout en l'exposant et en le rendant accessible par n'importe quel composant de votre choix.

Lorsque vous utilisez plusieurs fichiers, vous créez le contenu dans un fichier et l'importez dans tous les endroits où vous l'utilisez:

//context.js
import React from 'react'
export default React.createContext()
//component1.js
import Context from ‘./context’
//… use Context.Provider

//component2.js
import Context from ‘./context’
//… use Context.Consumer

Téléchargez mon gratuitManuel React

L'API de contexte React

L'API de contexte est un moyen efficace de transmettre l'état à travers l'application sans avoir à utiliser d'accessoires

Plus de tutoriels de réaction: