{"id":5908,"date":"2024-09-07T22:14:08","date_gmt":"2024-09-07T22:14:08","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/types-primitifs-vs-types-reference-javascript-react\/"},"modified":"2024-09-07T22:14:12","modified_gmt":"2024-09-07T22:14:12","slug":"types-primitifs-vs-types-reference-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/types-primitifs-vs-types-reference-javascript-react\/","title":{"rendered":"2.9 Types Primitifs vs Types par R\u00e9f\u00e9rence en JavaScript React"},"content":{"rendered":"\n<p><strong>Types Primitifs et Types par R\u00e9f\u00e9rence en JavaScript React<\/strong> jouent un r\u00f4le crucial dans la gestion de l&rsquo;\u00e9tat et des donn\u00e9es au sein d&rsquo;applications JavaScript modernes. Comprendre les distinctions entre <strong>types primitifs et types par r\u00e9f\u00e9rence en JavaScript<\/strong> peut consid\u00e9rablement am\u00e9liorer votre capacit\u00e9 \u00e0 \u00e9crire du code React efficace et performant. Apprenons comment ils fonctionnent et comment les manipuler \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Types Primitifs vs Types par R\u00e9f\u00e9rence en JavaScript<\/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\/706051083?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>Lorsque vous travaillez avec JavaScript, il est essentiel de comprendre les diff\u00e9rences fondamentales entre les types primitifs et les types par r\u00e9f\u00e9rence. Cette compr\u00e9hension est particuli\u00e8rement importante dans le contexte de React, o\u00f9 la gestion de l&rsquo;\u00e9tat et des mises \u00e0 jour joue un r\u00f4le central dans la cr\u00e9ation d&rsquo;interfaces utilisateur dynamiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce qu&rsquo;un Type Primitif ?<\/h3>\n\n\n\n<p>En JavaScript, les types primitifs repr\u00e9sentent les valeurs immuables. Les types primitifs incluent <code>string<\/code>, <code>number<\/code>, <code>boolean<\/code>, <code>null<\/code>, <code>undefined<\/code>, <code>symbol<\/code>, et <code>bigint<\/code>. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Types primitifs\nlet name = \"Alice\"; \/\/ string\nlet age = 25; \/\/ number\nlet isStudent = true; \/\/ boolean\nlet score = null; \/\/ null\nlet notAssigned; \/\/ undefined\nlet id = Symbol(\"id\"); \/\/ symbol\nlet bigNumber = 1234567890123456789012345678901234567890n; \/\/ bigint\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce qu&rsquo;un Type par R\u00e9f\u00e9rence ?<\/h3>\n\n\n\n<p>Les types par r\u00e9f\u00e9rence en JavaScript incluent les objets, les tableaux et les fonctions. Contrairement aux types primitifs, les types par r\u00e9f\u00e9rence sont mutables, ce qui signifie que leur contenu peut \u00eatre modifi\u00e9 sans changer leur r\u00e9f\u00e9rence en m\u00e9moire. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Types par r\u00e9f\u00e9rence\nlet user = {name: \"Alice\", age: 25 }; \/\/ objet\nlet scores = [80, 90, 100]; \/\/ tableau\nlet greet = function() { console.log(\"Hello, World!\"); }; \/\/ fonction\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Principales entre Types Primitifs et Types par R\u00e9f\u00e9rence<\/h3>\n\n\n\n<p>La diff\u00e9rence principale entre les types primitifs et les types par r\u00e9f\u00e9rence r\u00e9side dans la mani\u00e8re dont ils sont stock\u00e9s et manipul\u00e9s en m\u00e9moire.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Stockage en M\u00e9moire<\/h4>\n\n\n\n<p>Les valeurs primitives sont stock\u00e9es dans la pile m\u00e9moire, ce qui signifie que chaque variable contient directement la valeur assign\u00e9e. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let a = 5;\nlet b = a; \/\/ b est une copie de a\n\nb = 10; \/\/ Changer b ne modifie pas a\nconsole.log(a); \/\/ 5\nconsole.log(b); \/\/ 10\n<\/code><\/pre>\n\n\n\n<p>Les valeurs de r\u00e9f\u00e9rence, en revanche, sont stock\u00e9es dans le tas m\u00e9moire. Les variables ne contiennent qu&rsquo;une r\u00e9f\u00e9rence (un pointeur) vers l&#8217;emplacement o\u00f9 l&rsquo;objet est stock\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let obj1 = { greeting: \"Hello\" };\nlet obj2 = obj1; \/\/ obj2 est une r\u00e9f\u00e9rence \u00e0 obj1\n\nobj2.greeting = \"Hi\"; \/\/ Changer obj2 modifie aussi obj1\nconsole.log(obj1.greeting); \/\/ Hi\nconsole.log(obj2.greeting); \/\/ Hi\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Types Primitifs et R\u00e9f\u00e9rence en React<\/h3>\n\n\n\n<p>Dans React, l&rsquo;utilisation des types primitifs et des types par r\u00e9f\u00e9rence peut avoir un impact important sur la performance et le comportement de vos composants. La gestion de l&rsquo;\u00e9tat (state) est un aspect cl\u00e9 ici.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple de Types Primitifs dans l&rsquo;\u00c9tat<\/h4>\n\n\n\n<p>Lors de la mise \u00e0 jour de l&rsquo;\u00e9tat pour un type primitif, la variable d&rsquo;\u00e9tat est directement remplac\u00e9e par la nouvelle valeur. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\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)}>\n        Cliquez-moi\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple de Types par R\u00e9f\u00e9rence dans l&rsquo;\u00c9tat<\/h4>\n\n\n\n<p>Lorsqu&rsquo;il s&rsquo;agit de types par r\u00e9f\u00e9rence, il est essentiel de cr\u00e9er de nouvelles copies de l&rsquo;objet pour garantir que React d\u00e9tecte les changements d&rsquo;\u00e9tat. Voici un exemple avec un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([\"Learn JavaScript\", \"Learn React\"]);\n\n  const addTodo = (newTodo) => {\n    setTodos([...todos, newTodo]);\n  };\n\n  return (\n    <div>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>{todo}<\/li>\n        ))}\n      <\/ul>\n      <button onClick={() => addTodo(\"Learn TypeScript\")}>\n        Ajouter To-Do\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi les Types par R\u00e9f\u00e9rence sont Cruciaux en React<\/h3>\n\n\n\n<p>R\u00e9agir correctement aux modifications dans les types par r\u00e9f\u00e9rence est crucial en React pour plusieurs raisons :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Les composants fonctionnels sont souvent re-rendus uniquement lorsque l&rsquo;\u00e9tat (ou les props) change. Si l&rsquo;\u00e9tat contient un type par r\u00e9f\u00e9rence, une mise \u00e0 jour directe ne sera pas d\u00e9tect\u00e9e.<\/li>\n<li>Les immutables garantissent que les donn\u00e9es ne peuvent pas \u00eatre modifi\u00e9es directement, ce qui am\u00e9liore la pr\u00e9visibilit\u00e9 et le d\u00e9bogage.<\/li>\n<li>Les techniques telles que le clonage profond et les structures persistantes peuvent \u00eatre utilis\u00e9es pour g\u00e9rer efficacement les types par r\u00e9f\u00e9rence.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser Immer pour G\u00e9rer l&rsquo;\u00c9tat Immuable<\/h4>\n\n\n\n<p>Une biblioth\u00e8que populaire, <a href=\"https:\/\/immerjs.github.io\/immer\/\" target=\"_blank\" rel=\"noopener\">Immer<\/a>, permet de travailler avec des structures de donn\u00e9es immuables de mani\u00e8re simple et concise. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport produce from 'immer';\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([\"Learn JavaScript\", \"Learn React\"]);\n\n  const addTodo = (newTodo) => {\n    setTodos(produce(todos, draft => {\n      draft.push(newTodo);\n    }));\n  };\n\n  return (\n    <div>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>{todo}<\/li>\n        ))}\n      <\/ul>\n      <button onClick={() => addTodo(\"Learn TypeScript\")}>\n        Ajouter To-Do\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<p>En utilisant des outils comme Immer, vous pouvez g\u00e9rer des structures de donn\u00e9es complexes tout en maintenant l&rsquo;immutabilit\u00e9, facilitant ainsi les mises \u00e0 jour d&rsquo;\u00e9tat en React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Les <strong>types primitifs et les types par r\u00e9f\u00e9rence en JavaScript<\/strong> jouent un r\u00f4le crucial dans le d\u00e9veloppement avec React. En comprenant comment ces types se comportent et en appliquant les bonnes pratiques pour g\u00e9rer l&rsquo;\u00e9tat, vous pouvez \u00e9crire du code React plus robuste et performant. N&rsquo;h\u00e9sitez pas \u00e0 explorer des outils comme <a href=\"https:\/\/immerjs.github.io\/immer\/\" target=\"_blank\" rel=\"noopener\">Immer<\/a> pour faciliter la gestion de l&rsquo;\u00e9tat immuable dans vos applications React. Pour plus de formations et d&rsquo;informations sur le d\u00e9veloppement avec React, consultez notre cours sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de sites interactifs avec React et Redux<\/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","protected":false},"excerpt":{"rendered":"<p>Types Primitifs et Types par R\u00e9f\u00e9rence en JavaScript React jouent un r\u00f4le crucial dans la gestion de l&rsquo;\u00e9tat et des donn\u00e9es au sein d&rsquo;applications JavaScript&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5908","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\/5908","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=5908"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5908\/revisions"}],"predecessor-version":[{"id":5909,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5908\/revisions\/5909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3276"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}