Quand et comment choisir entre React Crochets et anciens accessoires HOC qui passent?
Jusqu'à présent, nous étions habitués à Flux de flux où les données entrées dans le composant via des accessoires. Vous pouvez donc regarder la signature Props et voir quelles sont les exigences des composants.
Les crochets sont une fonctionnalité étonnante, mais au fur et à mesure que nous passons à eux, je trouve qu'ils fournissent une autre entrée pour les dépendances qui est plus difficile à gérer car vous devez regarder le code du composant réel pour le voir.
Bien sûr, nous ne pouvons utiliser des crochets que dans les composants de conteneurs, mais je pense que certains de leurs principaux arguments de vente sont leur capacité à réduire l'emboîtement et le HOC.
Quelles sont les meilleures pratiques (actuellement) pour décider quel composant doit utiliser un crochet et lequel doit utiliser des accessoires de rendu?
Et selon les React FAQs hooks peut être utilisé comme alternative à renderProps et HOCs, mais peut coexister avec eux
Souvent, les accessoires de rendu et les composants d'ordre supérieur ne rendent qu'un seul enfant. Nous pensons que les crochets sont un moyen plus simple de servir ce cas d'utilisation. Il y a toujours une place pour les deux modèles (par exemple, un composant de scroller virtuel peut avoir un accessoire renderItem, ou un composant conteneur visuel peut avoir sa propre structure DOM). Mais dans la plupart des cas, les crochets seront suffisants et peuvent aider à réduire la nidification dans votre arbre.
Les crochets permettent une logique avec état dans les composants fonctionnels et seraient similaires aux composants de classe dans React.
Les crochets sont plus difficiles à gérer car vous devez regarder le code du composant réel pour le voir.
Pas vraiment, car vous pouvez extraire la logique personnalisée que vous avez dans vos HOC ou renderProps dans un hook personnalisé et rechercher son implémentation au lieu de comprendre ce qui se passe réellement dans le composant réel.
Les crochets et les HOC sont des modèles de programmation différents, et les comparer semblera être une comparaison des oranges et des pommes.
TL; DR
En règle générale, j'utilise des HOC lorsque je veux un rendu conditionnel des composants (si condition: rendu A, sinon rendu B), sinon, j'utilise des crochets. Ce n'est que mon opinion.
Avantages et inconvénients:
HOCs Pros
- Séparez facilement toute la logique du composant d'interface utilisateur (voir recomposer ).
- Facile à composer.
- Manipulez le composant avant tout rendu.
Contre HOC
- Affrontements de noms - 2 HOC peuvent utiliser et définir un accessoire du même nom.
- React dom est gigantesque.
- Chaque changement dans les accessoires parent a provoqué le rendu des enfants - ce qui est le comportement par défaut dans React mais quand nous avons beaucoup de HOC, nous devons être très prudents.
- Types - Du point de vue des composants, il est difficile de comprendre quels accessoires et types nous obtenons.
- L'utilisation d'un HOC transmettra tous les accessoires à l'enfant, même si l'enfant n'a besoin de ce HOC spécifique que de l'hélice
x. - Le processus d'utilisation d'un argument qui dépend des accessoires d'un composant pour le HOC peut être compliqué
HOCs Pro & Con tous les deux
- Pas besoin de définir de variables, enveloppez-le simplement avec un HOC et vous obtiendrez les accessoires fournis par le HOC - ce qui fait que notre composant d'interface utilisateur "devine" les noms des accessoires.
Hooks Pros
- Lisible et déclaratif.
- Performance - ne se met à jour que lorsque des accessoires spécifiques sont modifiés.
- Communauté en pleine croissance.
Inconvénients des crochets
- Uniquement dans le composant - ce qui signifie qu'il ne peut pas rendre le composant par une condition d'accessoires passés.
- Fichiers de composants géants qui contiennent entièrement l'interface utilisateur et la logique.
Une chose que je vois souvent est d'utiliser des crochets avec des effets secondaires dans un composant. Cela rend votre composant plus difficile à tester et n'est pas un bon cas d'utilisation pour les crochets à mon humble avis.
Par exemple, vous créez un composant avec une const {data, loading, error} = useFetch(endpointUrl) personnalisée, puis vous l'utilisez directement dans la partie de rendu return <>{data.name}</> du même composant.
Pour moi, c'est toujours un cas d'utilisation pour un HOC. Chargez les données dans un HOC, fournissez-les en tant que propriétés à votre composant de vidage d'image fixe. De cette façon, vous pouvez tester le composant plus facilement et vous séparez toujours les problèmes.