Ceci est la troisième partie de la suite de ma série d'apprentissage de réaction , où je publie un article hebdomadaire sur mes progrès d'apprentissage de réaction et partage des ressources et du matériel qui m'ont été utiles et m'ont aidé à mieux comprendre les concepts et à faire progresser mes compétences en javascript.

Après le parcours d'apprentissage que je me suis tracé, les crochets étaient les prochains sur la table, j'ai couvert les crochets de base et à connaître cette semaine et je couvrirai les crochets avancés et les crochets personnalisés dans les semaines à venir. Les crochets qui sont couverts dans cet article sont,

1. UtiliserÉtat
2. UtiliserEffet
3. UtiliserContext
4. UtiliserRéducteur

Programmation fonctionnelle

Qu'est-ce que la programmation fonctionnelle ?

Selon FreeCodeCamp, la programmation fonctionnelle est un style de programmation où les solutions sont de simples fonctions isolées , sans aucun effet secondaire en dehors du périmètre de la fonction.

• Fonction isolée : Cela signifie qu'il n'y a aucune dépendance à l'état du programme, qui inclut les variables globales qui sont sujettes au changement, donc la fonction fonctionne de manière isolée et ne fait que le travail qui leur a été assigné par un programmeur.
• Fonction pure simple : La même entrée donne toujours la même sortie.
• Les fonctions ont des effets secondaires inexistants ou limités : toute modification de l'état de l'ensemble du programme en dehors de la fonction est contrôlée dans un sens qui n'affecte pas la fonction ou son fonctionnement.
• La programmation fonctionnelle a un modèle de programmation sans état .

Revenons aux crochets…

Que sont les crochets ?

Selon réagir Docs officiels,

"Les crochets sont un nouvel ajout à React dans la version 16.8 qui vous permet d'utiliser l'état et d'autres fonctionnalités de React, comme les méthodes de cycle de vie, sans écrire de classe."

Les composants fonctionnels de React ne sont rien d'autre qu'un paradigme de programmation fonctionnelle qui isole la fonction les unes des autres afin qu'elles puissent effectuer leurs propres actions sans aucune interférence du monde extérieur.

Les 4 crochets les plus utilisés.

1. useState()

• Qu'est-ce que le crochet useState() ? C'est un hook qui vous permet d'avoir des variables d'état dans les composants fonctionnels, vous passez l'état initial à cette fonction et elle renvoie une variable avec la valeur d'état actuelle et une autre fonction pour mettre à jour cette valeur lorsque l'écran se restitue.
• Que transmettons-nous à useState() ? l'argument que useState() prend est un état initial, il peut s'agir d'un nombre ou d'une chaîne si c'est ce dont vous avez besoin.
• Qu'est-ce que useState return() ? Il renvoie deux valeurs, l'état actuel et une fonction pour mettre à jour l'état actuel, consultez l'exemple ci-dessous.

const [foo, setFoo] = useState('bar')

2. utiliserEffet()

Selon le documentaire officiel, le crochet d'effet vous permet d'effectuer des effets secondaires dans le composant de fonction. En bref, la tâche qui se déroule en dehors du cycle normal d'évaluation et de rendu des composants.

Nous gérons ces effets séparément afin que ces effets secondaires n'interrompent pas le rendu normal de l'interface utilisateur du composant de réaction.

useEffecct( () => {...}, []

1. Une fonction qui doit être exécutée après chaque évaluation de composant est l'endroit où va votre code d'effet secondaire.
2. Le deuxième argument est un tableau, connu sous le nom de tableau de dépendances, le premier argument, c'est-à-dire que la fonction ne s'exécutera que si les dépendances mentionnées sont modifiées.

useEffect(() => {
    effect
    return () => {
        cleanup
    }
}, [])

3. useContext()

Le contexte fournit un moyen de transmettre des données via l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau. Oui, c'est tout simplement cela.

Trois étapes pour créer un crochet useContext(),

• Créer un contexte : const creationContext = React.createContext(null);
• Enveloppez avec le fournisseur et transmettez la valeur de contexte, la valeur à transmettre.
• Exporter : exporte par défaut la création de CreatingContext

4. useReducer()

Oh mec! celui-ci m'a pris des jours pour passer à travers la partie où je peux l'implémenter moi-même, mais je ferai de mon mieux pour vous faciliter au moins la partie théorique.

• useReducer est un crochet utilisé pour la gestion de l'état.
• C'est une alternative à useState, en fait, le crochet useState est construit à l'aide de useReducer.
• Son fonctionnement est très lié à la fonction de tableau de réduction de javascript.

const [count, dispatch] = useReducer(reducer, initialState)

1. dispatch, est utilisé pour envoyer une nouvelle action. Il s'agit d'une fonction qui est déclenchée automatiquement une fois qu'une action est envoyée via la fonction de réduction, reçoit le dernier instantané d'état et renvoie un état nouveau et mis à jour.

• useReducer, définit un état initial.
• Fournissez une fonction qui contient des actions qui mettent à jour l'état.
• Déclenche l'envoi d'un état mis à jour calculé par rapport à l'état initial.

Selon css-tricks , "Si votre seul élément de votre état repose sur la valeur d'un autre élément de votre état, alors c'est presque toujours d'utiliser useReducer"

La règle empirique peut être d'utiliser useReducerpour gérer des états complexes, en particulier lorsque l'état initial est basé sur l'état d'autres éléments.

J'espère que cet article vous a donné les bases des crochets de réaction et à partir de là, vous pouvez rechercher des exemples de bac à sable et avoir une meilleure compréhension. Ci-dessous, je joins quelques références détaillées à certains articles pour tous les crochets que j'ai mentionnés, où vous pouvez consulter des exemples plus complexes et une compréhension plus approfondie de crochets particuliers.

[1]https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/

[2]https://medium.com/swlh/react-hook-a-guide-to-learning-useeffect-11687e777aeb

[3]https://www.robinwieruch.de/react-usecontext-hook

[4]https://css-tricks.com/getting-to-know-the-usereducer-react-hook/