Les crochets sont principalement utilisés pour fournir des états, des méthodes de cycle de vie et toutes les autres fonctionnalités d'un composant fonctionnel que nous obtenons généralement dans un composant de classe. Mais facilite également son application.

Où utiliser

Les crochets sont principalement utilisés dans les composants fonctionnels réactifs. Parce que les composants fonctionnels sont sans état et que les crochets nous permettent d'utiliser la plupart des fonctionnalités de réaction qu'ils contiennent.

Pourquoi nous préférons les crochets

Pour comprendre cela, nous devons d'abord comprendre pourquoi nous utilisons des composants fonctionnels, car ils sont finalement utilisés à l'intérieur de composants fonctionnels.

avantages de l'utilisation de composants fonctionnels

• Cela évite l'utilisation inutile de l'héritage que nous utilisons généralement dans les composants de classe.
• donc pas besoin de déclarer le constructeur ou d'appeler super.
• Pas besoin de lier les fonctions au contexte du composant .

useState

Principalement utilisé pour créer une variable d'état et également fournir une fonction pour modifier l'état. Il peut être utilisé n'importe quel nombre de fois.

const [nom, setName] = useState ("Rajiv")

utiliserEffet

Ce crochet peut être utilisé pour 3 cycles de vie : componentDidMount, componentDidUpdate et componentWillUnmount. Il peut être utilisé plusieurs fois dans un composant.

useEffect ( ()=>{console.log('cela fonctionnera comme componentDidMount');}, [ ])

useEffect ( ()=>{console.log('cela fonctionnera comme componentDidUpdate');}, [ nom])

useEffet ( ()=>{

return ()=>{console.log('cela fonctionnera comme componentWillUnmount'); }

}, [ ])

Crochets pour redux

Comme pour réagir, la bibliothèque react-redux fournit également certains crochets pour faciliter l'implémentation de redux. Voyons-les -

useSelector

Il est utilisé pour fournir un magasin redux pour réagir aux composants fonctionnels. Auparavant, nous utilisions mapStateToProps avec la méthode connect afin d'obtenir l'état de redux.

const postsList = useSelector(store => store.posts.postsData)

Comme vous pouvez le voir dans l'exemple ci-dessus, useSelector accepte un rappel contenant store comme paramètre et nous pouvons choisir les données souhaitées à renvoyer. Ici, nous avons pris postData du magasin en tant que postsList, puis nous pouvons l'utiliser pour l'afficher à l'aide de la carte.

utiliserDispatch

Il est utilisé pour envoyer une action directement à partir du composant React. Auparavant, nous devions utiliser dispatch from connect ou mapDispatchToProps à l'aide de bindActionCreators .

const dispatch = useDispatch();

Comme vous pouvez le voir dans l'exemple ci-dessus, useDispatch renvoie une fonction dispatch. Ici, nous avons envoyé l'action addPost en cliquant sur le bouton Ajouter.

conclusion

hooks rend le développement plus facile et plus simple avec l'ajout de nombreuses fonctionnalités intéressantes et offre une meilleure option pour classer les composants. Cela réduit la complexité et évite l'utilisation de ce mot-clé confus.