Dans ce cours, nous aborderons la structure, les crochets et les fonctions du cycle de vie des composants fonctionnels, ainsi que l'utilisation des…
Dans ce cours, nous aborderons la structure, les crochets et les fonctions du cycle de vie des composants fonctionnels, ainsi que l'utilisation des crochets les plus couramment utilisés tels que useEffect, useState, useCallback et useMemo.
Les composants fonctionnels React sont un élément essentiel de toute application React.js. Ils permettent aux développeurs de créer des composants d'interface utilisateur réutilisables et sans état à l'aide d'une syntaxe basée sur les fonctions. Dans ces leçons, nous approfondirons la structure, les crochets et les fonctions du cycle de vie des composants fonctionnels, y compris la définition et l'utilisation des accessoires et la gestion de l'état à l'aide de crochets.
La structure des composants fonctionnels est différente de celle des composants de classe, car ils ne s’appuient pas sur une syntaxe basée sur les classes. Au lieu de cela, ils prennent les accessoires comme paramètre et renvoient JSX en sortie. Nous explorerons l'anatomie d'un composant fonctionnel, y compris comment définir et utiliser des accessoires, comment utiliser le crochet useState pour gérer l'état du composant et comment rendre JSX.
Les crochets sont un concept puissant dans les composants fonctionnels React, permettant aux développeurs d'ajouter un état et d'autres fonctionnalités aux composants basés sur des fonctions. Nous explorerons les crochets les plus couramment utilisés dans React, notamment useEffect, useState, useCallback et useMemo.
Objectifs de la formation
- Comprendre les composants fonctionnels de React
- Comprendre les crochets React
- Comprendre les accessoires React
Compétences acquises
Bibliothèques de composantsProgrammation fonctionnelleComposants HTMLReact JsxReactstrapReact.js (Bibliothèque Javascript)Ce que vous allez apprendre
- Comprendre la structure des composants fonctionnels React et en quoi ils diffèrent des composants de classe
- Définir et utiliser les props comme paramètres et renvoyer du JSX comme résultat
- Gérer l'état des composants à l'aide du hook useState
- Appliquer les hooks React couramment utilisés, notamment useEffect, useState, useCallback et useMemo
- Explorer les hooks et les fonctions de cycle de vie des composants fonctionnels
Points clés à retenir
- Les composants fonctionnels de React constituent une brique essentielle de toute application React.js, permettant aux développeurs de créer des composants d'interface utilisateur (UI) réutilisables et sans état (stateless) en utilisant une syntaxe basée sur les fonctions.
- Contrairement aux composants de classe, les composants fonctionnels ne s'appuient pas sur une syntaxe basée sur les classes ; ils prennent des props comme paramètres et retournent du JSX en tant que résultat.
- Les hooks permettent aux développeurs d'ajouter un état et d'autres fonctionnalités aux composants basés sur des fonctions.
- Les hooks les plus couramment utilisés et couverts sont useEffect, useState, useCallback et useMemo.
- Le cours couvre la définition et l'utilisation des props, la gestion de l'état avec le hook useState, et le rendu de JSX.
Foire aux questions
Que couvre ce cours ?
Le cours aborde la structure, les hooks et les fonctions de cycle de vie des composants fonctionnels React, y compris comment définir et utiliser les props, comment gérer l'état avec le hook useState, et comment utiliser des hooks couramment utilisés tels que useEffect, useState, useCallback et useMemo.
Quelles compétences vais-je acquérir grâce à ce cours ?
Vous acquerrez des compétences en bibliothèques de composants, programmation fonctionnelle, composants HTML, JSX React, Reactstrap et la bibliothèque JavaScript React.js.
En quoi les composants fonctionnels sont-ils différents des composants de classe ?
Les composants fonctionnels ne reposent pas sur une syntaxe basée sur les classes. Au lieu de cela, ils prennent des props (propriétés) en paramètre et retournent du JSX comme résultat.
Quels hooks sont couverts dans ce cours ?
Le cours explore les hooks les plus couramment utilisés dans React, y compris useEffect, useState, useCallback et useMemo.
Quels sont les objectifs d'apprentissage de ce cours ?
Les objectifs d'apprentissage sont de comprendre les composants fonctionnels React, les hooks React et les props React.
Transcription
Transcription
Bonjour, je m'appelle Tony, et je suis entré. Ces leçons, vous en apprendrez sur le fonctionnel. Composants, structure et crochets. Dans cette leçon, je vais vous montrer ce que sont les composants fonctionnels. Il n’y a pas si longtemps, les composants fonctionnels étaient considérés comme des composants inférieurs par rapport à leur classe contrepartie basée. Et c'est parce que les composants basés sur les classes étaient considérés comme complet. Ils avaient accès à des choses telles que l'État. Les composants conffonctionnels étaient considérés comme apatrides composants plus légers. Mais avec l'ajout récent de hooks tels que UseState et d'autres hooks tels que UseEffect, qui exposent davantage les fonctionnalités composants aux fonctions de cycle de vie qui autrement ne soient disponibles que pour leurs homologues basés sur la classe. Jetons un coup d'œil à un composant parent que nous utilisons afin pour rendre notre application. Maintenant, avant tout, nous pouvons voir. Que nous utilisons deux fonctions spéciales appelées UseState. Ils nous sont fournis par le groupe React et ils exposent un composant fonctionnel. Vers des fonctionnalités qui autrement ne seraient disponibles que pour son homologue basé sur les classes dans les versions précédentes de React. Donc, parce que nous utilisons une fonction usetate, cette fonction est spécial. C'est ce qu'on appelle un crochet. Certaines fonctions en découlent. Groupe React autre que React, et quand. Ils sont utilisés à l’intérieur d’une fonctionnelle. Composant auquel ils exposent ce composant fonctionnel. La même fonctionnalité qui autrement serait uniquement limité à son homologue basé sur la classe. Désormais, les composants fonctionnels sont censés être très souple. Vous pouvez voir que notre composant parent ne l'a pas fait. Recevez bien sûr tous les accessoires qui ont une raison. Mais par exemple, un composant inférieur ou enfant que nous utilisons à l'intérieur de notre composant parent, le composant app, reçoit quelques accessoires. Ce n'est pas nécessaire, mais c'est quelque chose de vraiment utile dans un composant fonctionnel. Depuis l'introduction des hooks, les composants basés sur les classes ont plus ou moins en voie de disparition dans l'écosystème React. Et si vous avez affaire à un. Framework de nature plus récente, vous pouvez voir cette classe les composants basés sur la technologie sont remplacés par des composants fonctionnels Composants. Cela a beaucoup à voir avec. La performance, avec la façon dont les choses sont hissées après un le bundle est construit. Nous n’entrerons pas dans tout cela maintenant. Mais disons simplement que les composants fonctionnels sont un équivalent plus moderne de leur homologue basé sur la classe. Même si les classes sont encore très présentes et sont utilisé, fonctionnel. Les composants sont désormais devenus plus importants en raison. À l'introduction récente des hooks par le groupe React. Dans notre prochaine leçon, nous allons examiner ce que que sont les hooks et quelles autres fonctions de cycle de vie nous pouvons avoir qui nous sont exposés grâce à l'utilisation de crochets. Merci d'avoir regardé.
Apprendre en déplacement
Apprenez partout — l'application KnowledgeCity vous permet de suivre les leçons en déplacement.