Jangan cipta semula roda! Atau perpustakaan utiliti untuk aplikasi Vue dan React

pengenalan

Ramai pembangun, apabila ia berkaitan dengan fungsi aplikasi web standard, contohnya: menyimpan dan mengurus nilai boolean, mengendalikan kekunci yang ditekan atau mencipta stepper, sering cuba mencari cara untuk melakukan fungsi ini atau itu dan lebih kerap mereka mencari jalan untuk laksanakan fungsi dari awal.

Tidak perlu mencipta semula roda!

Pencipta dan pengguna perpustakaan fungsi boleh guna semula untuk pelbagai rangka kerja (React, vue dll.) melihat pendekatan ini dengan reaksi sedemikian.

Untuk Vue — contohnya, vueuse. (fungsi utiliti vue)

Untuk React, yang terbaik hari ini ialah reactuse serba baharu dan disokong secara aktif (untuk cangkuk tindak balas)

Apakah masalah yang diselesaikan oleh perpustakaan ini?

Ia diperlukan untuk menjadikan kehidupan kurang mencabar bagi pembangun. Sediakan terlebih dahulu semua kemungkinan fungsi yang mungkin diperlukan oleh pembangun dalam kerjanya. Jika dia akan menggunakan pakej siap, dia sekurang-kurangnya akan menjimatkan masanya, dan paling banyak meminimumkan kebarangkalian ralat atau pepijatnya yang ditemui dalam kod, kerana setiap fungsi diuji secara berasingan. Kes penggunaan sebenarnya besar. Dengan bantuan perpustakaan sedemikian, anda boleh, contohnya:

1. gunakan soket web
2. buat pertanyaan
3. mengesan geolokasi pengguna
4. gunakan localStorage
5. buat tetingkap modal dengan mudah

Dan itu hanya sebahagian kecil daripada semua kes yang mungkin berlaku.

Mengapa VueUse hebat?

VueUse ialah salah satu perpustakaan sedemikian yang paling popular untuk vue. Lagipun, ia menyediakan fungsi boleh guna semula yang paling asas. Sesetengah orang berpendapat bahawa ia adalah standard apabila membina aplikasi Vue, dan tanpanya adalah mustahil untuk membuatnya. Sukar untuk tidak bersetuju, perpustakaan terdiri daripada lebih daripada dua ratus fungsi dan mengikut ideologi yang diterangkan di atas.

Alternatif terbaik untuk React

Sambil memuji vueuse sebagai cara terbaik untuk merealisasikan idea yang hebat dengan sempurna, kita tidak seharusnya melupakan pustaka/rangka kerja 1 js teratas — React. Dan di sini keadaannya lebih tidak menyenangkan. Lagipun, tidak ada perpustakaan yang mantap, boleh dipercayai, luas dan satu-satunya untuk React. Terdapat beberapa percubaan daripada pembangun yang berbeza, tetapi dalam salah satu daripadanya terdapat terlalu sedikit cangkuk (dalam React ia adalah cangkuk, ya), di suatu tempat terdapat cangkuk dibina menggunakan api yang tidak diproses.

Untuk memperbaiki keadaan, dan sebagai alternatif kepada vueuse, tetapi sebagai tindak balas, datang reactuse.

Mari kita ambil, sebagai contoh, dan cuba buat pengurusan senarai dengan bantuan perpustakaan dan menggunakan tindak balas vanila sahaja.

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

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

Kami mendapat nilai (nilai tatasusunan), tetapkan (fungsi untuk menetapkan nilai tatasusunan lain), tolak (fungsi untuk menambah nilai pada tatasusunan), removeAt (padam mengikut indeks), kemas kiniAt (ubah nilai mengikut indeks), kosongkan (kosongkan tatasusunan), tetapkan semula (set semula kepada nilai lalai)
Sekarang kod untuk mendapatkan semua keadaan dan fungsi ini pada tindak balas vanila:

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);

Dan kami mendapat kaedah dan keadaan yang sama. Dan kodnya jauh lebih kecil dan lebih ringkas

Perpustakaan diselenggara secara aktif, cangkuk baharu ditambah, terdapat laman web yang mudah dengan dokumentasi, cangkuk menggunakan sumber mudah dan mempunyai API yang lebih terperinci. Kini terdapat lebih daripada 80 mata kail dilaksanakan. Saya juga ingin ambil perhatian bahawa terdapat pelaksanaan yang benar-benar baharu, yang saya tidak pernah lihat di tempat lain:

• usePaint — untuk mencipta kanvas untuk melukis di atasnya. Anda menetapkan kanvas dan cangkuk membolehkan anda melukis di atasnya, melaraskan saiz berus, warna, kelegapan dan status "lukis" atau "lukis sekarang"
• gunakanStopwatch — untuk mencipta jam randik
• useEyeDropper — untuk menggunakan penitis untuk pemilihan warna
• sejumlah besar cangkuk akan berfungsi dengan peranti pengguna atau api penyemak imbas (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash dan sebagainya)

Kesimpulan

Perpustakaan sebegini harus menjadi standard pembangunan, hanya kerana ia membenarkan anda untuk tidak terus fokus pada butiran kecil yang telah dicipta lama dahulu, anda hanya perlu mengimportnya dan menggunakannya.

pautan bertindak balas

npm — github

Atas ialah kandungan terperinci Jangan cipta semula roda! Atau perpustakaan utiliti untuk aplikasi Vue dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!