React Hooks et avantages

Réagir

En tant que bibliothèque JavaScript frontale permettant de créer des interfaces basées sur des composants, React a gagné en popularité parmi les développeurs front-end. Il a été lancé par Facebook en 2013 et est désormais géré par Meta. React est open source et son principal cas d'utilisation est le développement d'applications Web d'une seule page en mettant l'accent sur l'interface utilisateur et le rendu des composants dans le DOM.

Les applications React s'appuient sur des bibliothèques pour le routage et d'autres fonctionnalités côté client. L'un des principaux avantages de React est qu'il ne restitue que les parties d'une page qui ont été modifiées, évitant ainsi un nouveau rendu inutile des éléments DOM inchangés.

Principales fonctionnalités

Déclaratif
Suivant le paradigme de programmation déclarative, dans React, les développeurs conçoivent des vues pour chaque état d'une application, qui est ensuite mise à jour et les composants rendus à mesure que les données changent. Par rapport à la programmation impérative, l'accent est mis sur « ce » qui doit être fait et à quoi devrait ressembler la page finale, par opposition à « comment » cela est fait étape par étape.

Composants
Le code de React se compose de composants, qui sont des entités modulaires et réutilisables. Les applications comportent généralement plusieurs couches de composants et sont restituées dans un élément dit racine du DOM. Lors du rendu d'un composant, les valeurs sont transmises entre les composants via des propriétés, également appelées accessoires. Les valeurs internes à un composant sont appelées état.

Réagir aux crochets
Disponibles depuis React 16.8 (2019), les React Hooks sont des fonctions qui permettent aux développeurs de se connecter aux fonctionnalités d'état et de cycle de vie de React à partir des composants de fonction. Il est important de noter que les Hooks permettent aux développeurs d'utiliser les fonctionnalités de React sans avoir à utiliser de classes. Ceci est considéré comme un gros avantage, car les programmeurs doivent moins s'appuyer sur les composants de classe.

Composants de classe
Les classes se comportent de la même manière en tant que composants fonctionnels. Cependant, au lieu d'utiliser des Hooks pour gérer les événements d'état et de cycle de vie, ils utilisent des méthodes de cycle de vie sur les classes de base React.Component.

Routage
Étant donné que React ne prend pas en charge le routage, des bibliothèques tierces peuvent être utilisées pour gérer le routage. Cela permet au développeur de définir facilement des itinéraires, de gérer la navigation et de gérer les modifications d'URL.

DOM virtuel
Le modèle d'objet de document virtuel (DOM) est une fonctionnalité importante, car React utilise une structure de données interne, calcule les différences qui en résultent et met à jour efficacement le DOM affiché. Cela permet au développeur d'écrire du code comme si la page entière était rendue à chaque modification, tandis que React ne restitue que les composants qui changent réellement. Cela améliore les performances.

Réagir aux crochets

Comme mentionné précédemment, les Hooks sont un nouvel ajout dans React 16.8. Ils vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe.

Référence :
Réagissez aux documents

useState
useState est un React Hook qui vous permet d'ajouter une variable d'état à votre composant.

Référence :
utiliserÉtat

Exemple

importer { useState } depuis 'react';
fonction MonComponent() {
const [âge, setAge] = useState(28);
const [nom, setName] = useState('Taylor');
const [todos, setTodos] = useState(() => createTodos());
// …

La convention est de nommer les variables d'état comme [something, setSomething] en utilisant la déstructuration de tableaux.

Les paramètres incluent initialState, qui est la valeur que vous souhaitez que l'état soit initialement. Il peut s'agir d'une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. Cet argument est ignoré après le rendu initial.

useState renvoie un tableau avec exactement deux valeurs :

1. L'état actuel. Lors du premier rendu, il correspondra à l'état initial que vous avez passé.
2. La fonction set qui vous permet de mettre à jour l'état à une valeur différente et de déclencher un nouveau rendu.

useEffect
useEffect est un React Hook qui vous permet de synchroniser un composant avec un système externe.

Exemple
useEffect(configuration, dépendances)

Il est appelé au niveau supérieur de votre composant pour déclarer un effet.

setup est la fonction avec la logique de l'effet. La fonction de configuration peut également éventuellement renvoyer une fonction de nettoyage. Lorsque votre composant est ajouté au DOM, React exécutera votre fonction de configuration. Après chaque nouveau rendu avec des dépendances modifiées, React exécutera d'abord la fonction de nettoyage avec les anciennes valeurs, puis exécutera votre fonction de configuration avec les nouvelles valeurs.

Les dépendances sont facultatives et il s'agit d'une liste de toutes les valeurs réactives référencées dans le code de configuration. Les valeurs réactives incluent les accessoires, l'état et toutes les variables et fonctions déclarées directement dans le corps de votre composant.

Points clés à retenir

L'un des principaux avantages de React est qu'il utilise JavaScript, qui est l'un des langages de programmation les plus populaires au monde. React est facile à utiliser, généralement facile à apprendre, et améliore les performances et l'interopérabilité de vos applications Web.

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!