L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Patterns avancés dans React
Comprendre pourquoi les modèles de React est un sujet aussi important et comprendre pourquoi ils sont utilisés et quels problèmes ils ont été résolus.
Dans cet article, nous allons en apprendre davantage sur les modèles avancés de React: quels éléments exactement sont ces modèles, pourquoi nous avons commencé à les utiliser et les problèmes qu’ils sont venus résoudre. Nous allons d'abord apprendre brièvement à propos de Mixins, puis à propos des composants d'ordre élevé, puis à Render Props. Nous allons également apprendre à réutiliser notre logique d’état dans nos composants avec ces modèles et à améliorer la composition des composants dans nos applications.
La réutilisation du code a toujours été l’un des sujets les plus importants de React. La façon dont nous construisons nos composants pour les réutiliser le plus possible, de sorte que nous n'écrivions pas trop de code redondant, a toujours été au sommet des priorités dans presque toutes les applications. Le facteur DRY (ne vous répétez pas) est toujours d'actualité et il est très important lorsque nous parlons d'évolutivité dans nos applications. Il convient donc d'en tenir compte à chaque fois que nous construisons quelque chose de nouveau. C'est un sujet tellement important pour les applications. Avec la réutilisation du code, nous obtenons une meilleure application, rédigeons moins de code et notre code devient plus lisible, ce qui améliore l'évolutivité de notre application.
Comme Mae Capozzi a écrit ici . ]React comporte trois niveaux de réutilisation du code (pas du tout: composants à application unique et composants à applications multiples). Pour moi personnellement, c'est comme si chaque morceau de code devait être réutilisé partout dans l'application si nécessaire. Je conviens que nous pourrions parfois écrire du code dont nous ne serions pas fiers ni que nous n'utiliserions dans une autre partie de notre application, mais cela ne devrait être que dans des cas spéciaux. Lorsque nous écrivons du code, nous devons garder à l’esprit que nous devons réutiliser la logique la plus riche possible en états, ce qui permet à notre code d’être plus lisible par les autres développeurs. De plus, nos applications seront plus concises et plus évolutives.
React est une bibliothèque belle et puissante, qui change également totalement la façon dont nous développons nos applications. Cela a permis aux développeurs de découvrir un concept que nous n’avions pas bien envisagé lors de la création de nos applications: la composition. Le terme "composition" peut être défini comme la manière dont nous pouvons construire des fonctions complexes avec des fonctions petites et puissantes. Dans notre cas, nous pouvons le définir en tant que composants, de sorte que nous puissions écrire de meilleurs composants en écrivant des composants plus petits, en réutilisant autant de code que possible.
Parfois, nous devons construire nos composants de manière à réutiliser sa logique. dans d'autres parties de notre application. Comment pouvons-nous le faire? Comment pouvons-nous atteindre un bon niveau de composition et de réutilisation du code? Écrire de meilleurs composants, sans répéter aucune logique de données? Pour cela, nous pouvons utiliser certains modèles avancés pour atteindre ce niveau de composition dans React, tels que Composant d'ordre supérieur ou Accessoires de rendu.
Le début
La composition est devenue un sujet tellement important pour les développeurs que la communauté a commencé à se pencher sur et développez des solutions au problème de code et de logique répétés dans toutes nos applications. Certains modèles traitent de la réutilisation du code, écrivant le code le plus réutilisable possible, ne répétant pas notre logique d'état, puis écrivant de meilleurs composants.
Les mixins semblaient être une bonne option pour la réutilisation du code au début de React, en 2015. Si vous Je ne sais pas à propos de mixins, vous pouvez en lire un article sur le blog ici mais React a tellement changé au fil des années que ce modèle est pratiquement inutilisable aujourd'hui et qu'il ne s'agit certainement pas d'un bon modèle à utiliser. nos applications. Le message disait "son objectif était de vous donner un moyen de réutiliser le code entre les composants", mais cela n'a pas duré trop longtemps.
Pour utiliser les modèles mixins, nous devions utiliser la méthode createClass . fourni pour créer des composants de la classe React. Un mixin ressemble à ceci. Nous souhaitons partager une fonction:
const fetchJokeMixin = {
getJoke: async () => {
wait fetch ("https://api.chucknorris.io/jokes/random")
.then (response => response.json ())
.then (blague => blague)
.catch (err => err);
}
Et notre composant de classe React ressemblerait à ceci:
React.createClass ({
mixins: [fetchJokeMixin],
composantDidMount () {
const joke = this.getJoke ();
}
render () {
// ...
}
}) Notez ici que la méthode createClass fournie pour créer un composant de classe React a été utilisée pour créer des composants de classe avant la publication de la spécification ES6. Mixins avait trop de problèmes de conflits de noms, d'optimisations de performances, de complexité excessive, et plus encore. Il est devenu obsolète très rapidement car nous avons adopté une nouvelle façon de gérer la réutilisation du code et le partage de la logique d'état dans tous nos composants: nous avons commencé à utiliser des composants d'ordre élevé.
en fait, cela a aidé et aide beaucoup d'applications.
Un pas en arrière
Pour comprendre les composants d'ordre élevé, il faut d'abord prendre du recul. Nous devons apprendre quelque chose de fondamental pour comprendre les composants d'ordre élevé et pourquoi ils sont si puissants et si largement utilisés de nos jours pour une meilleure composition des composants et une meilleure réutilisation du code.
Si vous connaissez le langage JavaScript (et j'espère vraiment que vous sont), vous avez peut-être entendu parler du High Order Functions . Fondamentalement, une fonction d'ordre élevé est une fonction qui peut prendre une autre fonction en tant qu'argument ou qui renvoie une fonction en tant que résultat.
Par exemple, la méthode .map intégrée à JavaScript est une fonction d'ordre élevé. Avec cela, nous pouvons mapper un tableau spécifique et renvoyer quelque chose. Par exemple, nous pouvons mapper un tableau de nombres et renvoyer chaque élément multiplié par 2, comme suit:
const arr1 = [1, 2, 3];
const arr2 = arr1.map (item => item * 2);
console.log (arr2); En JavaScript, nous avons également d'autres méthodes intégrées qui sont des fonctions d'ordre élevé, telles que la méthode .filter . Avec cette méthode, nous créons un nouveau tableau avec tous les éléments qui passent la condition. Nous avons beaucoup d'autres méthodes en JavaScript qui sont des fonctions d'ordre élevé, et je vous recommande vraiment d'en apprendre davantage à leur sujet.
Vous avez peut-être aussi entendu parler du motif Décorateur. Fondamentalement, avec Decorators, nous pouvons envelopper une partie de notre code (une classe ou une fonction) et y ajouter quelque chose, sans affecter le comportement des autres objets du même code. Avec lui, nous pouvons créer de nouvelles fonctionnalités et nous pouvons également étendre le comportement de notre classe ou fonction sans avoir à créer une nouvelle fonction.
const addStringToName = fn => nom => {
const awesomeString = `$ {name} est génial.`;
fn (awesomeString);
};
const sayName = name => console.log (name);
const awesome = addStringToName (sayName);
awesome ("Leonardo"); Les décorateurs sont dans la phase 2, alors peut-être que dans un avenir proche, nous pourrons commencer à les utiliser et à écrire plus de code déclaratif avec un meilleur support.
Mais pourquoi est-ce que je vous parle de High Fonctions de commande et décorateurs? Eh bien, parce qu'ils ressemblent beaucoup à High Order Components dans React
High Order Components
Un composant High Order est en gros une fonction qui prend un composant comme argument et renvoie un nouveau composant avec un peu plus de fonctionnalité. Cela ressemble beaucoup à une fonction d'ordre élevé, mais au lieu de renvoyer une fonction, nous retournons un composant. Nous pouvons tirer profit de ce modèle et l'utiliser avec nos composants pour créer de meilleurs composants et du code réutilisable.
Imaginons un composant appelé Jokes et à l'intérieur de celui-ci, un bouton. Chaque fois que nous cliquons sur ce bouton, nous adressons une requête à l'API de Chuck Norris et nous rendons une nouvelle blague aléatoire. Notre composant de la classe React ressemblerait à ceci:
class Jokes étend Component {
state = {
blague: ""
};
onRequest = () => {
fetch ("https://api.chucknorris.io/jokes/random")
.then (response => response.json ())
.then (blague => {
this.setState ({joke: joke.value});
})
.catch (err => err);
};
render () {
revenir (
{this.state.joke}
);
}
}; Maintenant, si nous devons utiliser cette logique dans un autre composant, par exemple, que pouvons-nous faire? Nous pourrions utiliser un composant d'ordre élevé! Nous pourrions envelopper notre logique, dans ce cas uniquement la demande, et créer un composant d'ordre élevé uniquement pour elle.
Un composant d'ordre élevé se présente généralement ainsi:
const withJoke = JokeComponent => props => {
classe de retour JokeWrapper extended Component {
render () {
retour Un composant d'ordre élevé est essentiellement une fonction, et à l'intérieur de celle-ci, nous allons envelopper un composant et lui transmettre tous les accessoires supplémentaires souhaités. Dans notre cas, nous voulons créer un HOC pour passer la logique de demande, de sorte que chaque fois que nous encapsulons un composant avec ce HOC, il l'inclura dans ce composant spécifique.
Notre composant High Order ressemblerait ainsi:
const withJoke = JokeComponent => {
La classe de retour étend Component {
state = {
blague: ""
};
onRequest = () => {
fetch ("https://api.chucknorris.io/jokes/random")
.then (response => response.json ())
.then (blague => {
this.setState ({joke: joke.value});
})
.catch (err => err);
};
render () {
revenir (
Nous passons deux accessoires à notre composant enveloppé – blague qui va être notre blague, et onRequest qui est la fonction que nous allons faire une nouvelle demande et définir une nouvelle blague. Mais maintenant, comment puis-je utiliser ce COH dans mon composant Blagues?
Dans mon composant Jokes il ne me reste plus qu'à passer le à la demande où que je sois. vouloir. Dans ce cas, je vais passer notre plaisanterie dans un texte chaque fois que nous cliquons sur un bouton. Ensuite, il me faut encapsuler le composant Jokes avec le composant avec Jokes à la fin du fichier.
La classe Jokes étend Component {.
render () {
revenir (
{this.props.joke}
);
}
} Nous réutilisons maintenant le maximum de notre logique et répétons moins de code. Vous pouvez également développer et utiliser ce modèle dans d'autres cas – cela vous aidera certainement à répéter moins de code et à en réutiliser davantage. Comme vous pouvez le constater, les composants d'ordre élevé constituent un modèle puissant et peuvent nous aider à réutiliser le maximum de code possible et à partager facilement la logique entre les composants.
Nous disposons également d'un autre modèle intéressant pour partager la logique entre composants et la réutiliser. code. C'est ce qu'on appelle Render Props. Voyons maintenant en quoi les accessoires de rendu peuvent être différents des composants d'ordre élevé.
Render Props
Un accessoire de rendu est un accessoire que vous transmettez à un composant qui indique le rendu de ce composant. C'est tout. Au lieu de transmettre un composant comme dans un composant d'ordre élevé, nous transmettons une fonction qui rend un composant. Cela semble assez génial et facile aussi, et en fait, ça l'est! Voici à quoi ressemble un accessoire de rendu:
(
Comme vous pouvez le constater, c’est simple et puissant. Pour vous l'expliquer davantage, voici ce qui fonctionne sous le capot:
À l'intérieur du composant FetchJoke nous passons devant un accessoire appelé rendu qui va être une fonction de Rend notre composant Jokes . Cette fonction rend prend deux arguments – la blague qui va être notre blague que nous extrayons de l’API, et la demande qui est notre fonction vous allez utiliser pour faire une nouvelle requête chaque fois que vous cliquez sur un bouton.
Vous voyez, c’est assez simple et facile à comprendre, écrivons donc ce code pour que cela fonctionne. Nous allons créer un nouveau composant appelé FetchJoke . Nous copions tout le code que nous avions précédemment utilisé dans notre withJoke HOC, mais cette fois nous allons avoir un composant de classe et dans la méthode de rendu, nous allons renvoyer le code suivant: [19659029] render () {
revenir (
{this.props.render (this.state)}
)
}
Comme vous pouvez le constater, le support est simplement une fonction qui rend tout notre état, dans ce cas, notre blague . Et la fonction onRequest que nous utilisons pour faire une nouvelle demande chaque fois que nous cliquons sur ce bouton, nous transmettons cela à l'intérieur du div, ainsi chaque fois que nous cliquons, nous allons générer une nouvelle blague.
Donc maintenant, dans notre composant Jokes, nous retirons le composant avec Joke que nous avons créé précédemment et le déroulons également. Ensuite, dans notre composant principal de l'application, nous importons les composants FetchJoke et Jokes et nous écrivons le code suivant:
(
Nous utilisons maintenant le modèle Render Props pour restituer le composant Jokes et lui transmettre certains accessoires. Génial!
Vous vous demandez peut-être pourquoi le support qui rend notre composant Jokes est nommé . C’est à vous de décider, vous pouvez le nommer comme vous le souhaitez, c’est une pratique exemplaire de le nommer render ou quelque chose de similaire, car vous pouvez facilement comprendre ce qui se passe sous le capot.
Conclusion
Dans cet article, nous avons découvert les composants d'ordre élevé et les accessoires de rendu, comment les utiliser dans vos applications et les problèmes résolus par ces modèles.
Ces deux modèles sont assez étonnants pour résoudre le problème de la réutilisation du code. que beaucoup de gens pourraient avoir, et pour avoir une meilleure composition de composant à travers nos applications. Mais maintenant, nous avons une nouvelle API qui peut tout changer dans la manière dont nous envisagions la réutilisation du code. Je parle de React Hooks.
Dans le prochain article, je parlerai de React Hooks, de leur fonctionnement et de la façon dont ils peuvent remplacer ces modèles dans certains cas, tout en améliorant la réutilisation du code et la composition des composants.
J'espère que vous avez apprécié cet article.
Vous souhaitez avoir une longueur d'avance sur React Hooks?
Nos composants de KendoReact fonctionnent très bien avec React Hooks - vous en saurez plus à ce sujet dans notre récent article de blog , Découverte de Hooks React avec KendoReact .
Source link