{"id":5914,"date":"2024-09-09T04:14:19","date_gmt":"2024-09-09T04:14:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\/"},"modified":"2024-09-09T04:14:23","modified_gmt":"2024-09-09T04:14:23","slug":"composants-par-classe-vs-fonction-react-differences","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\/","title":{"rendered":"3.2 Composants par Classe vs Fonction en React : Diff\u00e9rences"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Composants Classe Fonction React<\/strong> : Une compr\u00e9hension approfondie des diff\u00e9rences entre les composants par classe et fonction en React est essentielle pour tout d\u00e9veloppeur cherchant \u00e0 ma\u00eetriser cette biblioth\u00e8que JavaScript. Dans ce tutoriel, nous allons explorer les diff\u00e9rences majeures entre ces deux types de composants et pourquoi vous pourriez choisir l&rsquo;un plut\u00f4t que l&rsquo;autre pour vos projets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Composants Classe Fonction 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\/706053577?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>Les composants en React peuvent \u00eatre d\u00e9finis soit en utilisant des classes soit en utilisant des fonctions. Ces deux approches poss\u00e8dent leurs caract\u00e9ristiques sp\u00e9cifiques qui peuvent influencer votre choix selon les besoins du projet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants avec les Classes en React<\/h3>\n\n\n\n<p>Les composants par classe \u00e9taient la m\u00e9thode initiale introduite lors des premi\u00e8res versions de React. Ils permettent de g\u00e9rer l&rsquo;\u00e9tat local et de cr\u00e9er des composants riches en fonctionnalit\u00e9s. Voici comment d\u00e9finir un composant par classe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0\n    };\n  }\n\n  handleClick = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}<\/p>\n        <button onClick={this.handleClick}>Increment<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants avec les Fonctions en React<\/h3>\n\n\n\n<p>Les composants fonctionnels sont plus simples \u00e0 \u00e9crire et se concentrent sur la d\u00e9claration de composants en tant que fonctions pures. Initialement, ils ne pouvaient pas g\u00e9rer l&rsquo;\u00e9tat, mais avec l&rsquo;introduction des hooks dans React 16.8, ils ont gagn\u00e9 en puissance et flexibilit\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nconst MyFunctionalComponent = () => {\n  const [count, setCount] = useState(0);\n\n  const handleClick = () => {\n    setCount(count + 1);\n  };\n\n  return (\n    <div>\n      <p>Count: {count}<\/p>\n      <button onClick={handleClick}>Increment<\/button>\n    <\/div>\n  );\n};\n\nexport default MyFunctionalComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Cl\u00e9s entre les Composants par Classe et les Composants Fonctionnels en React<\/h3>\n\n\n\n<p>Pour comprendre les diff\u00e9rences entre ces deux types de composants, examinons les points suivants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Syntaxe et Simplicit\u00e9 :<\/strong> Les composants fonctionnels offrent une syntaxe plus concise et sont g\u00e9n\u00e9ralement plus faciles \u00e0 lire et \u00e0 maintenir. Les composants par classe peuvent devenir assez verbeux, notamment avec l&rsquo;ajout des \u00e9tats et des m\u00e9thodes lifecycle.<\/li>\n<li><strong>Hooks :<\/strong> Les hooks, introduits dans React 16.8, ont r\u00e9volutionn\u00e9 la fa\u00e7on dont nous g\u00e9rons l&rsquo;\u00e9tat et les effets dans les composants fonctionnels. Ils permettent d&rsquo;acc\u00e9der \u00e0 des fonctionnalit\u00e9s auparavant r\u00e9serv\u00e9es aux composants par classe.<\/li>\n<li><strong>Lifecycle Methods :<\/strong> Les composants par classe utilisent des m\u00e9thodes lifecycle telles que <code>componentDidMount<\/code> et <code>componentDidUpdate<\/code>. Avec les composants fonctionnels et les hooks, nous utilisons <code>useEffect<\/code> pour des op\u00e9rations similaires.<\/li>\n<li><strong>Performances :<\/strong> Les composants fonctionnels peuvent b\u00e9n\u00e9ficier d&rsquo;un gain de performance gr\u00e2ce \u00e0 l&rsquo;optimisation des rendus et des re-rendus plus simples.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Changer de Composant : Quand et Pourquoi<\/h3>\n\n\n\n<p>Il est crucial de savoir quand utiliser des composants par classe et quand opter pour des composants fonctionnels :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00c9tendre des Composants Existants :<\/strong> Les composants par classe peuvent \u00eatre pr\u00e9f\u00e9rables si vous avez besoin de m\u00e9thodes lifecycle sp\u00e9cifiques ou si vous travaillez sur des bases de code existantes qui utilisent largement les classes.<\/li>\n<li><strong>Nouveaux Projets :<\/strong> Pour de nouveaux projets, les composants fonctionnels sont g\u00e9n\u00e9ralement recommand\u00e9s gr\u00e2ce \u00e0 leur simplicit\u00e9, leur syntaxe moderne et les avantages des hooks.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques et Cas d&rsquo;Usage<\/h3>\n\n\n\n<p>Voyons quelques exemples pratiques o\u00f9 ces deux types de composants peuvent \u00eatre utilis\u00e9s efficacement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Composants \u00e0 \u00c9tat Complexe<\/h4>\n\n\n\n<p>Pour un composant n\u00e9cessitant une gestion complexe de l&rsquo;\u00e9tat comme un formulaire avec plusieurs \u00e9tapes, les composants par classe peuvent \u00eatre plus adapt\u00e9s en raison des m\u00e9thodes lifecycle et de la manipulation de l&rsquo;\u00e9tat plus avanc\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>class MultiStepForm extends Component {\n  state = {\n    step: 1,\n    formData: {\n      name: '',\n      age: ''\n    }\n  };\n\n  nextStep = () => {\n    this.setState({ step: this.state.step + 1 });\n  };\n\n  render() {\n    switch (this.state.step) {\n      case 1:\n        return <NameStep nextStep={this.nextStep} formData={this.state.formData} \/>;\n      case 2:\n        return <AgeStep nextStep={this.nextStep} formData={this.state.formData} \/>;\n      default:\n        return <ReviewStep formData={this.state.formData} \/>;\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Composants Simples et R\u00e9utilisables<\/h4>\n\n\n\n<p>Pour des composants simples et r\u00e9utilisables comme des boutons ou des inputs qui ne n\u00e9cessitent pas une gestion complexe de l&rsquo;\u00e9tat, les composants fonctionnels avec hooks sont parfaits :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const IncrementButton = () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <button onClick={() => setCount(count + 1)}>\n      Count {count}\n    <\/button>\n  );\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Combin\u00e9e dans un Projet R\u00e9el<\/h3>\n\n\n\n<p>Dans un projet r\u00e9el, vous pouvez combiner des composants par classe et fonctionnels pour tirer le meilleur parti de chaque approche. Par exemple, vous pourriez utiliser des composants par classe pour des conteneurs complexes et des composants fonctionnels pour des \u00e9l\u00e9ments purement de pr\u00e9sentation.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>class App extends Component {\n  render() {\n    return (\n      <div>\n        <Header \/>\n        <PostModule \/>\n      <\/div>\n    );\n  }\n}\n\nconst Header = () => <h1>Welcome to the Blog<\/h1>;\n\nconst PostModule = () => {\n  const [posts, setPosts] = useState([]);\n\n  useEffect(() => {\n    fetchPosts().then(data => setPosts(data));\n  }, []);\n\n  return (\n    <div>\n      {posts.map(post => (\n        <Post key={post.id} {...post} \/>\n      ))}\n    <\/div>\n  );\n};\n\nconst Post = ({ title, body }) => (\n  <div>\n    <h2>{title}<\/h2>\n    <p>{body}<\/p>\n  <\/div>\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exploration Suppl\u00e9mentaire et Ressources<\/h3>\n\n\n\n<p>Pour poursuivre votre exploration de React, nous recommandons de consulter les ressources suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">Documentation officielle de React<\/a> pour les concepts de base et avanc\u00e9s.<\/li>\n<li><a href=\"https:\/\/egghead.io\/\" target=\"_blank\" rel=\"noopener\">Cours interactifs sur Egghead.io<\/a> pour des tutoriels centr\u00e9s sur React.<\/li>\n<li><a href=\"https:\/\/www.udemy.com\/course\/react-the-complete-guide-incl-redux\/\" target=\"_blank\" rel=\"noopener\">Cours React complet sur Udemy<\/a> pour un apprentissage structur\u00e9.<\/li>\n<li><a href=\"https:\/\/codesandbox.io\/\" target=\"_blank\" rel=\"noopener\">CodeSandbox<\/a> pour exp\u00e9rimenter le code React directement dans votre navigateur.<\/li>\n<li><a href=\"https:\/\/www.pluralsight.com\/courses\/react-redux-reactive-programming\" target=\"_blank\" rel=\"noopener\">Cours React et Redux sur Pluralsight<\/a> pour approfondir vos comp\u00e9tences.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Comprendre les <strong>Composants Classe Fonction React<\/strong> est essentiel pour tirer le meilleur parti de cette biblioth\u00e8que. Chaque type de composant a ses propres avantages et inconv\u00e9nients, et le choix entre les deux d\u00e9pend de l&rsquo;architecture de votre application et des fonctionnalit\u00e9s souhait\u00e9es. Alors que les compositions par classe offrent une approche traditionnelle et robuste, les composants fonctionnels avec hooks introduisent une simplicit\u00e9 et des performances accrues. Continuez \u00e0 explorer et exp\u00e9rimentez pour ma\u00eetriser ces outils puissants de React. Pour plus de ressources, visitez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">cours complet sur React<\/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=\"Formation React et Redux - Offre sp\u00e9ciale 50%\" title=\"\"><\/a>\n\n\n<!-- Internal Links -->\n\n<p>Pour en savoir plus sur React et ses diff\u00e9rents aspects, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">Composants par Classe vs Fonction en React<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">cr\u00e9er votre premi\u00e8re application React<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/quoi-que-react-explorer-hooks\" target=\"_blank\" rel=\"noopener\">tout ce que vous devez savoir sur les hooks React","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Composants Classe Fonction React : Une compr\u00e9hension approfondie des diff\u00e9rences entre les composants par classe et fonction en React est essentielle pour tout d\u00e9veloppeur&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5914","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\/5914","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=5914"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5914\/revisions"}],"predecessor-version":[{"id":5915,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5914\/revisions\/5915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3178"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}