{"id":5942,"date":"2024-09-19T09:24:56","date_gmt":"2024-09-19T09:24:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\/"},"modified":"2024-09-19T09:25:00","modified_gmt":"2024-09-19T09:25:00","slug":"analyse-differents-etats-cycle-vie-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\/","title":{"rendered":"4.2 Analyse des Diff\u00e9rents \u00c9tats du Cycle de Vie en React"},"content":{"rendered":"\n<p><strong>Les Diff\u00e9rents \u00c9tats du Cycle de Vie en React<\/strong> sont essentiels pour comprendre comment les composants de votre application interagissent et \u00e9voluent. Savoir manipuler ces \u00e9tats vous permettra de cr\u00e9er des applications React plus performantes et maintenables. D\u00e9couvrons ensemble les principales phases du cycle de vie d&rsquo;un composant React, illustr\u00e9es par des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9tats du Cycle de Vie 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\/706059286?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, le cycle de vie d&rsquo;un composant est divis\u00e9 en plusieurs \u00e9tapes cl\u00e9s, chacune avec ses propres m\u00e9thodes et \u00e9v\u00e9nements. Voici les principales phases et les m\u00e9thodes que vous pouvez utiliser pour interagir avec chaque phase.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Montage (Mounting)<\/h3>\n\n\n\n<p>Le processus de montage se produit lorsque le composant est cr\u00e9\u00e9 et ins\u00e9r\u00e9 dans le DOM. Voici les principales m\u00e9thodes appel\u00e9es durant cette phase :<\/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 = { value: 0 };\n    console.log('Constructor: Composant initialis\u00e9');\n  }\n\n  componentDidMount() {\n    console.log('ComponentDidMount: Composant mont\u00e9');\n  }\n\n  render() {\n    return <div>{this.state.value}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise \u00e0 Jour (Updating)<\/h3>\n\n\n\n<p>Cette phase intervient lorsque les props ou l&rsquo;\u00e9tat du composant changent. Voici les m\u00e9thodes cruciales \u00e0 conna\u00eetre :<\/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 = { value: 0 };\n  }\n\n  shouldComponentUpdate(nextProps, nextState) {\n    console.log('ShouldComponentUpdate: D\u00e9terminer si le composant doit se mettre \u00e0 jour');\n    return true;\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    console.log('ComponentDidUpdate: Composant mis \u00e0 jour');\n  }\n\n  render() {\n    return (\n      <div>\n        <button onClick={() => this.setState({ value: this.state.value + 1 })}>\n          Increment\n        <\/button>\n        <div>{this.state.value}<\/div>\n      <\/div>\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9montage (Unmounting)<\/h3>\n\n\n\n<p>Le d\u00e9montage se produit lorsque le composant est supprim\u00e9 du DOM. Pour nettoyer les ressources, la m\u00e9thode suivante est utile :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class MyComponent extends React.Component {\n  componentWillUnmount() {\n    console.log('ComponentWillUnmount: Composant d\u00e9mont\u00e9');\n  }\n\n  render() {\n    return <div>Mon Composant<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Erreurs (Error Handling)<\/h3>\n\n\n\n<p>Les erreurs survenant dans les composants peuvent \u00eatre g\u00e9r\u00e9es avec les m\u00e9thodes suivantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    console.log('GetDerivedStateFromError: Mise \u00e0 jour de l\\'\u00e9tat apr\u00e8s une erreur');\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    console.log('ComponentDidCatch: Capture de l\\'erreur', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <h1>Quelque chose s'est mal pass\u00e9.<\/h1>;\n    }\n    return this.props.children;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques et Avanc\u00e9s<\/h3>\n\n\n\n<p>Passons maintenant \u00e0 des exemples pratiques et avanc\u00e9s illustrant l&rsquo;utilisation des m\u00e9thodes de cycle de vie de React dans des cas concrets.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Chargement de Donn\u00e9es \u00e0 partir d&rsquo;une API<\/h4>\n\n\n\n<p>Utiliser les m\u00e9thodes de cycle de vie pour charger des donn\u00e9es \u00e0 partir d&rsquo;une API est une pratique courante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class DataFetcher extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { data: null, loading: true };\n  }\n\n  componentDidMount() {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => this.setState({ data, loading: false }));\n  }\n\n  render() {\n    const { loading, data } = this.state;\n    if (loading) return <div>Loading...<\/div>;\n    return <div>{JSON.stringify(data)}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Optimisation des Performances avec shouldComponentUpdate<\/h4>\n\n\n\n<p>Utiliser la m\u00e9thode <code>shouldComponentUpdate<\/code> pour \u00e9viter des re-rendus inutiles est essentiel pour des applications performantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class OptimizedComponent extends React.Component {\n  shouldComponentUpdate(nextProps, nextState) {\n    return nextProps.value !== this.props.value;\n  }\n\n  render() {\n    return <div>{this.props.value}<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Nettoyage des \u00c9couteurs d&rsquo;\u00c9v\u00e9nements<\/h4>\n\n\n\n<p>Le nettoyage des ressources comme les \u00e9couteurs d&rsquo;\u00e9v\u00e9nements lors du d\u00e9montage du composant est crucial pour \u00e9viter les fuites de m\u00e9moire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>class EventListenerComponent extends React.Component {\n  componentDidMount() {\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  handleResize = () => {\n    console.log('Window resized');\n  };\n\n  render() {\n    return <div>Listen for window resize events.<\/div>;\n  }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation des Hooks pour le Cycle de Vie avec les Fonctions<\/h4>\n\n\n\n<p>Avec les hooks, les composants fonctionnels peuvent aussi g\u00e9rer les \u00e9tapes du cycle de vie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction HookComponent() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log('Component mounted or updated');\n    return () => {\n      console.log('Component unmounted');\n    };\n  }, [count]);\n\n  return (\n    <div>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n      <div>{count}<\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p>Les hooks comme <code>useEffect<\/code> et <code>useState<\/code> permettent d&rsquo;impl\u00e9menter les m\u00eames logiques de cycle de vie de mani\u00e8re concise dans les composants fonctionnels. Pour aller plus loin, consultez notre article d\u00e9taill\u00e9 sur <a href=\"https:\/\/reactjs.org\/docs\/hooks-overview.html\" target=\"_blank\" rel=\"noopener\">les hooks en React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>diff\u00e9rents \u00e9tats du cycle de vie en React<\/strong> sont essentiels pour la gestion optimale de vos composants. La ma\u00eetrise de ces m\u00e9thodes vous permettra de cr\u00e9er des applications robustes et performantes. Pour approfondir votre compr\u00e9hension, poursuivez votre apprentissage avec des ressources compl\u00e9mentaires et des projets pratiques. Par exemple, explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">React<\/a> se compare \u00e0 d&rsquo;autres librairies, ou consultez des tutoriels pour <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">comprendre les diff\u00e9rences entre applications Single Page et Multi-Page<\/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\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-REDUX-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React et Redux Offre 50%\" title=\"\">\n<\/a>\n\n\n<p>Pour en savoir plus sur les outils et extensions indispensables au d\u00e9veloppement avec React, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">les extensions indispensables pour d\u00e9velopper en React<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir les nouveaut\u00e9s de <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a> applicables dans vos projets React, et approfondir le sujet des <a href=\"https:\/\/wikiform.fr\/codespace\/pourquoi-utiliser-let-const-javascript-react\" target=\"_blank\" rel=\"noopener\">d\u00e9clarations <code>let<\/code> et <code>const<\/code> en JavaScript<\/a>. Si vous souhaitez ma\u00eetriser des concepts plus avanc\u00e9s, des sujets tels que <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">le cycle de vie complet d&rsquo;une application React<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es en React<\/a> peuvent \u00eatre explor\u00e9s plus en d\u00e9tail.<\/p>","protected":false},"excerpt":{"rendered":"<p>Les Diff\u00e9rents \u00c9tats du Cycle de Vie en React sont essentiels pour comprendre comment les composants de votre application interagissent et \u00e9voluent. Savoir manipuler ces&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5942","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\/5942","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=5942"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5942\/revisions"}],"predecessor-version":[{"id":5943,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5942\/revisions\/5943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3168"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}