{"id":5940,"date":"2024-09-18T09:24:59","date_gmt":"2024-09-18T09:24:59","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\/"},"modified":"2024-09-18T09:25:04","modified_gmt":"2024-09-18T09:25:04","slug":"comprendre-cycle-vie-application-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\/","title":{"rendered":"4.1 Comprendre le Cycle de Vie d&rsquo;une Application React"},"content":{"rendered":"\n<p><strong>Comprendre le Cycle de Vie d&rsquo;une Application React<\/strong> est crucial pour cr\u00e9er des applications front-end dynamiques et performantes. Dans ce tutoriel, nous allons explorer les diff\u00e9rentes phases du cycle de vie d&rsquo;un composant React et comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Cycle de Vie d&rsquo;une Application 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\/706059233?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 React passent par un cycle de vie sp\u00e9cifique de leur cr\u00e9ation \u00e0 leur destruction. Ce cycle de vie se divise en trois phases principales : le montage, la mise \u00e0 jour, et le d\u00e9montage. Comprendre et ma\u00eetriser ces phases est essentiel pour optimiser les performances et le comportement de vos applications React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Phase de Montage<\/h3>\n\n\n\n<p>La phase de montage d&rsquo;un composant React intervient lorsque ce dernier est cr\u00e9\u00e9 et ins\u00e9r\u00e9 dans le DOM. Deux m\u00e9thodes principales sont appel\u00e9es lors de cette phase : <code>constructor<\/code> et <code>componentDidMount<\/code>. Vous souhaitez en savoir plus ? Explorez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">Cr\u00e9er une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n    console.log('Composant mont\u00e9');\n  }\n\n  componentDidMount() {\n    console.log('Composant a \u00e9t\u00e9 ins\u00e9r\u00e9 dans le DOM');\n  }\n\n  render() {\n    return <div>Comptage: {this.state.count}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Phase de Mise \u00e0 Jour<\/h3>\n\n\n\n<p>La phase de mise \u00e0 jour se produit lorsque les \u00e9tats ou les props d&rsquo;un composant changent. Les m\u00e9thodes couramment utilis\u00e9es dans cette phase incluent <code>shouldComponentUpdate<\/code>, <code>componentDidUpdate<\/code>, et <code>render<\/code>. Pour mieux comprendre, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\">diff\u00e9rences entre props et state en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  shouldComponentUpdate(nextProps, nextState) {\n    console.log('D\u00e9terminer si le composant doit se mettre \u00e0 jour');\n    return true; \/\/ Par d\u00e9faut, le composant se met \u00e0 jour\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    console.log('Composant mis \u00e0 jour');\n  }\n\n  render() {\n    return <div>Comptage: {this.state.count}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Phase de D\u00e9montage<\/h3>\n\n\n\n<p>La phase de d\u00e9montage intervient lorsque le composant est retir\u00e9 du DOM. La m\u00e9thode principale ici est <code>componentWillUnmount<\/code>. Pour une compr\u00e9hension approfondie, d\u00e9couvrez notre guide sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/gerer-erreurs-requetes-firebase-axios-react\">utilisation des hooks avec Firebase et Axios<\/a> dans React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  componentWillUnmount() {\n    console.log('Composant va \u00eatre d\u00e9truit');\n  }\n\n  render() {\n    return <div>Comptage: {this.state.count}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser les Hooks pour G\u00e9rer le Cycle de Vie<\/h2>\n\n\n\n<p>Avec l&rsquo;introduction des Hooks dans React, on peut g\u00e9rer le cycle de vie des composants fonctionnels \u00e9galement. Les Hooks les plus utilis\u00e9s pour ce faire sont <code>useEffect<\/code> et <code>useState<\/code>. Si vous voulez en savoir plus sur les Hooks, explorez notre article sur le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">guide d&rsquo;Introduction aux React Hooks<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple avec <code>useEffect<\/code> et <code>useState<\/code><\/h3>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log('Composant mont\u00e9');   \/\/ \u00c9quivaut \u00e0 componentDidMount et componentDidUpdate\n    return () => {\n      console.log('Composant d\u00e9mont\u00e9'); \/\/ \u00c9quivaut \u00e0 componentWillUnmount\n    };\n  }, [count]); \/\/ Le tableau de d\u00e9pendances d\u00e9termine quand ex\u00e9cuter l'effet\n\n  return (\n    <div>\n      <p>Comptage: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n    <\/div>\n  );\n}\n\nexport default MyComponent;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Effets de Bord<\/h3>\n\n\n\n<p><code>useEffect<\/code> est aussi utilis\u00e9 pour g\u00e9rer les effets de bord dans les composants fonctionnels, tels que les requ\u00eates API ou la manipulation directe du DOM. Assurez-vous toujours de nettoyer les effets pour \u00e9viter les fuites de m\u00e9moire. Pour les meilleures pratiques, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\">\u00e9viter l&rsquo;actualisation inutile d&rsquo;un composant React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction FetchDataComponent() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    let isSubscribed = true;\n\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => {\n        if (isSubscribed) {\n          setData(data);\n        }\n      });\n\n    return () => (isSubscribed = false); \/\/ Nettoyage pour \u00e9viter les fuites de m\u00e9moire\n  }, []);\n\n  if (!data) {\n    return <div>Loading...<\/div>;\n  }\n\n  return (\n    <div>\n      <p>Data: {JSON.stringify(data)}<\/p>\n    <\/div>\n  );\n}\n\nexport default FetchDataComponent;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Comprendre le <strong>Cycle de Vie d&rsquo;une Application React<\/strong> est fondamental pour d\u00e9velopper des applications robustes et r\u00e9actives. Que vous utilisiez des classes ou des fonctions avec des Hooks, ma\u00eetriser les diff\u00e9rentes phases du cycle de vie vous permettra de g\u00e9rer avec pr\u00e9cision l&rsquo;\u00e9tat et les effets de vos composants, garantissant ainsi une exp\u00e9rience utilisateur fluide et performante. Pour aller plus loin, explorez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr\u00e9er-des-applications-avanc\u00e9es-avec-react\/151\">cours avanc\u00e9 sur React<\/a> ou d\u00e9couvrez <a href=\"https:\/\/wikiform.fr\/codespace\/optimiser-performances-react-tutoriel\">comment optimiser les performances de vos applications React<\/a>.<\/p>\n\n\n\n<p>N&rsquo;oubliez pas d&rsquo;explorer d&rsquo;autres sujets li\u00e9s \u00e0 React tels que <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">utiliser le state avec les React Hooks<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\">analyser les diff\u00e9rents \u00e9tats du cycle de vie en React<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">ma\u00eetriser les objets JavaScript pour d\u00e9velopper en React<\/a>. <\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d\u00e9veloppeur-react\/150\" 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\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\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>","protected":false},"excerpt":{"rendered":"<p>Comprendre le Cycle de Vie d&rsquo;une Application React est crucial pour cr\u00e9er des applications front-end dynamiques et performantes. Dans ce tutoriel, nous allons explorer les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5940","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\/5940","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=5940"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5940\/revisions"}],"predecessor-version":[{"id":5941,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5940\/revisions\/5941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3180"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}