Makina Blog
React 16.3 : Introduction de la context API
React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.
La Context API
Cette "nouveauté" permet de faire transiter des props d'un composant parent à un composant enfant sans prendre en compte les possibles composants intermediaires.
Jusqu'ici pour pallier ce problème, on utilisait des patterns comme Redux. Mais celui-ci est souvent trop complet et compliqué à mettre en place.
C'est pourquoi, dans certains cas, il est maintenant plus logique d'utiliser la context api. Elle est, par exemple, particulièrement intéressante pour gérer des thèmes et préférences utilisateurs.
L'utilisation
Le fonctionnement de la context api est plutôt simple. Nous allons avoir besoin de créer un contexte. Le contexte sera diffusé grâce à un provider et on pourra ensuite y accéder avec un consumer. Et voilà.
React.createContext
React.createContext permet d'initialiser notre contexte avec des valeurs par défaut.
Il renvoie un object qui contient un provider ainsi qu'un consumer qui vont de pair.
const {Provider, Consumer} = React.createContext(defaultValue);
Provider
Le provider est le composant le plus haut de notre application, ou du moins de notre context. Un provider peut être connecté à plusieurs consumers. Il accepte en entrée "value", qui sera la props diffusée pour les composants.
<Provider value={{theme: "Material", showAdvancedSettings: true}}>
Consumer
Le consumer est le composant qui va s'abonner à un provider.
Afin de récupérer l'état de notre context, depuis notre provider, on doit utiliser une fonction en tant qu'enfant.
<Consumer>
{value => <TabBar theme={value.theme} showAdvancedSettings={value.showAdvancedSettings} />}
</Consumer>
Exemple
L'exemple suivant est évidement simple, et on n'a pas besoin d'un gestionnaire d'état dans ce cas là. Il n'est ici que pour illustrer l'utilisation et la surcharge d'un context.
App.js
import React, { Component } from 'react';
const MyContext = React.createContext({
showAdvancedSettings: false
});
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showAdvancedSettings: false
};
this.toggleAdvancedSettings = () => {
this.setState(state => ({
showAdvancedSettings:
!state.showAdvancedSettings
}));
};
}
render() {
// Ici, lors du clic, la valeur showAdvancedSettings changera dans le state et donc
// dans son contexte. Néanmoins, la valeur ne sera pas égale à celle du second
// MyContext.Consumer. On a ici deux contextes différents.
// Le second MyContext.Consumer utilise le provider par défaut renvoyé par
// React.createContext et la valeur showAdvancedSettings sera donc toujours false.
return (
<div>
<MyContext.Provider value={{showAdvancedSettings : this.state.showAdvancedSettings}}>
<button onClick={this.toggleAdvancedSettings} />
<MyContext.Consumer>
{MyDataConsumer => (
<div>
Should i show advanced settings ? {MyDataConsumer.showAdvancedSettings}
{MyDataConsumer.showAdvancedSettings && <div>I'm the avanced settings</div>}
</div>
)}
</MyContext.Consumer>
</MyContext.Provider>
<MyContext.Consumer>
{MyDataConsumer => (
<div>
Should i show advanced settings ? {MyDataConsumer.showAdvancedSettings}
{MyDataConsumer.showAdvancedSettings && <div>I'm the avanced settings</div>}
</div>
)}
</MyContext.Consumer>
</div>
)}
}
export default App;
Redux ou Context API ?
La context api est simple d'emploi et pourra être utilisée dans de nombreuses applications afin de remplacer Redux.
Mais si l'application a pour ambition d'être volumineuse, il sera sans doute plus opportun d'utiliser un autre gestionnaire d'état, comme Redux… pour le moment en tout cas.
L'api va recevoir de multiples mises à jour, ce qui pourra, peut être à terme, totalement remplacer les autres gestionnaires d'état.
Nous couvrons ces nouveautés dans nos formations
Pour créer une application React Native, accéder à notre vidéo
Formations associées
Formations Mobile
Formation React Native
Aucune session de formation n'est prévue pour le moment.
Pour plus d'informations, n'hésitez pas à nous contacter.
Voir la formationActualités en lien
Générer un fichier PMTiles avec Tippecanoe
Exemple de génération et d’affichage d’un jeu de tuiles vectorielles en PMTiles à partir de données publiques.
Publier une documentation VitePress sur Read The Docs
À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.
Créer une application en tant que composant web avec Stencil
Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.