{"id":5926,"date":"2024-09-11T09:24:50","date_gmt":"2024-09-11T09:24:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\/"},"modified":"2024-09-11T09:24:53","modified_gmt":"2024-09-11T09:24:53","slug":"differences-entre-props-et-state-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\/","title":{"rendered":"3.8 Diff\u00e9rences entre Props et State en React"},"content":{"rendered":"\n<p><strong>Les diff\u00e9rences entre Props et State en React <\/strong> jouent un r\u00f4le crucial pour la gestion dynamique des composants en React. Comprendre comment utiliser correctement les <strong>Props et State<\/strong> peut consid\u00e9rablement am\u00e9liorer la performance et la r\u00e9activit\u00e9 de vos applications React. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Props et State 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\/706056994?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 <strong>Props<\/strong> (courte forme de propri\u00e9t\u00e9s) et le <strong>State<\/strong> (\u00e9tat) sont deux concepts fondamentaux dans l&rsquo;architecture de React. Bien qu&rsquo;ils puissent sembler similaires, ils ont des r\u00f4les distincts. Les <strong>Props<\/strong> sont des param\u00e8tres envoy\u00e9s aux composants pour param\u00e9trer leur affichage, tandis que le <strong>State<\/strong> est utilis\u00e9 pour g\u00e9rer les donn\u00e9es locales d&rsquo;un composant qui peuvent changer au fil du temps. Voyons cela en d\u00e9tail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Props en React<\/h3>\n\n\n\n<p>Les Props sont des arguments pass\u00e9s aux composants React. Ils sont utilis\u00e9s pour passer des donn\u00e9es de parent \u00e0 enfant. Les composants enfants peuvent acc\u00e9der aux props mais ne peuvent pas les modifier. Ceci garantit que les flux de donn\u00e9es restent unidirectionnels, ce qui est une des bases de l&rsquo;architecture React. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nimport React from 'react';\n\n\/\/ Composant enfant affichant une prop\nfunction Greeting(props) {\n  return <h1>Bonjour, {props.name}!<\/h1>;\n}\n\n\/\/ Composant parent passant une prop\nfunction App() {\n  return <Greeting name=\"Alice\" \/>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre le State en React<\/h3>\n\n\n\n<p>Le State est similaire aux props, mais il est g\u00e9r\u00e9 \u00e0 l&rsquo;int\u00e9rieur du composant. Le state peut changer au cours du temps et d\u00e9clencher un re-render lorsqu&rsquo;il change. Contrairement aux props, chaque composant est responsable de son propre state. Voici comment utiliser le state avec des hooks dans un composant fonctionnel :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nimport React, { useState } from 'react';\n\nfunction Counter() {\n  \/\/ D\u00e9clarer une nouvelle variable state, qu'on appellera \"count\"\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Vous avez cliqu\u00e9 {count} fois<\/p>\n      <button onClick={() => setCount(count + 1)}>Cliquer<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Cl\u00e9s entre Props et State<\/h3>\n\n\n\n<p>Pour mieux comprendre les diff\u00e9rences entre Props et State, voici un tableau comparatif :<\/p>\n\n\n\n<table>\n  <thead>\n    <tr>\n      <th>Crit\u00e8re<\/th>\n      <th>Props<\/th>\n      <th>State<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>Origine<\/td>\n      <td>Externe (pass\u00e9 par le composant parent)<\/td>\n      <td>Interne (d\u00e9fini dans le composant lui-m\u00eame)<\/td>\n    <\/tr>\n    <tr>\n      <td>Utilisation<\/td>\n      <td>Initialisation et configuration de l&rsquo;affichage<\/td>\n      <td>Gestion dynamique des donn\u00e9es du composant<\/td>\n    <\/tr>\n    <tr>\n      <td>Mutabilit\u00e9<\/td>\n      <td>Immuable (read-only)<\/td>\n      <td>Mutable (modifiable via setState ou useState)<\/td>\n    <\/tr>\n    <tr>\n      <td>Accessibilit\u00e9<\/td>\n      <td>Pass\u00e9 aux composants enfants<\/td>\n      <td>Local au composant<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n\n\n\n<h3 class=\"wp-block-heading\">Cas d\u2019Utilisation des Props<\/h3>\n\n\n\n<p>Les Props sont parfaits pour passer des donn\u00e9es immuables. Par exemple, lors de la cr\u00e9ation d&rsquo;un composant d&rsquo;affichage d&rsquo;utilisateur, vous pouvez facilement passer les donn\u00e9es utilisateur comme props :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nfunction UserCard(props) {\n  return (\n    <div>\n      <h2>{props.user.name}<\/h2>\n      <p>Email: {props.user.email}<\/p>\n    <\/div>\n  );\n}\n\n\/\/ Utilisation du composant\n<UserCard user={{name: \"Alice\", email: \"alice@example.com\"}} \/>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cas d\u2019Utilisation du State<\/h3>\n\n\n\n<p>Le State est id\u00e9al pour g\u00e9rer les donn\u00e9es qui changent au fil du temps. Un excellent exemple est un formulaire de connexion qui g\u00e8re les entr\u00e9es utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nimport React, { useState } from 'react';\n\nfunction LoginForm() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Traitement des informations de connexion ici\n    console.log('Email:', email);\n    console.log('Password:', password);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label>Email:<\/label>\n        <input type=\"email\" value={email} onChange={(e) => setEmail(e.target.value)} \/>\n      <\/div>\n      <div>\n        <label>Password:<\/label>\n        <input type=\"password\" value={password} onChange={(e) => setPassword(e.target.value)} \/>\n      <\/div>\n      <button type=\"submit\">Login<\/button>\n    <\/form>\n  );\n}\n\nexport default LoginForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner Props et State<\/h3>\n\n\n\n<p>Dans de nombreux cas, les composants React utilisent \u00e0 la fois des props et du state. Les props peuvent \u00eatre utilis\u00e9es pour initialiser le state local, ou pour transmettre des gestionnaires d&rsquo;\u00e9v\u00e9nements d\u00e9finis par le parent. Voici un exemple de composant Todo qui combine props et state :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nimport React, { useState } from 'react';\n\nfunction TodoItem(props) {\n  const [isCompleted, setIsCompleted] = useState(props.completed);\n\n  return (\n    <div>\n      <input\n        type=\"checkbox\"\n        checked={isCompleted}\n        onChange={() => setIsCompleted(!isCompleted)}\n      \/>\n      <span style={{ textDecoration: isCompleted ? 'line-through' : 'none' }}>\n        {props.title}\n      <\/span>\n    <\/div>\n  );\n}\n\nfunction TodoList() {\n  const todos = [\n    { id: 1, title: 'Learn React', completed: false },\n    { id: 2, title: 'Build a Todo App', completed: false }\n  ];\n\n  return (\n    <div>\n      {todos.map(todo => (\n        <TodoItem key={todo.id} title={todo.title} completed={todo.completed} \/>\n      ))}\n    <\/div>\n  );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Props et State en React<\/h3>\n\n\n\n<p>Diverses fonctionnalit\u00e9s avanc\u00e9es de React tirent parti \u00e0 la fois des props et du state. Voici quelques exemples pour illustrer leur utilisation complexe.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation des Props pour la Communication entre Composants<\/h4>\n\n\n\n<p>Les props servent souvent \u00e0 la communication entre composants parents et enfants. Voici un exemple d&rsquo;un composant parent qui met \u00e0 jour le state du composant enfant via des props :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nfunction ParentComponent() {\n  const [message, setMessage] = useState('Bonjour!');\n\n  const updateMessage = () => {\n    setMessage('Bonjour, le monde!');\n  };\n\n  return (\n    <div>\n      <ChildComponent message={message} \/>\n      <button onClick={updateMessage}>Mettre \u00e0 jour le message<\/button>\n    <\/div>\n  );\n}\n\nfunction ChildComponent(props) {\n  return <p>{props.message}<\/p>;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation du State pour la Gestion des Formulaires<\/h4>\n\n\n\n<p>Les formulaires interactifs en React montrent puissamment comment le state peut \u00eatre utilis\u00e9 pour g\u00e9rer les entr\u00e9es utilisateur et fournir une exp\u00e9rience utilisateur riche :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nfunction ContactForm() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Traitement du formulaire ici\n    console.log('Nom:', name);\n    console.log('Email:', email);\n    console.log('Message:', message);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label>Nom:<\/label>\n        <input type=\"text\" value={name} onChange={(e) => setName(e.target.value)} \/>\n      <\/div>\n      <div>\n        <label>Email:<\/label>\n        <input type=\"email\" value={email} onChange={(e) => setEmail(e.target.value)} \/>\n      <\/div>\n      <div>\n        <label>Message:<\/label>\n        <textarea value={message} onChange={(e) => setMessage(e.target.value)} \/>\n      <\/div>\n      <button type=\"submit\">Envoyer<\/button>\n    <\/form>\n  );\n}\n\nexport default ContactForm;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>Props et State en React<\/strong> sont des concepts fondamentaux qui permettent de cr\u00e9er des interfaces utilisateur interactives et dynamiques. Une compr\u00e9hension approfondie de la mani\u00e8re dont ils fonctionnent et interagissent est essentielle pour tout d\u00e9veloppeur React. Exp\u00e9rimentez et pratiquez ces concepts pour ma\u00eetriser l&rsquo;art de la gestion des composants en React. Pour plus de ressources sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-avanc\u00e9\/151\">les fonctionnalit\u00e9s avanc\u00e9es de React<\/a>. Pour apprendre \u00e0 cr\u00e9er des composants interactifs, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-des-composants-interactifs-avec-react-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.","protected":false},"excerpt":{"rendered":"<p>Les diff\u00e9rences entre Props et State en React jouent un r\u00f4le crucial pour la gestion dynamique des composants en React. Comprendre comment utiliser correctement les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5926","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\/5926","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=5926"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5926\/revisions"}],"predecessor-version":[{"id":5927,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5926\/revisions\/5927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3202"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}