Ne réinventez pas la roue ! Ou des bibliothèques d'utilitaires pour les applications Vue et React

Introduction

De nombreux développeurs, lorsqu'il s'agit de fonctionnalités d'application Web standard, par exemple : stocker et gérer des valeurs booléennes, gérer les touches enfoncées ou créer un stepper, essaient souvent de trouver comment faire telle ou telle fonction et le plus souvent, ils trouvent un moyen de implémentez la fonctionnalité à partir de zéro.

Il n’est pas nécessaire de réinventer la roue !

Les créateurs et utilisateurs de bibliothèques de fonctions réutilisables pour divers frameworks (React, vue etc.) regardent cette approche avec une telle réaction.

Pour Vue — c'est, par exemple, vueuse. (fonctions utilitaires vue)

Pour React, le meilleur aujourd'hui est le tout nouveau réactuse activement pris en charge (pour les hooks de réaction)

Quel problème ces bibliothèques résolvent-elles ?

Ils sont nécessaires pour rendre la vie moins difficile aux développeurs. Préparez à l'avance toutes les fonctions possibles dont le développeur pourrait avoir besoin dans son travail. S'il utilise un package prêt à l'emploi, il gagnera au moins du temps et minimisera au maximum la probabilité de son erreur ou de son bug trouvé dans le code, car chaque fonction est testée séparément. Le cas d’utilisation est en réalité énorme. Avec l'aide de telles bibliothèques, vous pouvez, par exemple :

1. utilisez des sockets Web
2. faire des requêtes
3. détecter la géolocalisation de l'utilisateur
4. utilisez localStorage
5. créez facilement des fenêtres modales

Et ce n’est qu’une petite partie de tous les cas possibles.

Pourquoi VueUse est-il cool ?

VueUse est l'une des bibliothèques de ce type les plus populaires pour vue. Après tout, il fournit la fonctionnalité réutilisable la plus élémentaire. Certaines personnes pensent qu'il s'agit d'un standard lors de la création d'applications Vue, et sans cela, il est impossible de le réaliser. Il est difficile d'être en désaccord, la bibliothèque comprend plus de deux cents fonctions et suit l'idéologie décrite ci-dessus.

Meilleure alternative pour React

Tout en louant vueuse comme le meilleur moyen de réaliser parfaitement une excellente idée, nous ne devons pas oublier le top 1 des bibliothèques/framework js — React. Et ici, la situation était plus désagréable. Après tout, il n’existe pas de bibliothèque établie, fiable, complète et unique pour React. Il y a eu quelques tentatives de la part de différents développeurs, mais dans l'un d'entre eux, il y a trop peu de hooks (dans React, ce sont des hooks, ouais), quelque part il y a des hooks construits à l'aide d'une API non traitée.

Pour améliorer la situation, et comme alternative à vueuse, mais en réaction, est venue réactuse.

Prenons, par exemple, et essayons de créer une gestion de liste à l'aide d'une bibliothèque et en utilisant Vanilla React uniquement.

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

Nous obtenons value (valeur du tableau), set (fonction pour attribuer une autre valeur au tableau), push (fonction pour ajouter des valeurs au tableau), removeAt (supprimer par index), updateAt (modifier la valeur par index), clear (effacer le tableau), réinitialiser (réinitialiser à la valeur par défaut)
Maintenant, le code pour obtenir tous ces états et fonctions sur Vanilla React :

const [value, setValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

Et nous obtenons exactement les mêmes méthodes et le même état. Et le code est bien plus petit et plus simple

La bibliothèque est activement entretenue, de nouveaux hooks sont ajoutés, il existe un site Web pratique avec de la documentation, les hooks utilisent des sources simples et disposent d'une API plus élaborée. Aujourd’hui, plus de 80 hooks sont implémentés. Je tiens également à noter qu'il existe des implémentations absolument nouvelles, que je n'ai vues nulle part ailleurs :

• usePaint — pour créer une toile sur laquelle dessiner. Vous définissez la toile, et le crochet vous permet de dessiner dessus, d'ajuster la taille du pinceau, la couleur, l'opacité et le statut « dessiner » ou « dessiner maintenant »
• useStopwatch — pour créer des chronomètres
• useEyeDropper — pour utiliser le compte-gouttes pour la sélection des couleurs
• une énorme quantité de hooks fonctionnant avec l'appareil utilisateur ou l'API du navigateur (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash et ainsi de suite)

Conclusion

De telles bibliothèques devraient devenir un standard de développement, simplement parce qu'elles permettent de ne pas rester concentré sur les petits détails qui ont déjà été inventés il y a longtemps, il suffit de les importer et de les utiliser.

réutiliser les liens

npm — github

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!