{"id":5896,"date":"2024-09-05T10:14:13","date_gmt":"2024-09-05T10:14:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\/"},"modified":"2024-09-05T10:14:17","modified_gmt":"2024-09-05T10:14:17","slug":"utiliser-fonctions-flechees-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\/","title":{"rendered":"2.3 Utiliser les Fonctions Fl\u00e9ch\u00e9es en JavaScript pour React"},"content":{"rendered":"\n<p><strong>Utiliser les Fonctions Fl\u00e9ch\u00e9es en JavaScript pour React<\/strong> est une comp\u00e9tence essentielle pour moderniser et simplifier votre code React. Comprendre comment et quand utiliser les <strong>fonctions fl\u00e9ch\u00e9es<\/strong> peut non seulement rendre votre code plus lisible, mais aussi r\u00e9soudre certains probl\u00e8mes li\u00e9s au contexte de `this`. Explorons ces concepts avec des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions Fl\u00e9ch\u00e9es 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\/706050098?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>fonctions fl\u00e9ch\u00e9es en JavaScript<\/strong> sont une syntaxe moderne introduite avec ES6 (ECMAScript 2015) qui permet de cr\u00e9er des fonctions de mani\u00e8re concise. Elles offrent plusieurs avantages, notamment une syntaxe plus courte et une gestion plus intuitive du contexte <code>this<\/code>. Voici la syntaxe de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction traditionnelle\nfunction hello() {\n    console.log(\"Hello, world!\");\n}\n\n\/\/ Fonction fl\u00e9ch\u00e9e\nconst hello = () => {\n    console.log(\"Hello, world!\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Avantages des Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>La principale diff\u00e9rence entre les fonctions fl\u00e9ch\u00e9es et les fonctions traditionnelles est la gestion du contexte <code>this<\/code>. Lorsque vous utilisez une fonction fl\u00e9ch\u00e9e, le <code>this<\/code> conserve sa valeur du contexte lexical dans lequel la fonction a \u00e9t\u00e9 d\u00e9finie. Cela \u00e9limine le besoin de lier manuellement <code>this<\/code> dans les constructeurs de classes React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Fonctions Fl\u00e9ch\u00e9es dans les Composants React<\/h3>\n\n\n\n<p>Les <strong>fonctions fl\u00e9ch\u00e9es<\/strong> sont particuli\u00e8rement utiles dans les composants React, notamment pour la d\u00e9finition de m\u00e9thodes et la gestion des \u00e9v\u00e9nements. Voyons comment les utiliser efficacement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements<\/h4>\n\n\n\n<p>Dans les composants de classe, les fonctions fl\u00e9ch\u00e9es peuvent \u00eatre utilis\u00e9es pour \u00e9viter de lier <code>this<\/code> manuellement. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { count: 0 };\n\n        \/\/ Liaison manuelle (non n\u00e9cessaire avec les fonctions fl\u00e9ch\u00e9es)\n        this.handleClick = this.handleClick.bind(this);\n    }\n\n    handleClick() {\n        console.log(this.state.count);\n    }\n\n    render() {\n        return <button onClick={this.handleClick}>Click Me<\/button>;\n    }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<p>Avec les fonctions fl\u00e9ch\u00e9es, il n&rsquo;est plus n\u00e9cessaire de lier <code>this<\/code> dans le constructeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { count: 0 };\n    }\n\n    \/\/ Utilisation d'une fonction fl\u00e9ch\u00e9e\n    handleClick = () => {\n        console.log(this.state.count);\n    }\n\n    render() {\n        return <button onClick={this.handleClick}>Click Me<\/button>;\n    }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Les Fonctions Fl\u00e9ch\u00e9es dans les Composants Fonctionnels<\/h4>\n\n\n\n<p>Dans les composants fonctionnels, les <strong>fonctions fl\u00e9ch\u00e9es<\/strong> peuvent \u00eatre utilis\u00e9es directement pour d\u00e9finir des fonctions d&rsquo;\u00e9v\u00e9nements, rendant le code encore plus concis :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nconst MyComponent = () => {\n    const [count, setCount] = useState(0);\n\n    const handleClick = () => {\n        console.log(count);\n    };\n\n    return (\n        <button onClick={handleClick}>\n            Click Me\n        <\/button>\n    );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Passer des Arguments<\/h4>\n\n\n\n<p>Les <strong>fonctions fl\u00e9ch\u00e9es<\/strong> peuvent \u00e9galement \u00eatre utilis\u00e9es pour passer des arguments dans les gestionnaires d&rsquo;\u00e9v\u00e9nements :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { count: 0 };\n    }\n\n    handleClick = (increment) => {\n        this.setState(prevState => ({ count: prevState.count + increment }));\n    }\n\n    render() {\n        return (\n            <button onClick={() => this.handleClick(1)}>\n                Increment\n            <\/button>\n        );\n    }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser les Fonctions Fl\u00e9ch\u00e9es pour les M\u00e9thodes de Cycle de Vie<\/h4>\n\n\n\n<p>Les <strong>fonctions fl\u00e9ch\u00e9es<\/strong> peuvent aider \u00e0 simplifier le code des m\u00e9thodes de cycle de vie des composants React. Par exemple, pour ex\u00e9cuter une action au montage, vous pouvez utiliser une fonction fl\u00e9ch\u00e9e directement dans <code>componentDidMount<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.Component {\n    componentDidMount = () => {\n        \/\/ Logique apr\u00e8s le montage du composant\n        console.log(\"Component mounted!\");\n    }\n\n    render() {\n        return <div>My Component<\/div>;\n    }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s des Fonctions Fl\u00e9ch\u00e9es en React<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser les Fonctions Fl\u00e9ch\u00e9es avec les Hooks<\/h4>\n\n\n\n<p>Les hooks de React sont une mani\u00e8re moderne de g\u00e9rer l&rsquo;\u00e9tat et les effets dans les composants fonctionnels. Les fonctions fl\u00e9ch\u00e9es peuvent \u00eatre combin\u00e9es avec les hooks pour des d\u00e9clarations encore plus simples et lisibles :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\n\nconst MyComponent = () => {\n    const [count, setCount] = useState(0);\n\n    useEffect(() => {\n        console.log(`Component mounted! Count is: ${count}`);\n    }, [count]); \/\/ Ne s'ex\u00e9cutera que quand `count` change\n\n    const increment = () => {\n        setCount(prevCount => prevCount + 1);\n    };\n\n    return (\n        <button onClick={increment}>\n            Increment\n        <\/button>\n    );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es et Performances<\/h4>\n\n\n\n<p>Tandis que les fonctions fl\u00e9ch\u00e9es simplifient la syntaxe, elles peuvent parfois introduire des probl\u00e8mes de performance, notamment dans les situations o\u00f9 des fonctions sont recr\u00e9\u00e9es fr\u00e9quemment, comme dans les rendus de composants. Utilisez en combinaison avec <code>useCallback<\/code> pour optimiser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useCallback } from 'react';\n\nconst MyComponent = () => {\n    const [count, setCount] = useState(0);\n\n    const increment = useCallback(() => {\n        setCount(prevCount => prevCount + 1);\n    }, []); \/\/ La fonction est m\u00e9moris\u00e9e et ne changera pas entre les rendus\n\n    return (\n        <button onClick={increment}>\n            Increment\n        <\/button>\n    );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>fonctions fl\u00e9ch\u00e9es en JavaScript<\/strong> apportent une syntaxe concise et une gestion intuitive du contexte <code>this<\/code>, ce qui les rend particuli\u00e8rement utiles dans les applications React. Que vous travailliez avec des composants de classe ou des composants fonctionnels modernes, les fonctions fl\u00e9ch\u00e9es peuvent simplifier votre code et r\u00e9soudre facilement certains probl\u00e8mes courants. N&rsquo;oubliez pas de consid\u00e9rer les implications en termes de performance et d&rsquo;optimiser en cons\u00e9quence.<\/p>\n\n\n<p>Pour en savoir plus sur les diff\u00e9rences entre les composants de classe et les composants fonctionnels dans React, vous pourriez \u00eatre int\u00e9ress\u00e9 par la lecture de cet <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">article<\/a>. De plus, les hooks jouent un r\u00f4le crucial dans la gestion de l&rsquo;\u00e9tat dans React. D\u00e9couvrez-en plus avec ce guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">hooks<\/a> de React. Par ailleurs, comprendre le cycle de vie d&rsquo;une application React est essentiel pour une gestion efficace des composants. Explorez cet <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">article sur le cycle de vie de React<\/a>. Pour ceux qui sont int\u00e9ress\u00e9s par de bonnes pratiques en d\u00e9veloppement React, notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">extensions indispensables pour d\u00e9velopper avec React<\/a> est une ressource inestimable. Enfin, pour une introduction plus compl\u00e8te \u00e0 React, lisez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\">l&rsquo;introduction \u00e0 React<\/a>.<\/p>\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 React et Redux\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Utiliser les Fonctions Fl\u00e9ch\u00e9es en JavaScript pour React est une comp\u00e9tence essentielle pour moderniser et simplifier votre code React. Comprendre comment et quand utiliser les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5896","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\/5896","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=5896"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5896\/revisions"}],"predecessor-version":[{"id":5897,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5896\/revisions\/5897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3280"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}