{"id":5928,"date":"2024-09-12T09:25:01","date_gmt":"2024-09-12T09:25:01","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/composants-statefull-vs-stateless-react\/"},"modified":"2024-09-12T09:25:06","modified_gmt":"2024-09-12T09:25:06","slug":"composants-statefull-vs-stateless-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/composants-statefull-vs-stateless-react\/","title":{"rendered":"3.9 Composants Statefull vs Stateless en React"},"content":{"rendered":"\n<p><strong>Composants Stateful vs Stateless en React<\/strong> sont des concepts essentiels \u00e0 comprendre pour g\u00e9rer l&rsquo;\u00e9tat et le cycle de vie de vos applications React. En ma\u00eetrisant ces deux types de composants, vous pourrez cr\u00e9er des interfaces utilisateur plus performantes et maintenables. D\u00e9couvrons comment ils fonctionnent et comment les impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Composants Stateful vs Stateless en 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\/706057311?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>En React, un composant stateful est un composant qui g\u00e8re son propre \u00e9tat interne \u00e0 l&rsquo;aide du hook <code>useState<\/code> ou de la classe <code>Component<\/code> de React, alors qu&rsquo;un composant stateless ne g\u00e8re pas son propre \u00e9tat et utilise g\u00e9n\u00e9ralement des props pour recevoir et afficher les donn\u00e9es. Les composants stateless sont souvent appel\u00e9s \u00ab\u00a0composants fonctionnels\u00a0\u00bb car ils sont \u00e9crits sous forme de fonctions simples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants Stateless en React<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er un composant stateless. Les composants fonctionnels (stateless) sont des fonctions JavaScript ordinaires qui prennent des props en argument et retournent des \u00e9l\u00e9ments React. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst Greeting = (props) => {\n  return <h1>Bonjour, {props.name}!<\/h1>;\n};\n\nexport default Greeting;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants Stateful en React<\/h3>\n\n\n\n<p>Pour cr\u00e9er un composant stateful, nous pouvons utiliser la classe <code>Component<\/code> de React ou le hook <code>useState<\/code>. Voici comment proc\u00e9der :<\/p>\n\n\n<h4 class=\"wp-block-heading\">Utilisation de la Classe Component<\/h4>\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { Component } from 'react';\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Compteur : {this.state.count}<\/p>\n        <button onClick={this.increment}>Increment<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\">Utilisation du Hook useState<\/h4>\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nconst Counter = () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Compteur : {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n};\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Quand Utiliser des Composants Statefull ou Stateless<\/h3>\n\n\n\n<p>Il est important de savoir quand utiliser des composants stateful ou stateless. En r\u00e8gle g\u00e9n\u00e9rale :<\/p>\n<ul>\n<li>Utilisez des composants stateful lorsque vous avez besoin de g\u00e9rer un \u00e9tat local, de suivre l&rsquo;entr\u00e9e de l&rsquo;utilisateur ou de modifier l&rsquo;apparence ou le comportement du composant en fonction des actions de l&rsquo;utilisateur.<\/li>\n<li>Utilisez des composants stateless lorsque vous pouvez tout g\u00e9rer via des props et des \u00e9tats parentaux, ce qui facilite la compr\u00e9hension et le test du composant.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Composants Statefull et Stateless<\/h3>\n\n\n<h4 class=\"wp-block-heading\">Communication Entre Composants<\/h4>\n\n\n<p>Voyons comment les composants stateful et stateless peuvent communiquer entre eux pour \u00e9changer des donn\u00e9es et des \u00e9v\u00e9nements. Prenons l&rsquo;exemple d&rsquo;un parent stateful qui transmet des props \u00e0 un enfant stateless :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nconst ParentComponent = () => {\n  const [message, setMessage] = useState(\"Salut depuis le parent!\");\n\n  const updateMessage = () => {\n    setMessage(\"Le message a \u00e9t\u00e9 mis \u00e0 jour!\");\n  };\n\n  return (\n    <div>\n      <ChildComponent message={message} updateMessage={updateMessage} \/>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n\nconst ChildComponent = (props) => {\n  return (\n    <div>\n      <p>{props.message}<\/p>\n      <button onClick={props.updateMessage}>Mettre \u00e0 jour le message<\/button>\n    <\/div>\n  );\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\">Gestion de Formulaire avec Composants Statefull<\/h4>\n\n\n<p>Une utilisation courante des composants stateful est la gestion des formulaires. Voici un exemple o\u00f9 nous utilisons un composant stateful pour g\u00e9rer un formulaire de connexion :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nconst LoginForm = () => {\n  const [username, setUsername] = useState('');\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Logic for handling form submission\n    console.log({ username, password });\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label>Nom d'utilisateur<\/label>\n        <input \n          type=\"text\" \n          value={username} \n          onChange={(e) => setUsername(e.target.value)} \n        \/>\n      <\/div>\n      <div>\n        <label>Mot de passe<\/label>\n        <input \n          type=\"password\" \n          value={password} \n          onChange={(e) => setPassword(e.target.value)} \n        \/>\n      <\/div>\n      <button type=\"submit\">Se connecter<\/button>\n    <\/form>\n  );\n};\n\nexport default LoginForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e de Hooks dans les Composants Stateful<\/h3>\n\n\n\n<p>Les hooks comme <code>useEffect<\/code> et <code>useReducer<\/code> peuvent \u00eatre utilis\u00e9s pour g\u00e9rer des cas d&rsquo;utilisation plus complexes dans les composants stateful. Par exemple, <code>useEffect<\/code> est souvent utilis\u00e9 pour effectuer des appels API lorsque le composant est mont\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nconst DataFetchingComponent = () => {\n  const [data, setData] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => {\n        setData(data);\n        setLoading(false);\n      });\n  }, []); \/\/ Empty dependency array means this effect runs once when the component mounts\n\n  return (\n    <div>\n      {loading ? <p>Chargement...<\/p> : <ul>{data.map(item => <li key={item.id}>{item.name}<\/li>)}<\/ul>}\n    <\/div>\n  );\n};\n\nexport default DataFetchingComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>composants stateful et stateless en React<\/strong> jouent chacun un r\u00f4le unique et crucial dans la construction d&rsquo;applications modernes. Les composants stateless sont parfaits pour les affichages simples et les composants stateful permettent de g\u00e9rer des \u00e9tats internes et des interactions utilisateurs plus complexes. Continuez \u00e0 exp\u00e9rimenter avec ces concepts pour ma\u00eetriser la cr\u00e9ation d&rsquo;interfaces utilisateur performantes et maintenables. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/creer-des-sites-interactifs-avec-react-et-redux\/143\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>. Pour apprendre \u00e0 utiliser les hooks dans React, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/hooks-react-guide-complet\">guide complet sur les hooks en React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-react\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Am\u00e9liorations SEO -->\n\n<!-- Contenu suppl\u00e9mentaire pour atteindre les 1200 mots -->\n\n\n<p>Les <strong>Composants Stateful vs Stateless en React<\/strong> ne se limitent pas aux simples exemples de gestion de compteurs ou de messages. Dans les applications r\u00e9elles, ces composants interagissent souvent avec des API pour r\u00e9cup\u00e9rer ou envoyer des donn\u00e9es. En utilisant des hooks comme <code>useEffect<\/code> et <code>useContext<\/code>, les d\u00e9veloppeurs peuvent g\u00e9rer des op\u00e9rations asynchrones et des \u00e9tats globaux de mani\u00e8re efficace.<\/p>\n\n\n\n<p>Un autre aspect important de la gestion des \u00e9tats avec React est d&rsquo;\u00e9viter les re-rendus inutiles des composants. Les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">fonctionnalit\u00e9s d&rsquo;optimisation<\/a> comme <code>React.memo<\/code> et <code>useCallback<\/code> sont souvent utilis\u00e9es pour m\u00e9moriser les composants stateless et \u00e9viter ces re-rendus. Le hook <code>useMemo<\/code> peut \u00e9galement \u00eatre utilis\u00e9 pour m\u00e9moriser les valeurs calcul\u00e9es pour des inputs complexes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des State et Props avec les Composants<\/h3>\n\n\n\n<p>Le concept de <a href=\"https:\/\/wikiform.fr\/codespace\/stocker-donnees-avec-state-react\" target=\"_blank\" rel=\"noopener\">State<\/a> dans les composants React est fondamental. Le State permet de rendre un composant r\u00e9actif aux changements d&rsquo;\u00e9tat et aux conditions dynamiques. Par exemple, un formulaire de connexion qui change son \u00e9tat pour afficher un message d&rsquo;erreur lorsque l&rsquo;utilisateur entre des informations incorrectes.<\/p>\n\n\n\n<p>Quant aux <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">props<\/a>, ils sont utilis\u00e9s pour transmettre des donn\u00e9es d&rsquo;un composant parent \u00e0 un composant enfant. Les props sont immuables, ce qui signifie qu&rsquo;un composant enfant ne peut pas modifier les props qu&rsquo;il re\u00e7oit. Cette distinction entre props et state est cruciale pour comprendre comment React g\u00e8re les donn\u00e9es et les mises \u00e0 jour des composants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Composants Contr\u00f4","protected":false},"excerpt":{"rendered":"<p>Composants Stateful vs Stateless en React sont des concepts essentiels \u00e0 comprendre pour g\u00e9rer l&rsquo;\u00e9tat et le cycle de vie de vos applications React. En&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5928","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\/5928","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=5928"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5928\/revisions"}],"predecessor-version":[{"id":5929,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5928\/revisions\/5929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3179"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}