Einführung

Viele Entwickler versuchen oft herauszufinden, wie sie diese oder jene Funktion ausführen können, wenn es um Standardfunktionen von Webanwendungen geht, zum Beispiel: Speichern und Verwalten von booleschen Werten, Behandeln gedrückter Tasten oder Erstellen von Steppern, und noch häufiger finden sie einen Weg dazu Implementieren Sie die Funktionalität von Grund auf.

Es besteht keine Notwendigkeit, das Rad neu zu erfinden!

Ersteller und Benutzer von Bibliotheken wiederverwendbarer Funktionen für verschiedene Frameworks (React, Vue usw.) betrachten diesen Ansatz mit einer solchen Reaktion.

Für Vue ist es zum Beispiel vueuse. (Vue-Dienstprogrammfunktionen)

Für React ist das Beste heute das brandneue und aktiv unterstützte Reactuse (für React Hooks)

Welches Problem lösen diese Bibliotheken?

Sie werden benötigt, um das Leben für Entwickler weniger herausfordernd zu machen. Bereiten Sie im Voraus alle möglichen Funktionen vor, die der Entwickler für seine Arbeit benötigen könnte. Wenn er ein vorgefertigtes Paket verwendet, spart er zumindest Zeit und minimiert höchstens die Wahrscheinlichkeit, dass sein Fehler oder Bug im Code gefunden wird, da jede Funktion separat getestet wird. Der Anwendungsfall ist tatsächlich riesig. Mit Hilfe solcher Bibliotheken können Sie beispielsweise:

1. Web-Sockets verwenden
2. Anfragen stellen
3. Geolokalisierung des Benutzers ermitteln
4. localStorage verwenden
5. modale Fenster einfach erstellen

Und das ist nur ein kleiner Teil aller möglichen Fälle.

Warum ist VueUse cool?

VueUse ist eine der beliebtesten Bibliotheken dieser Art für Vue. Schließlich bietet es die grundlegendste wiederverwendbare Funktionalität. Manche Leute glauben, dass es sich bei der Erstellung von Vue-Anwendungen um einen Standard handelt und dass es ohne ihn unmöglich ist, ihn zu erstellen. Da kann man kaum widersprechen, die Bibliothek besteht aus mehr als zweihundert Funktionen und folgt der oben beschriebenen Ideologie.

Beste Alternative für React

Während wir Vueuse als den besten Weg zur perfekten Umsetzung einer großartigen Idee loben, sollten wir die Top-1-JS-Bibliothek/das Top-Framework nicht vergessen – React. Und hier war die Situation noch unangenehmer. Schließlich gibt es keine etablierte, zuverlässige, umfangreiche und einzige Bibliothek für React. Es gab einige Versuche von verschiedenen Entwicklern, aber in einem davon gibt es zu wenige Hooks (in React sind es Hooks, ja), irgendwo gibt es Hooks, die mit einer unverarbeiteten API erstellt wurden.

Um die Situation zu verbessern und als Alternative zu Vueuse, aber in React, kam Reactuse.

Nehmen wir zum Beispiel den Versuch, eine Listenverwaltung mit Hilfe einer Bibliothek zu erstellen und nur Vanilla React zu verwenden.

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

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

Wir erhalten Wert (Array-Wert), Set (Funktion zum Zuweisen eines anderen Array-Werts), Push (Funktion zum Hinzufügen von Werten zum Array), RemoveAt (Löschen nach Index), UpdateAt (Wert nach Index ändern), Clear (Löschen). das Array), zurücksetzen (auf Standardwert zurücksetzen)
Nun reagiert der Code zum Abrufen all dieser Zustände und Funktionen auf Vanilla:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["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);

Und wir erhalten genau die gleichen Methoden und den gleichen Zustand. Und der Code ist viel kleiner und einfacher

Die Bibliothek wird aktiv gepflegt, neue Hooks werden hinzugefügt, es gibt eine praktische Website mit Dokumentation, die Hooks verwenden einfache Quellen und verfügen über eine ausgefeiltere API. Mittlerweile sind mehr als 80 Hooks implementiert. Ich möchte auch anmerken, dass es absolut neue Implementierungen gibt, die ich sonst nirgendwo gesehen habe:

• usePaint – zum Erstellen einer Leinwand zum Zeichnen darauf. Sie legen die Leinwand fest und mit dem Haken können Sie darauf zeichnen, die Größe des Pinsels, die Farbe, die Deckkraft und den Status „Zeichnen“ oder „Jetzt zeichnen“ anpassen
• useStopwatch – zum Erstellen von Stoppuhren
• useEyeDropper – um die Pipette zur Farbauswahl zu verwenden
• Eine große Anzahl von Hooks für die Arbeit mit dem Benutzergerät oder der Browser-API (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash usw.)

Abschluss

Solche Bibliotheken sollten zu einem Entwicklungsstandard werden, nur weil sie es Ihnen ermöglichen, sich nicht auf die kleinen Details zu konzentrieren, die bereits vor langer Zeit erfunden wurden, sondern sie einfach zu importieren und zu verwenden.

Reactuse-Links

npm – github