


Concepts JavaScript essentiels à apprendre avant de commencer React
Dec 10, 2024 am 05:34 AMReact est une bibliothèque Javascript populaire utilisée pour créer des applications du monde réel. Pour devenir un développeur React compétent, il est important de comprendre certains concepts fondamentaux de Javascript. Pour beaucoup, apprendre React peut sembler difficile, mais comprendre ces concepts de base pourrait faciliter le processus d'apprentissage.
Dans cet article, je couvrirai 15 concepts essentiels que tout développeur devrait conna?tre avant de démarrer React. Chaque concept est expliqué avec un exemple pour montrer son importance.
Si vous débutez avec React ou si vous êtes sur le point d'explorer la bibliothèque, cet article est fait pour vous.
15 concepts JavaScript essentiels
1.Fonction de rappel
Les fonctions sont les éléments constitutifs de tout programme qui permettent d'appeler le code plusieurs fois sans répétition.
Un type de fonction est la Fonction de rappel.
Si vous souhaitez qu'un utilisateur clique sur une flèche dans le navigateur avant qu'une information ne soit affichée ou si vous souhaitez que certains codes soient exécutés juste après avoir récupéré les données de l'API, vous pouvez utiliser la puissance des rappels.
La fonction de rappel effectue sa tache après qu'une fonction ou un événement se produit et permet de contr?ler l'exécution d'une fonction.
C'est une fonction passée en argument à une autre fonction et utilisée pour spécifier ce qui doit se produire après la fin d'une opération asynchrone ou d'un événement.
Exemple
// The callback function function showText() { console.log('The written text should show after 2 seconds.'); } function showAfterDelay(callback, delay) { setTimeout(callback, delay); } showAfterDelay(showText, 2000);
2.Fonctions fléchées
Les fonctions fléchées ont été introduites dans ES6 et permettent d'écrire la syntaxe des fonctions de manière plus concise. La fonction flèche est largement utilisée dans React en raison de sa concision.
Exemple
const showText = () => { console.log('This written text should show after 2 seconds.'); }; const showAfterDelay = (callback, delay) => { setTimeout(callback, delay); }; showAfterDelay(showText, 2000);
3.Méthode Array.Map()
La mutation du tableau existant est généralement déconseillée dans React car elle pourrait entra?ner des bugs inutiles et des problèmes de performances. Pour cette raison, les développeurs utilisent les méthodes array. Les méthodes de tableau fonctionnel ne modifient pas le tableau d'origine mais renvoient plut?t un nouveau tableau à partir de celui existant.
L'une des méthodes de tableau fonctionnel est la méthode Array.map().
Les méthodes Array.map() bouclent sur un tableau existant et renvoient un nouveau tableau de même longueur. Des modifications peuvent être apportées au nouveau tableau sans avoir aucun effet sur celui existant.
Exemple
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
4.Méthode Array.Filter()
La méthode Array.filter() fonctionne de manière intéressante et logique. Ces méthodes peuvent être utilisées pour filtrer certains éléments du tableau en fonction d'une condition vraie ou fausse.
Lorsqu'une déclaration est fausse, elle est automatiquement filtrée et lorsqu'elle est vraie, elle la conserve, ce qui en fait une approche appropriée pour supprimer les éléments indésirables d'un tableau.
Exemple
// The callback function function showText() { console.log('The written text should show after 2 seconds.'); } function showAfterDelay(callback, delay) { setTimeout(callback, delay); } showAfterDelay(showText, 2000);
5.Méthode Array.reduce()
Comme son nom l'indique, la méthode array.reduce() réduit un tableau entier à une seule valeur. C'est l'une des meilleures méthodes pour additionner ou regrouper des éléments d'un tableau.
3 mots clés importants dans la méthode de réduction
- La valeur initiale (facultatif)?: Une valeur de départ pour l'accumulateur. S'il n'est pas fourni, le premier élément du tableau est utilisé comme valeur initiale et l'itération commence à partir du deuxième élément.
- Accumulateur (obligatoire)?:Le résultat accumulé des itérations précédentes.
- Valeur actuelle (obligatoire)?:?l'élément actuel en cours de traitement.
Exemple
const showText = () => { console.log('This written text should show after 2 seconds.'); }; const showAfterDelay = (callback, delay) => { setTimeout(callback, delay); }; showAfterDelay(showText, 2000);
6.Modèles littéraux
Les Les littéraux de modèle permettent aux cha?nes de contenir des variables Javascript ou toute expression JavaScript.
Il fournit une approche simple pour créer des cha?nes en JavaScript en utilisant les backticks et le dollar avec des accolades ${}.
Exemple
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
7.Opérateurs ternaires
Les opérateurs ternaires sont des opérateurs conditionnels qui offrent un moyen simple et concis d'écrire une instruction if..else.
React ne prend pas directement en charge l'instruction if..else car elle ne convient pas à l'expression syntaxique connue sous le nom de JSX qui existe dans React.
JSX est une extension de syntaxe de JavaScript qui permet l'intégration de Javascript, CSS et React Component dans HTML.
La syntaxe React est considérée plus comme une expression que comme une instruction et le ternaire lui sert d'opérateur approprié.
Exemple
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
8.Opérateurs de court-circuit et logiques
Les Opérateurs logiques sont utilisés pour combiner plusieurs conditions en une seule expression. Les principaux opérateurs logiques qui existent en JavaScript sont?:
- AND- renvoie vrai uniquement si les deux opérandes sont vrais.
- OR- renvoie vrai si au moins un opérande est vrai.
- NON- inverser les vraies valeurs de son opérande..
Le court-circuit est un comportement qui se produit dans les opérateurs logiques où, dans des conditions spécifiques, le deuxième opérande n'est pas évalué car le résultat de l'expression entière peut être déterminé uniquement par le premier opérande.
Comment fonctionne le court-circuit
ET (&&)
- si le premier opérande est faux, l'expression entière est fausse, donc le deuxième opérande n'est pas évalué.
- Si le premier opérande est vrai, le deuxième opérande est évalué pour déterminer la valeur qui sera renvoyée.
OU (||)
- Si le premier opérande est vrai, l'expression entière est vraie, donc le deuxième opérande n'est pas évalué.
- si l'opérande est faux, le deuxième opérande est évalué pour déterminer la valeur à renvoyer.
// The callback function function showText() { console.log('The written text should show after 2 seconds.'); } function showAfterDelay(callback, delay) { setTimeout(callback, delay); } showAfterDelay(showText, 2000);
9.Opérateur RestSpread
Dans les cas où vous souhaitez ajouter une nouvelle propriété à un tableau existant ou fusionner un groupe de tableaux existants, l'opérateur de propagation est l'opérateur incontournable.
L'Spread Operator (...) indiqué par 3 points développe un tableau en éléments individuels et est utilisé au début d'un tableau. Il est utilisé pour?:
- Fusionner le tableau
const showText = () => { console.log('This written text should show after 2 seconds.'); }; const showAfterDelay = (callback, delay) => { setTimeout(callback, delay); }; showAfterDelay(showText, 2000);
- Copier le tableau
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
- ajouter une nouvelle propriété à un tableau existant
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
- passer un argument à une fonction
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
Rest Operator(...) est également noté par les 3 points mais écrit à la fin d'un tableau. Il est utilisé pour collecter plusieurs propriétés à partir d'un objet/tableau déstructuré.
Exemple
Const NameValue = "Ade"; const NumValue = 5; const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `
10.Cha?nage optionnel
Le cha?nage facultatif gère facilement les valeurs nulles ou non définies. Il est utilisé pour accéder aux propriétés ou à toute propriété intermédiaire qui semble nulle ou non définie dans la cha?ne. Il sera automatiquement court-circuité et rendu indéfini. Idéalement, sans cha?nage facultatif, il renvoie une erreur.
Dans certains cas, vous n'êtes pas s?r que toutes les valeurs existent dans un objet, envisagez d'utiliser le cha?nage facultatif car il s'agit d'une syntaxe qui permet de vérifier les valeurs nulles et non définies.
const BookNumbers = 4; const result = (BookNumbers % 2 === 0) ? "Even" : "Odd"; console.log(result); // Output: "Even"
11.Tableau de déstructuration
Les codes peuvent devenir fastidieux lorsque plusieurs propriétés doivent être appelées simultanément à partir d'un tableau. Avec la déstructuration, cela peut être évité.
La déstructuration permet d'assembler les valeurs d'un tableau en une variable distincte.
La déstructuration peut être utilisée pour
- Passer un élément
- éléments de nidification
- Définissez les valeurs par défaut.
Un concept essentiel à ne pas ignorer avant de démarrer React est la déstructuration.
const idVerify = true; const displayMessage = idVerify && "Identified"; console.log(displayMessage); // Output: "Identified"
12.Travailler avec des tableaux immuables
Les tableaux peuvent être mutés en JavaScript, ce qui signifie que les propriétés peuvent être ajoutées, supprimées ou mises à jour dans un tableau.
Cependant, dans React, l'immuabilité est souvent préférée pour préserver l'intégrité de l'état et garantir que React puisse détecter les changements. Pour travailler avec des tableaux immuables dans React, des méthodes telles que map, filter et l'opérateur spread sont couramment utilisées pour ajouter, supprimer et mettre à jour des éléments dans des tableaux sans muter le tableau d'origine.
Exemple
- Ajout d'un élément
// The callback function function showText() { console.log('The written text should show after 2 seconds.'); } function showAfterDelay(callback, delay) { setTimeout(callback, delay); } showAfterDelay(showText, 2000);
- Pour supprimer un élément
const showText = () => { console.log('This written text should show after 2 seconds.'); }; const showAfterDelay = (callback, delay) => { setTimeout(callback, delay); }; showAfterDelay(showText, 2000);
- Pour mettre à jour un élément
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
13.Fonction asynchrone/attente
Le JavaScript asynchrone régit la fa?on dont les taches qui prennent du temps sont exécutées. JavaScript est un langage synchrone, c'est-à-dire qu'il exécute un code l'un après l'autre dans un seul thread.
Dans les cas où vous récupérez des données à partir d'une base de données, certains codes peuvent devoir être chargés avant que la récupération ne soit terminée.
Avec la fonction asynchrone, le code peut être exécuté sans attendre la fin des opérations, améliorant ainsi l'expérience utilisateur et les performances globales.
Dans React, vous travaillerez fréquemment avec l'interface de programmation d'application (API), il est donc important d'avoir un aper?u du fonctionnement de cette fonction.
Exemple
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
14.Promesses
Les promesses font référence à un objet intégré qui représente l'achèvement ou l'échec éventuel d'une opération asynchrone.
Des promesses existent dans l'un des trois états?:
- En attente?: état initial, ni réalisé ni rejeté.
- Réalisé?: opération terminée avec succès
- Rejeté?: l'opération a rencontré une erreur.
Les promesses jouent un r?le important dans JavaScript, ce qui en fait un concept important à conna?tre. Il vous permet d'écrire du code plus propre, de gérer systématiquement les erreurs et d'améliorer les performances globales.
15.Gestion des erreurs à l'aide de try.catch.finally
Il y a des moments où des erreurs apparaissent lors de la récupération des données, vous laissant réfléchir à la fa?on de trouver ou de corriger ces bugs.
Avec l'utilisation de mots-clés, la récupération des données est gérée de manière plus structurée.
Le bloc Try..catch..finally est une puissante construction de gestion des erreurs en JavaScript, qui permet de gérer avec succès les erreurs potentielles et d'exécuter des codes spécifiques, qu'une erreur se produise ou non.
La recherche de certaines erreurs dans votre code peut prendre beaucoup de temps. En utilisant ces blocs, cela devient facile.
- Try?-?Entoure le code qui pourrait générer une erreur.
- Catch- exécuter si une erreur est générée dans le bloc try. Re?oit les objets d'erreur comme argument.
- Enfin - Exécuter, qu'une erreur se produise ou non.
Exemple
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
Conclusion
Obtenir un aper?u des concepts JavaScript essentiels expliqués ci-dessus facilitera le processus d'apprentissage et vous guidera pour devenir un développeur React compétent. Si vous n'avez pas encore appris ces concepts, faites un effort pour le faire. N'hésitez pas à partager vos suggestions dans la section commentaires !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple

Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.

Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle

La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)

Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.

La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.

Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.

Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.
