{"id":6062,"date":"2024-12-02T12:55:20","date_gmt":"2024-12-02T12:55:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\/"},"modified":"2024-12-02T12:55:24","modified_gmt":"2024-12-02T12:55:24","slug":"qu-est-ce-que-hoc-react-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\/","title":{"rendered":"10.2 Qu&rsquo;est-ce que les HOC en React ? Explications"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les HOC (Higher-Order Components) en React<\/strong> sont un concept puissant qui permet de r\u00e9utiliser la logique de composants dans vos applications React. Comprendre et utiliser les <strong>HOC en React<\/strong> peut am\u00e9liorer la maintenabilit\u00e9 et la r\u00e9utilisabilit\u00e9 de votre code. Apprenons ce qu&rsquo;ils sont et comment les impl\u00e9menter \u00e0 l&rsquo;aide d&rsquo;exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>HOC React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706116156?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Un Higher-Order Component (HOC) est une fonction qui prend un composant en argument et retourne un nouveau composant. Les HOC sont couramment utilis\u00e9s dans <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">React<\/a> pour injecter des fonctionnalit\u00e9s r\u00e9utilisables dans les composants. Pouvant \u00eatre compar\u00e9s au concept de Higher-Order Functions en JavaScript, les HOC permettent d&rsquo;abstraire la logique complexe et de la partager entre plusieurs composants, sans dupliquer le code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Cr\u00e9er un HOC en React ?<\/h3>\n\n\n\n<p>Pour cr\u00e9er un HOC, vous d\u00e9finissez une fonction qui prend un composant comme param\u00e8tre et retourne un nouveau composant. Voici un exemple simple de HOC qui ajoute une gestion de chargement \u00e0 un composant.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction withLoading(Component) {\n  return function WithLoadingComponent({ isLoading, ...props }) {\n    if (!isLoading) return <Component {...props} \/>;\n    return <p>Loading...<\/p>;\n  };\n}\n\nexport default withLoading;\n<\/code><\/pre>\n\n\n\n<p>Cet exemple montre comment les Higher-Order Components peuvent simplifier la gestion de l&rsquo;\u00e9tat de chargement. Pour d&rsquo;autres m\u00e9thodes avanc\u00e9es de gestion de l&rsquo;\u00e9tat, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/stocker-donnees-avec-state-react\" target=\"_blank\" rel=\"noopener\">guide sur le state dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation d&rsquo;un HOC pour Enrichir un Composant<\/h3>\n\n\n\n<p>Apr\u00e8s avoir d\u00e9fini un HOC, il peut \u00eatre utilis\u00e9 pour enrichir un composant existant avec des fonctionnalit\u00e9s additionnelles. Dans cet exemple, nous faisons passer un composant de liste \u00e0 travers notre HOC <code>withLoading<\/code> pour ajouter une fonction de retour durant le chargement des donn\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\nimport withLoading from '.\/withLoading';\n\nfunction ItemList({ items }) {\n  return (\n    <ul>\n      {items.map(item => (\n        <li key={item.id}>{item.name}<\/li>\n      ))}\n    <\/ul>\n  );\n}\n\nconst ItemListWithLoading = withLoading(ItemList);\n\nfunction App() {\n  const [loading, setLoading] = useState(true);\n  const [items, setItems] = useState([]);\n\n  useEffect(() => {\n    fetch('\/api\/items')\n      .then(response => response.json())\n      .then(data => {\n        setItems(data);\n        setLoading(false);\n      });\n  }, []);\n\n  return <ItemListWithLoading isLoading={loading} items={items} \/>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Dans ce contexte, utiliser les HOC peut \u00eatre compar\u00e9 \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des refs<\/a> en React, particuli\u00e8rement utile pour \u00e9tendre les capacit\u00e9s d&rsquo;un composant sans toucher \u00e0 sa structure de base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages et Cas d&rsquo;Utilisation des HOC<\/h3>\n\n\n\n<p>Les HOC sont particuli\u00e8rement utiles pour :<\/p>\n<ul>\n<li>Abstraire des fonctionnalit\u00e9s r\u00e9currentes, comme la gestion de l&rsquo;authentification ou l&rsquo;acc\u00e8s aux donn\u00e9es.<\/li>\n<li>Modifier le comportement des composants sans modifier leur structure d&rsquo;origine.<\/li>\n<li>Isoler les pr\u00e9occupations logiques dans des composants distincts faciles \u00e0 maintenir et \u00e0 tester.<\/li>\n<\/ul>\n\n\n\n<p>Les HOC en React sont semblables dans leur utilit\u00e9 aux <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\" target=\"_blank\" rel=\"noopener\">composants r\u00e9actifs<\/a> pour g\u00e9rer efficacement la r\u00e9activit\u00e9 des interfaces utilisateur, souvent discut\u00e9s dans des guides avanc\u00e9s de d\u00e9veloppement d&rsquo;applications React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quand \u00c9viter d&rsquo;Utiliser les HOC React<\/h3>\n\n\n\n<p>Bien que puissants, les HOC ne sont pas une panac\u00e9e et ils peuvent complexifier la structure de votre code si trop utilis\u00e9s. Voici quelques situations o\u00f9 il est pr\u00e9f\u00e9rable d&rsquo;envisager d&rsquo;autres solutions :<\/p>\n<ul>\n<li>Lorsque vous n&rsquo;avez besoin d&rsquo;ajouter de la logique qu&rsquo;\u00e0 un seul composant, les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">hooks<\/a> ou le pattern de composition peuvent \u00eatre des alternatives plus simples.<\/li>\n<li>Pour \u00e9viter la \u00ab\u00a0taxe cognitive\u00a0\u00bb qu&rsquo;introduit l&rsquo;usage de HOC imbriqu\u00e9s, vous pouvez r\u00e9\u00e9valuer si un design en composant plus plat pourrait fonctionner aussi bien.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les HOC React<\/h2>\n\n\n\n<p>Les <strong>Higher-Order Components<\/strong> offrent un moyen efficace d&rsquo;enrichir vos composants React avec des fonctionnalit\u00e9s r\u00e9utilisables tout en minimisant le code dupliqu\u00e9. En les utilisant judicieusement, vous pouvez rendre vos applications React plus robustes et maintenables. Pour explorer d&rsquo;autres concepts avanc\u00e9s de React, vous pouvez consulter notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-guide-avanc\u00e9\/123\">les guides avanc\u00e9s sur React<\/a> ou suivre des formations sur <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les HOC (Higher-Order Components) en React sont un concept puissant qui permet de r\u00e9utiliser la logique de composants dans vos applications React. Comprendre et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3256,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6062","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6062"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6062\/revisions"}],"predecessor-version":[{"id":6063,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6062\/revisions\/6063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3256"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}