REACT HOCKS: Comment démarrer et construire le vôtre-js tutoriel-php.cn

REACT HOCKS: Comment démarrer et construire le vôtre

Les crochets ont pris d'assaut le monde React. Dans ce tutoriel, nous allons examiner ce que sont les crochets et comment vous les utilisez. Je vous présenterai certains crochets communs qui expédient avec React, tout en vous montrant comment rédiger le vôtre. Au moment où vous avez terminé, vous pourrez utiliser des crochets dans vos propres projets React.

Les plats clés

REACT HOCKS Simplify Component Logic: les crochets vous permettent d'utiliser l'état et d'autres fonctionnalités de réaction sans classes, ce qui rend votre code plus propre et plus facile à comprendre.
USESTATE et UTILISAGE EFFECT sont fondamentaux: «UseState» vous permet d'ajouter l'état aux composants fonctionnels, tandis que `UseEFFECT» gère les effets secondaires précédemment gérés dans des méthodes de cycle de vie comme `ComponentDidMount» et `ComponentDidupDate`.
Les crochets personnalisés améliorent la réutilisabilité: vous pouvez créer vos propres crochets pour extraire la logique des composants en fonctions réutilisables, ce qui rend votre base de code plus sèche (ne vous répétez pas).
Les crochets prennent en charge plusieurs états et effets: vous pouvez utiliser plusieurs instances «Usestate» et «UseEffecct» dans un seul composant pour gérer différents éléments d'état et divers effets.
> Les crochets tiers étendent la fonctionnalité: l'utilisation de crochets des bibliothèques tierces peut introduire efficacement des capacités supplémentaires, telles que la récupération de données avec `Axios-Hooks`.
Transition de la classe aux composants fonctionnels: l'introduction de crochets fournit une incitation puissante à refacter les composants basés sur la classe existants en fonctions fonctionnelles, en tirant une amélioration de la lisibilité et de la maintenabilité.

Que sont les crochets React?

REACT Les crochets sont des fonctions spéciales qui vous permettent de «connecter» les fonctionnalités de réaction dans les composants de la fonction. Par exemple, le crochet UseState vous permet d'ajouter l'état, tandis que Use Effect vous permet d'effectuer des effets secondaires. Auparavant, les effets secondaires ont été mis en œuvre à l'aide de méthodes de cycle de vie. Avec les crochets, ce n'est plus nécessaire.

Cela signifie que vous n'avez plus besoin de définir une classe lors de la construction d'un composant React. Il s'avère que l'architecture de classe utilisée dans React est la cause de nombreux défis auxquels les développeurs réagissent chaque jour. Nous nous retrouvons souvent à écrire de grands composants complexes difficiles à briser. Le code connexe est réparti sur plusieurs méthodes de cycle de vie, qui devient difficile à lire, à maintenir et à tester. De plus, nous devons faire face à ce mot clé lors de l'accès à l'état, aux accessoires et aux méthodes. Nous devons également lier des méthodes à cela pour nous assurer qu'ils sont accessibles dans le composant. Ensuite, nous avons le problème excessif du forage des accessoires - également connu sous le nom de Wrapper Hell - lorsqu'ils traitent des composants d'ordre supérieur.

En un mot, les crochets sont une fonctionnalité révolutionnaire qui simplifiera votre code, ce qui facilite la lecture, le maintien, le test de manière isolée et réutilisée dans vos projets. Cela ne vous prendra qu'une heure pour vous familiariser, mais cela vous fera réfléchir différemment sur la façon dont vous écrivez le code React.

React Hooks a été annoncé pour la première fois lors d'une conférence React qui s'est tenue en octobre 2018, et ils ont été officiellement mis à disposition dans React 16.8. La fonctionnalité est toujours en cours de développement; Il y a encore un certain nombre de fonctionnalités de la classe React qui sont migrées dans des crochets. La bonne nouvelle est que vous pouvez commencer à les utiliser maintenant. Vous pouvez toujours utiliser React Class Components si vous le souhaitez, mais je doute que vous voudrez après avoir lu ce guide d'introduction.

Si j'ai piqué votre curiosité, plongeons-nous et voyons quelques exemples pratiques.

Prérequis

Ce tutoriel est destiné aux personnes qui ont une compréhension de base de ce qu'est la réaction et de la façon dont il fonctionne. Si vous êtes un débutant React, veuillez consulter notre tutoriel de démarrage avec React avant de continuer ici.

Si vous souhaitez suivre les exemples, vous devriez avoir une application React déjà configurée. La façon la plus simple de le faire est avec l'outil Create React App. Pour l'utiliser, vous aurez installé le nœud et le NPM. Si vous ne l'avez pas fait, rendez-vous sur la page de téléchargement de Node.js et prenez la dernière version de votre système (NPM est livré avec un nœud). Alternativement, vous pouvez consulter notre tutoriel sur l'installation de nœud à l'aide d'un gestionnaire de version.

Avec le nœud installé, vous pouvez créer une nouvelle application React comme SO:

npx create-react-app myapp

Copier après la connexion

Cela créera un dossier MyApp. Changez dans ce dossier et démarrez le serveur de développement comme ainsi:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

Votre navigateur par défaut s'ouvrira et vous verrez votre nouvelle application React. Aux fins de ce tutoriel, vous pouvez travailler dans le composant de l'application, qui est situé sur src / app.js.

Vous pouvez également trouver le code de ce tutoriel sur GitHub, ainsi qu'une démo du code fini à la fin de ce tutoriel.

Le crochet USESTATE

Regardons maintenant un code. Le crochet UseState est probablement le crochet le plus courant qui expédie avec React. Comme son nom l'indique, il vous permet d'utiliser l'état dans un composant de fonction.

Considérons le composant de classe React suivante:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Copier après la connexion

Si vous suivez avec Créer une application React, remplacez simplement le contenu d'App.js par ce qui précède.

C'est à quoi ça ressemble:

REACT HOCKS: Comment démarrer et construire le vôtre

Donnez-vous une minute pour comprendre le code. Dans le constructeur, nous déclarons une propriété de nom sur notre objet d'état, ainsi que la liaison d'une fonction HandlenameChange à l'instance du composant. Nous avons ensuite un formulaire avec une entrée, dont la valeur est définie sur ce.state.name. La valeur maintenue dans ce.state.name est également sortie à la page sous forme de salutation.

Lorsqu'un utilisateur tape n'importe quoi dans le champ de saisie, la fonction HandlenameChange est appelée, qui met à jour l'état et par conséquent la salutation.

Maintenant, nous allons écrire une nouvelle version de ce code à l'aide du crochet UseState. Sa syntaxe ressemble à ceci:

npx create-react-app myapp

Copier après la connexion

Lorsque vous appelez la fonction UseState, il renvoie deux éléments:

État: le nom de votre état - comme this.state.name ou this.state.location.
SetState: une fonction pour définir une nouvelle valeur pour votre état. Similaire à ce.setState ({name: newValue}).

Le stade initial est la valeur par défaut que vous donnez à votre état nouvellement déclaré pendant la phase de déclaration de l'état. Maintenant que vous avez une idée de ce qu'est Usestate, mettons-le en action:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

Prenez note des différences entre cette version de fonction et la version de classe. Il est déjà beaucoup plus compact et plus facile à comprendre que la version de classe, mais ils font exactement la même chose. Passons en revue les différences:

L'ensemble du constructeur de classe a été remplacé par le crochet UseState, qui ne se compose que d'une seule ligne.
Étant donné que le crochet USESTATE sort les variables locales, vous n'avez plus besoin d'utiliser ce mot-clé pour référencer vos variables de fonction ou d'état. Honnêtement, c'est une douleur majeure pour la plupart des développeurs JavaScript, car il n'est pas toujours clair quand vous devez l'utiliser.
Le code JSX est désormais plus propre car vous pouvez référencer les valeurs de l'état local sans utiliser ce.state.

J'espère que vous êtes impressionné maintenant! Vous vous demandez peut-être quoi faire lorsque vous devez déclarer plusieurs valeurs d'état. La réponse est assez simple: appelez simplement un autre crochet UseState. Vous pouvez déclarer autant de fois que vous le souhaitez, à condition que vous ne compliciez pas votre composant.

Remarque: Lorsque vous utilisez des crochets React, assurez-vous de les déclarer en haut de votre composant et jamais à l'intérieur d'un conditionnel.

multiples hooks UseState

Mais que se passe-t-il si nous voulons déclarer plus d'une propriété en état? Aucun problème. Utilisez simplement plusieurs appels pour UseState.

Voici un exemple de composant avec plusieurs crochets UseState:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Copier après la connexion

assez simple, n'est-ce pas? Faire la même chose dans la version de la classe vous obligerait à utiliser encore plus le mot clé.

Maintenant, passons au prochain crochet de base.

Utiliser le crochet d'effet

La plupart des composants de réaction sont nécessaires pour effectuer une opération spécifique telle que la récupération des données, l'abonnement à un flux de données ou la modification manuelle du DOM. Ce type d'opérations est connu sous le nom d'effets secondaires.

Dans les composants basés sur la classe, nous mettons normalement notre code d'effets secondaires dans ComponentDidMount et ComponentDiDupDate. Ce sont des méthodes de cycle de vie qui nous permettent de déclencher la méthode de rendu au bon moment.

Voici un exemple simple:

npx create-react-app myapp

Copier après la connexion

Ce morceau de code définira le titre du document, en fonction de ce qui est maintenu dans l'état. Cependant, lorsque vous essayez d'apporter des modifications aux valeurs d'état via le formulaire, rien ne se passe. Pour résoudre ce problème, vous devez ajouter une autre méthode de cycle de vie:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

La mise à jour du formulaire devrait maintenant mettre à jour le titre du document également.

Voyons comment nous pouvons implémenter la même logique à l'aide du crochet USEEFECT. Mettez à jour le composant de fonction ci-dessus comme suit:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Copier après la connexion

Avec seulement ces quelques lignes de code, nous avons implémenté le travail de deux méthodes de cycle de vie dans une fonction simple.

REACT HOCKS: Comment démarrer et construire le vôtre

ajoutant du code de nettoyage

C'était un exemple simple. Cependant, il y a des cas où vous devez rédiger du code de nettoyage, tel que le désabonnement à partir d'un flux de données ou la non-inscription d'un écouteur d'événements. Voyons un exemple de la façon dont cela est normalement implémenté dans un composant de classe React:

<span>const [state, setState] = useState(initialState);
</span>

Copier après la connexion

Le code ci-dessus affichera la résolution actuelle de la fenêtre de votre navigateur. Redimensionner la fenêtre et vous devriez voir la mise à jour des numéros automatiquement. Si vous appuyez sur F11 dans Chrome, il devrait afficher la résolution complète de votre moniteur. Nous avons également utilisé le composant de la méthode du cycle de viewillunmount pour désinscrire l'événement de redimensionnement.

Réplivons le code basé sur la classe ci-dessus dans notre version de crochet. Nous devons définir un troisième crochet USSTATE et un deuxième crochet d'usage pour gérer cette nouvelle fonctionnalité:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Copier après la connexion

REACT HOCKS: Comment démarrer et construire le vôtre

étonnamment, cette version de crochet du code fait exactement la même chose. C'est plus propre et plus compact. L'avantage de mettre du code dans sa propre déclaration d'effet d'utilisation est que nous pouvons facilement le tester, car le code est isolément.

Avez-vous remarqué que nous renvoyons une fonction dans ce crochet Utilisation? En effet, toute fonction que vous retournez dans une fonction UseEffecte sera considérée comme le code pour le nettoyage. Si vous ne renvoyez pas de fonction, aucun nettoyage ne sera effectué. Dans ce cas, un nettoyage est requis, car vous rencontrerez autrement un message d'erreur enregistré à votre console de navigateur disant "ne peut pas effectuer une mise à jour de l'état React sur un composant non monté".

REACT CUSTOM REACT CORCES

Maintenant que vous avez appris sur les crochets UseState et utilisez des crochets, permettez-moi de vous montrer une façon vraiment cool de rendre votre code encore plus compact, plus propre et réutilisable que ce que nous avons réussi jusqu'à présent. Nous allons créer un Hook personnalisé pour simplifier encore plus notre code.

Nous allons le faire en extraitant la fonctionnalité de redimensionnement et en le plaçant en dehors de notre composant.

Créez une nouvelle fonction comme suit:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Copier après la connexion

Ensuite, dans le composant, vous devrez remplacer ce code:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Copier après la connexion

… avec ceci:

<span>componentDidUpdate() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Copier après la connexion

Supprimez le deuxième code d'usage. Enregistrez votre fichier et testez-le. Tout devrait fonctionner de la même manière qu'auparavant.

Maintenant que nous avons créé notre premier crochet personnalisé, faisons de même pour le titre du document. Tout d'abord, supprimez l'appel restant à utiliser Effectif à l'intérieur du composant. Ensuite, en dehors du composant, ajoutez le code suivant:

npx create-react-app myapp

Copier après la connexion

Enfin, appelez-le depuis le composant:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

Retournez à votre navigateur et entrez quelque chose dans les champs d'entrée. Le titre du document devrait changer comme avant.

Enfin, refactorons les champs de forme. Nous voulons créer un crochet pour maintenir leur valeur en synchronisation avec une valeur correspondante à l'état.

Commençons par le crochet personnalisé. Ajoutez ce qui suit en dehors du composant:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Copier après la connexion

puis mettez à jour le composant pour l'utiliser:

<span>const [state, setState] = useState(initialState);
</span>

Copier après la connexion

Parcourez lentement le code et identifiez toutes les modifications que nous avons apportées. Assez soigné, non? Notre composant est beaucoup plus compact.

Pour les fins de ce tutoriel, nous avons déclaré nos crochets en fonction du même fichier que le composant qui les utilise. Cependant, dans un projet React normal, vous auriez un dossier Hooks avec chacun de ces crochets dans un fichier séparé, qui pourrait ensuite être importé partout où il était nécessaire.

Nous pourrions même aller jusqu'à emballer les crochets UseFormInput, usageSocumentTitle et UsewindowResolution dans un module NPM externe, car ils sont complètement indépendants de la logique principale de notre code. Nous pouvons facilement réutiliser ces crochets personnalisés dans d'autres parties du projet, ou même d'autres projets à l'avenir.

Pour référence, voici la version complète du composant Hooks:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Copier après la connexion

Le composant du crochet doit rendre et se comporter exactement comme la version du composant de classe:

REACT HOCKS: Comment démarrer et construire le vôtre

Si vous comparez la version Hook avec la version du composant de classe, vous vous rendrez compte que la fonctionnalité de crochet réduit votre code de composant d'au moins 30%. Vous pouvez même réduire votre code davantage en exportant les fonctions réutilisables à une bibliothèque NPM.

Ensuite, regardons comment nous pouvons utiliser les crochets d'autres personnes dans notre code.

Récupérer les données à l'aide de crochets tiers

Regardons un exemple de la façon dont vous pouvez récupérer les données d'une API JSON REST à l'aide d'Axios et React Hooks. Si vous suivez à la maison, vous devrez installer la bibliothèque Axios:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Copier après la connexion

Changez votre composant pour ressembler à ceci:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Copier après la connexion

Nous devons nous attendre à la sortie suivante:

REACT HOCKS: Comment démarrer et construire le vôtre

Il est possible de refacter le code ci-dessus en construisant votre propre crochet personnalisé de manière à ce que nous n'avons plus besoin d'utiliser UseState et d'utiliser des crochets d'effet. Heureusement pour nous, de nombreux développeurs ont déjà réalisé cette quête et publié leur travail en tant que package que nous pouvons installer dans notre projet. Nous utiliserons Axios-Hooks de Simone Busoli, qui se trouve être le plus populaire.

Vous pouvez installer le package à l'aide de la commande:

npx create-react-app myapp

Copier après la connexion

ci-dessous, j'ai refactorisé le code ci-dessus en utilisant Axios-Hooks:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

Non seulement nous nous sommes débarrassés des crochets USESTATE et utilisez des crochets de notre code, mais nous avons également acquis trois nouvelles capacités sans aucune puissance supplémentaire de notre part:

pour afficher l'état de chargement
pour afficher les messages d'erreur
pour refaire des données à partir d'un clic d'un bouton

La leçon ici est d'éviter de réinventer la roue. Google est votre ami. Dans le monde JavaScript, il y a de fortes chances que quelqu'un ait déjà résolu le problème que vous essayez de résoudre.

démo

Vous trouverez ci-dessous une démo en direct de ce que nous avons accompli jusqu'à présent:

REACT OFFICIELS HOCKS

Ce sont les crochets de base que vous rencontrerez dans vos projets de réaction quotidiens:

UseState: pour gérer l'État local
Utiliser Effecte: remplace les fonctions du cycle de vie
useContext: vous permet de travailler facilement avec l'API de contexte React (résolution du problème de forage des accessoires)

Nous avons également des crochets de react officiels supplémentaires que vous devrez peut-être utiliser, selon les exigences de votre projet:

UserReducer: une version avancée d'Usestate pour gérer la logique d'état complexe. C'est assez similaire à Redux.
UseCallback: renvoie une fonction qui renvoie une valeur cacheable. Utile pour l'optimisation des performances si vous souhaitez éviter les redevateurs inutiles lorsque l'entrée n'a pas changé.
UseMemo: renvoie une valeur d'une fonction mémorisée. Similaire à calculé si vous connaissez Vue.
useRef: Renvoie un objet REF mutable qui persiste pour la durée de vie de la composante.
useImperativeHandle: personnalise la valeur d'instance exposée aux composants parents lors de l'utilisation de la réf.
USELAYOINFEFFECT: similaire à l'utilisation d'effet, mais se déclenche de manière synchrone après toutes les mutations DOM.
usedebugValue: affiche une étiquette pour les crochets personnalisés dans les outils de développeur React.

Vous pouvez tout lire sur ces crochets dans la documentation officielle de réaction.

Résumé

La communauté React a répondu positivement à la nouvelle fonctionnalité React Hooks. Il y a déjà un référentiel open source appelé Awesome-React-Hooks, et des centaines de crochets React personnalisés ont été soumis à ce référentiel. Voici un exemple rapide de l'un de ces crochets pour stocker les valeurs dans le stockage local:

npx create-react-app myapp

Copier après la connexion

Vous devrez installer le crochet de stockage local avec le NPM ou le fil comme celui-ci pour l'utiliser:

<span>cd myapp
</span><span>npm start
</span>

Copier après la connexion

assez soigné, non?

L'introduction de React Hooks a fait un grand éclaboussures. Ses vagues ont dépassé la communauté React dans le monde JavaScript. En effet, les crochets sont un nouveau concept qui peut bénéficier à l'ensemble de l'écosystème JavaScript. En fait, l'équipe Vue.js a récemment publié quelque chose de similaire appelé l'API de composition.

On parle également des crochets React et de l'API de contexte renversant Redux de son trône de gestion de l'État. De toute évidence, les crochets ont rendu le codage beaucoup plus simple et ont changé la façon dont nous rédigerons un nouveau code. Si vous êtes comme moi, vous avez probablement une grande envie de réécrire toutes vos classes de composants React et de les remplacer par des crochets de composants fonctionnels.

Notez que ce n'est pas vraiment nécessaire: l'équipe React ne prévoit pas de déprécier les composants de la classe React. Vous devez également être conscient que toutes les méthodes de cycle de vie des classes réagissent ne sont pas encore possibles avec les crochets. Vous devrez peut-être vous en tenir aux classes de composants React un peu plus longtemps.

Si vous vous sentez suffisamment confiant avec vos nouvelles connaissances sur les crochets de base, je voudrais vous laisser un défi. Refactor cette classe de temporisation à rebours à l'aide de crochets React pour le rendre aussi propre et compact que possible.

codage heureux, et faites-moi savoir comment vous allez!

FAQ sur les crochets React

Que sont les crochets React?

REACT Les crochets sont des fonctions qui vous permettent de «connecter» les fonctionnalités d'état de réaction et de cycle de vie dans les composants fonctionnels. Ils ont été introduits dans React 16.8 pour permettre à l'état et à d'autres fonctionnalités de réaction sans composants de classe d'écriture.

Pourquoi les crochets React ont-ils été introduits?

REACT Les crochets ont été introduits pour simplifier la réutilisation de la logique statuante dans les composants fonctionnels, ce qui facilite la gestion de l'état des composants et des effets secondaires.

Comment utiliser l'état dans un composant fonctionnel avec réact Crochets?

Vous pouvez utiliser le crochet UseState pour ajouter l'état aux composants fonctionnels. Il renvoie un tableau avec la valeur d'état actuelle et une fonction pour la mettre à jour.

à quoi sert le crochet Utilisation?

Le crochet UseEffect vous permet d'effectuer des effets secondaires dans vos composants fonctionnels, tels que la récupération des données, la manipulation DOM, et plus encore, et garantit que ces effets sont gérés correctement.

UseState et utilisent des crochets d'effet dans un seul composant?

Oui, vous pouvez utiliser plusieurs instances d'utilisation et utilisent des crochets d'effet dans un seul composant fonctionnel pour gérer différents états et effets.

À quoi sert le crochet UseContext?

Le crochet UseContext est utilisé pour accéder au contexte dans les composants fonctionnels. Il vous permet de consommer des valeurs de contexte sans rendre une composante de consommation de contexte.

à quoi sert le crochet utilisateur et quand dois-je l'utiliser?

Le crochet UserReducer est une alternative à UseState pour une gestion d'état plus complexe. Il est utile lorsque vous devez gérer les transitions d'état de manière prévisible.

Comment créer des crochets personnalisés dans React?

Vous pouvez créer des crochets personnalisés en définissant des fonctions qui utilisent des crochets intégrés ou d'autres crochets personnalisés. Ces crochets personnalisés peuvent encapsuler et partager la logique avec état entre les composants.

Quelles sont les règles d'utilisation des crochets dans React?

Les règles clés pour l'utilisation de crochets incluent uniquement les utilisation dans des composants fonctionnels, en utilisant des crochets au niveau supérieur (pas à l'intérieur de boucles ou des conditions), et garantir que leur commande dans le composant reste cohérente sur les retendeurs.

Y a-t-il des considérations de performances avec des crochets React?

Lorsqu'ils sont utilisés correctement, les crochets réagis peuvent améliorer les performances en réduisant les redevateurs inutiles. Cependant, il est essentiel d'utiliser les crochets UseMemo et UseCallback pour optimiser les performances en cas de besoin.

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!