Table Des Matières
Introduction
Devriez-vous utiliser React 16? Un article détaillé sur les nouvelles fonctionnalités puissantes de React 16
React 16, aussi connu sous le nom React Fiber a apporté un nouveau niveau de simplicité au développement des jeux. Avec des fonctionnalités telles que les limites d’erreur Error Boundaries, les portails Portals et l’API de contexte Context API, les développeurs React peuvent créer leurs applications avec une facilité jamais vue auparavant.
Dans cette série en deux parties, j’expliquerai certaines des nouvelles fonctionnalités de React 16 et les meilleures pratiques pour travailler avec tout ce que React 16 a à offrir.
N’oubliez pas d’installer les dernières versions de React et React DOM.
Gérez Vos erreurs Avec Les limites D’Erreur Error Boundaries
Quest Ce Que Les Limites D’Erreur Error Boundaries?
Les limites d’erreur de React 16 vous aident à vous assurer qu’une erreur dans une partie de votre interface utilisateur ne va pas casser l’application entière. Les limites d’erreur font essentiellement 3 choses:
- Il attrape les erreurs JavaScript dans l’arborescence du composant enfant.
- Il enregistre ces erreurs.
- Il affiche l’interface utilisateur de secours fallback UI
Dans cette section, je vais vous montrer comment créer une limite d’erreur pour votre application.
Exemple D’Application
J’ai créé une nouvelle application React en utilisant create-react-app et j’ai écrit le code suivant dans mon fichier App.js.
Que se passe-t-il dans cette application?
Ceci est une application simple qui rend un profile. Le composant Profile attend un objet utilisateur user avec le nom de propriété name passé à l’intérieur. J’ai aussi un bouton qui met à jour l’utilisateur. Exécutez yarn start et voyez que cela fonctionne parfaitement.
Mais, l’application va échouer lorsque vous cliquez sur le bouton.
Cela arrive parce que la fonction onClick du bouton passe une valeur nulle null pour l’utilisateur user. Cela lancera TypeError non intercepté car l’application ne peut pas lire le nom de la propriété null.
Solution
Pour gérer de telles erreurs, React 16 a introduit une nouvelle méthode de cycle de vie appelée componentDidCatch. Cette méthode nous permettra d’attraper toutes les erreurs JavaScript de n’importe où dans l’arborescence des éléments enfants d’un composant.
Afin de m’informer que quelque chose ne fonctionne pas comme prévu, je vais mettre à jour mon état state dans cette méthode de cycle de vie et indiquer qu’une erreur s’est produite.
Assurez-vous d’ajouter hasError: false dans votre objet state.
Ensuite, dans la fonction render, ajoutez une instruction conditionnelle qui vérifie la valeur de hasError et rend l’interface utilisateur de secours.
Il est important d’inclure ce comportement car les erreurs qui ne sont pas interceptées entraîneront le démontage de l’intégralité de l’arborescence du composant Réact.
Ce n’était pas le cas dans la version15 de react et moins, car dans ces versions, l’UI est restée intacte. Ce comportement a changé car l’équipe React a estimé qu’il serait pire de quitter l’interface utilisateur corrompue en place plutôt que de la supprimer complètement.
Pour revenir à componentDidCatch, on reçoit deux arguments qui nous permettront de suivre et d’enquêter sur nos erreurs. Ces arguments sont:
- error —C’est l’instance d’erreur elle-même.
- info —Cet argument contient la pile des composants.
Ceci est particulièrement utile lorsque vous exécutez votre application en mode production, car elle utilisera un service de rapport d’erreurs pour vérifier exactement où le composant est tombé en panne.
Avec cela, le composant App peut être décrit comme une limite d’erreur. L’étape suivante consisterait à extraire la fonctionnalité de la limite d’erreur dans un composant distinct, de sorte que nous puissions l’utiliser partout dans notre application sans avoir à réécrire le code.
Limite d’erreur ErrorBoundary
Créez un nouveau composant appelé ErrorBoundary comme indiqué ici:
Ce nouveau composant contient l’état hasError et la méthode de cycle de vie componentDidCatch. La méthode render de l’application comporte l’interface utilisateur de secours lorsqu’une erreur se produit.
Supprimez la méthode hasError: false et componentDidCatch du composant App. Dans la méthode render, enveloppez le profile dans le composant ErrorBoundary comme ceci:
Les limites d’erreur (Errorboundaries) fonctionnent avec des structures de composants profondément imbriquées. Donc, il serait préférable de les mettre dans quelques endroits stratégiques, plutôt qu’à tous les niveaux.
Errorboundaries est maintenant capable d’attraper les erreurs et de rendre l’interface utilisateur de secours!
Rendre plusieurs éléments sans utiliser un Composant Emballage Élément
Avant React 16
Avant React 16, nous devions nous assurer que notre méthode render renvoyait un seul élément React. Donc, pour retourner plusieurs éléments, nous devions les enrouler dans un élément <div> </ div>.
Avec React 16, il est maintenant possible de retourner un tableau d’éléments. Cela ouvre un nouveau sac de trucs pour la conception des composants.
Application
Ici, j’ai créé une application qui retourne une liste de super-héros.
App.jsComme vous pouvez le voir, j’ai enveloppé la liste dans un élément <div>. Créons un nouveau composant de fonction qui contient une autre liste de super-héros.
const Heroes = () => [ <li key="1">The Flash</li>, <li key="2">Aquaman</li>, <li key="3">Wonder Woman</li>, ]
Je vais rendre ce composant dans la liste non ordonnée dans le composant App.
render() {
return (
<div>
<ul>
<li>Batman</li>
<li>Superman</li>
<Heroes/>
</ul>
</div>
)
}
Avec ceci, si vous exécutez yarn start, vous verrez que tous sont rendus dans le même élément de liste non ordonné.
Vous pouvez également rendre la liste dans un composant de classe. Je vais créer un nouveau composant de classe appelé moreHeroes. Ce composant rendra deux autres héros.
class MoreHeroes extends Component { render() { return [ <li key="1">Green Lantern</li>, <li key="2">Green Arrow</li> ] } }
Comme vous pouvez le voir ici, j’ai utilisé les mêmes touches dans les deux Heroes et moreHeroes composants. Donc, si j’ajoute ce composant dans le composant App, il sera rendu dans le même élément DOM et il n’y aura aucun type d’avertissement de clé dans la console.
Aussi…
Une autre grande fonctionnalité de React 16 est que vous pouvez retourner les enfants children eux-mêmes sans un élément d’emballage. Je vais créer un nouveau composant qui retournera props.children.
const DC = props => props.children
Je vais utiliser ce composant pour envelopper toutes les entrées dans mon composant Heroes. Ce faisant, nous n’aurons pas besoin d’utiliser des virgules pour rendre plusieurs éléments.
const Heroes = () => <DC> <li key="1">The Flash</li> <li key="2">Aquaman</li> <li key="3">Wonder Woman</li> </DC>;
Composant Rendre le texte uniquement
Dans React 15 et ci-dessous, nous avons dû envelopper notre texte dans une balise <span> ou <div> inutile. Mais React 16 a enlevé cette structure inutile.
Application
Je vais d’abord créer un nouveau composant qui rendra simplement du texte. Il contient actuellement un emballage <span> comme requis par les composants dans React 15 et ci-dessous.
const Text = ({text }) => { const Tex = text; return <span>{Tex}</span>; };
Je peux ensuite utiliser ce composant dans le composant App comme ceci:
class App extends Component { render() { return ( <div> <Text text="A Generic hello world text" /> </div> ); }; }
Si vous regardez la structure DOM de votre application, vous verrez que le composant est enveloppé à l’intérieur d’un <div> et d’un <span>.
Bien que le <span> ne pose aucun problème, il ne fait pas grand-chose pour nous. Cela rendrait notre DOM beaucoup plus propre et un peu plus léger sans cela.
Avec React 16, nous pouvons mettre à jour le composant Text pour retourner simplement un texte brut.
const Text = ({text}) => {
const Tex = text;
return Tex;
};
Si vous inspectez le DOM maintenant, vous constaterez que l’intervalle indésirable a disparu.
Portails
Par défaut, une arborescence de composants React est mappée directement à l’arborescence DOM. Cela peut fonctionner contre vous lorsque votre application comporte des éléments d’interface utilisateur tels que des superpositions et des barres de chargement.
React 16 enlève ce facteur à caractère limitant, en vous permettant d’attacher des parties de l’arbre des composants à l’intérieur d’un élément racine différent.
Application
Créons un composant App simple qui affiche une balise <h1>.
class App extends Component { render() { return ( <div> <h1>Dashboard</h1> </div> ) } }
createPortal()
J’utiliserai {ReactDOM.createPortal ()} sous la balise <h1>. Cette fonction accepte deux arguments:
- Le nouveau composant contenant le sous-arbre— ici, je vais créer un élément <div> contenant le texte “Welcome”.
- Le conteneur cible Je vais demander un élément avec l’id de portal-container.
Le composant App ressemblera alors à ceci:
class App extends Component { render() { return ( <div> <h1>Dashboard</h1> {ReactDOM.createPortal( <div>Welcome</div>, document.getElementById('portal-container'); )} </div> ); } }
Dans public/index.html, créez un nouvel élément <div> avec un id de portal-container sous le root id.
Si vous regardez la structure DOM, vous verrez que le texte de bienvenue “welcome” est rendu dans le portal-container. Cela est très pratique pour des choses comme les superpositions.
Maintenant, ajoutez une propriété className=”overlay” au texte de bienvenue “welcome”. Cela va lier le <div> à ces propriétés de style:
Notre application va maintenant ressembler à ceci:
Overlay
Cette approche nécessitera que nous étendions index.html. Nous pouvons également donner à notre composant le contrôle pour ajouter et supprimer de nouveaux éléments DOM juste à la fin du corps. Pour ce faire, je vais extraire la fonction ReactDOM.createPortal() dans un nouveau composant.
class Overlay extends Component { constructor(props) { super(props); this.overlayContainer = document.createElement('div'); document.body.appendChild(this.overlayContainer); } render() { return ReactDOM.createPortal( <div className="overlay">{this.props.children}</div>, this.overlayContainer ); } }
Je crée un overlayContainer à l’intérieur de la méthode constructeur du composant. Je vais l’ajouter au corps du document. La fonction render n’aura pas besoin d’un élément d’enveloppe et je peux retourner directement le portail. Le portail rend div overlay et les enfants qui lui sont transmis dans app. La cible du portail est le conteneur de superposition que nous avons créé dans le constructeur.
Lorsque vous utilisez des portails, assurez-vous que votre code est correctement nettoyé et qu’il ne contient aucun élément <div> inutile.
componentWillUnmount() { document.body.removeChild(this.overlayContainer); }
Dans la fonction render, Je vais ajouter un élément <span> qui, lorsqu’on clique dessus, provoque la fermeture de l’incrustation. Assurez-vous de l’ajouter à l’intérieur de overlay div
<span onClick={this.props.onClose}>x</span>
Ensuite, à l’intérieur du composant App, je vais créer un constructeur et ajouter l’état (state) overlayActive comme vrai true. Je vais également ajouter une fonction closeOverlay qui définit l’overlayActive sur false.
constructor(props) {
super(props);
this.state = { overlayActive: true }
}
closeOverlay = () => {
this.setState({overlayActive: false})
}
render() {
return (
<div>
<h1>Dashboard</h1>
{this.state.overlayActive &&
<Overlay onClose={this.closeOverlay}>
<div>Welcome</div>
</Overlay>}
</div>
);
}
Exécutez la commande de yarn start et vous verrez que cela fonctionne parfaitement!
À suivre … (bientôt)
Ceci conclut la partie 1 de 2 de cette série. La partie 2 sera bientôt disponible, alors tenez-vous bien 🙂 En attendant, vous êtes invités à lire plus sur Le Programmeur Marocain.
