React a gagné en popularité ces dernières années. Décrit comme “une bibliothèque JavaScript pour la création d'interfaces utilisateur,” L'approche déclarative de React pour le rendu simplifie la construction d'interfaces utilisateur complexes.
React est un outil polyvalent avec une large gamme d'applications, allant des sites Web traditionnels aux applications Web complexes. Il n'y a pas de ligne claire qui définit quand vous devez utiliser React. Au lieu de cela, il existe des indicateurs de ligne directrice qui peuvent vous aider à évaluer si React pourrait être un bon choix.
Recherchez des composants
Un signe qu'un site peut bénéficier de React est si vous prévoyez de réutiliser un grand nombre de composants autonomes. Les éléments d'interface abstraits tels que les contrôles de formulaire et les cartes d'affichage de données sont des candidats de choix pour la conversion en composants React. Cela est particulièrement vrai si vos composants sont susceptibles d'incorporer un comportement personnalisé au-delà de ce que le navigateur fournit.
La nature même de React vous encourage à isoler les aspects réutilisables de votre interface dans des composants individuels. Les composants sont généralement définis dans leurs propres fichiers source, ce qui facilite la navigation et l'organisation de votre base de code.
importer React à partir de “react” ; importer ReactDOM à partir de “react-dom” ; la classe ChildComponent étend React.Component { rendu() { return <h2>Composant enfant</h2>; } } la classe DemoComponent étend React.Component { rendu() { retour ( <div> <h1>Composant de démonstration</h1> <ChildComponent /> </div> ); } } ReactDOM.render(<DemoComponent />, document.body);
Les composants peuvent inclure d'autres composants pour permettre la construction rapide d'interfaces utilisateur complexes. Un seul composant peut afficher une interface utilisateur, appliquer des styles CSS personnalisés et gérer les interactions utilisateur basées sur JavaScript. React utilise un langage de modélisation personnalisé, JSX, pour vous permettre de créer des interfaces utilisateur à composants dans un style similaire au HTML standard.
Rechercher des sections avec état
React excelle dans la gestion des zones de votre interface qui s'affichent différemment en fonction de la valeur d'un état interne. L'idée d'“État” peut sembler vague au premier abord. Cependant, il est facile d'identifier les sections avec état de votre site – ce sont normalement des zones qui produisent des changements dans l'interface utilisateur.
Publicité
Les exemples incluent la valeur d'une entrée de formulaire, si un bouton bascule est sélectionné et l'état de chargement du contenu chargé dynamiquement. Le contenu lui-même est souvent livré “avec état” – un écran de publication de blog générique affichera les données de l'article stockées dans l'état interne du composant.
Dans l'exemple ci-dessous, le texte à l'écran est déterminé par la valeur de la clé de démonstration dans le composant& l'état de #8217. Le texte est modifié automatiquement toutes les cinq secondes en mettant à jour l'état.
importer React à partir de “react” ; importer ReactDOM à partir de “react-dom” ; la classe DemoComponent étend React.Component { constructeur(accessoires) { super(accessoires); this.state = { démo : 1 }; this.timer = null; this.updateText = this.updateText.bind(this); } composantDidMount() { this.timer = setInterval(this.updateText, 5000); } componentWillUnmount() { si (ce.minuteur) clearInterval(this.timer); } updateText() { this.setState({demo : (this.state.demo + 1)}) } rendu() { retourner <h1>{this.state.demo}</h1>; } } ReactDOM.render(<DemoComponent />, document.body);
Essayez de trouver les zones de votre site Web qui doivent changer de manière dynamique. Cela peut être la conséquence d'une action de l'utilisateur, d'une minuterie récurrente ou d'un événement de navigateur (comme la mise hors ligne ou la récupération de nouvelles données d'arrière-plan).
Toute section avec état qui se met à jour régulièrement est susceptible de bénéficier de l'utilisation de React. La gestion transparente de l'état de React fournit une source unique de vérité pour la logique métier de votre site.
Identifier l'interactivité
React peut simplifier la gestion de l'interactivité au sein de votre site Web. La bibliothèque extrait les gestionnaires d'événements intégrés de JavaScript pour fournir une interface unifiée pour répondre aux interactions des utilisateurs.
Publicité
L'utilisation de React peut être particulièrement avantageuse dans le cas de formulaires complexes. Son approche, basée sur des “composants contrôlés”, garantit que l'état interne du formulaire correspond à ce que l'utilisateur voit dans l'interface utilisateur.
importer React à partir de “react” ; importer ReactDOM à partir de “react-dom” ; la classe DemoComponent étend React.Component { constructeur(accessoires) { super(accessoires); this.state = { valeur : "Je suis un champ de texte" }; this.updateValue = this.updateValue.bind(this); } updateValue(e) { this.setState({valeur : e.target.value}); } rendu() { return <input onChange={this.updateValue} valeur={ce.état.valeur} />; } } ReactDOM.render(<DemoComponent />, document.body);
En attachant des gestionnaires d'événements aux contrôles de formulaire, vous pouvez mettre à jour l'état d'un composant chaque fois que l'utilisateur modifie la valeur du contrôle – par exemple en tapant dans un champ de texte ou en sélectionnant une option dans un menu déroulant. Ensuite, faites en sorte que la valeur prop du contrôle (qui correspond à l'attribut de valeur HTML) renvoie à l'état du composant. Les changements dans l'interface utilisateur et le composant seront désormais reflétés l'un dans l'autre.
Recherchez la manipulation DOM
C'est la règle d'or pour tenir compte au moment de décider d'utiliser React. Le contenu avec état, l'interactivité de l'utilisateur et les composants de mise à jour dynamique sont tous renvoyés dans le DOM. La manipulation directe du DOM à l'aide des API JavaScript du navigateur est au mieux maladroite et au pire cauchemardesque.
Tout aspect de votre site Web qui nécessite une manipulation étendue du DOM – ce sont les éléments HTML affichés sur la page – est une source probable de complexité. React peut grandement simplifier ces scénarios. Sa nature basée sur des composants évite l'ennui d'injecter du HTML et de gérer les liaisons d'événements.
Étant donné que React est déclaratif, vous définissez à quoi devrait ressembler le DOM dans la méthode render() d'un composant. La bibliothèque fait ensuite le travail acharné de création, de suppression et de brassage des éléments HTML pour produire la structure DOM que vous avez “déclarée”.
En interne, React maintient son propre “ ; DOM virtuel” ce qui garantit que toute cette procédure s'exécute de manière performante. Cela permet à la bibliothèque d'effectuer le plus petit nombre de rendus possibles, minimisant les frais généraux normalement associés à la manipulation du DOM.
Conclusion
La popularité de React provient de la simplification significative de la gestion des états et de la manipulation du DOM qu'il fournit. Sa nature déclarative permet de construire des applications Web très complexes d'une manière similaire aux pages HTML de base, les développeurs n'ayant qu'à définir à quoi devrait ressembler la structure DOM à l'instant présent.
Publicité
Comme pour toute bonne chose, il y a aussi des inconvénients. L'utilisation de React augmentera la taille de téléchargement de votre site Web. Il ajoute également une dépendance à JavaScript qui pourrait empêcher certains utilisateurs d'accéder à votre contenu. Il y a beaucoup plus de points de défaillance qu'un “pur” Solution HTML, CSS et JavaScript.
Ces limitations signifient que React n'est peut-être pas le meilleur choix pour les sites Web statiques simples. Les sites avec peu d'interactivité et une manipulation limitée du DOM ont tendance à mieux s'en tenir à une solution plus légère. Les avantages de React commencent vraiment à porter leurs fruits sur les sites qui possèdent un état interne considérable. React apporte des améliorations à la productivité des développeurs, à la maintenabilité de la base de code et aux performances globales du site lorsqu'il est utilisé avec précaution sur des sites interactifs centrés sur les données.