車輪の再発明はやめましょう！または、Vue および React アプリケーション用のユーティリティライブラリ-jsチュートリアル-php.cn

車輪の再発明はやめましょう！または、Vue および React アプリケーション用のユーティリティライブラリ

王林

リリース： 2024-07-17 17:28:08

オリジナル

593 人が閲覧しました

Don’t reinvent the wheel! Or utility libraries for Vue and React applications

導入

多くの開発者は、標準的な Web アプリケーション機能 (ブール値の保存と管理、押されたキーの処理、ステッパーの作成など) に関して、しばしばこの機能やその機能を実行する方法を見つけようとし、さらに多くの場合、機能を最初から実装します。

車輪を再発明する必要はありません!

さまざまなフレームワーク (React、vue など) の再利用可能な関数のライブラリの作成者やユーザーは、このアプローチをこのような反応で見ています。

Vue の場合 — たとえば、vueuse です。 (vue ユーティリティ関数)

React の場合、現時点で最も優れているのは、新しく積極的にサポートされている Reactuse (反応フック用) です

これらのライブラリはどのような問題を解決しますか?

これらは、開発者の困難を軽減するために必要です。開発者が作業で必要とする可能性のあるすべての機能を事前に準備します。既製のパッケージを使用する場合は、各関数が個別にテストされるため、少なくとも時間を節約でき、コード内でエラーやバグが見つかる可能性を最小限に抑えることができます。実際、そのユースケースは膨大です。このようなライブラリを利用すると、たとえば次のことが可能になります。

Web ソケットを使用します
クエリを作成する
ユーザーの地理位置情報を検出します
localStorage を使用します
モーダルウィンドウを簡単に作成

これは考えられるすべてのケースのほんの一部にすぎません。

VueUse が優れているのはなぜですか?

VueUse は、vue 用のライブラリの中で最も人気のあるものの 1 つです。結局のところ、最も基本的な再利用可能な機能が提供されます。これは Vue アプリケーションを作成するときの標準であり、これなしでは作成できないと考えている人もいます。このライブラリは 200 以上の関数で構成されており、上記のイデオロギーに従っていることに異論はありません。

React の最良の代替品

素晴らしいアイデアを完璧に実現する最良の方法として vueuse を賞賛する一方で、トップ 1 の JS ライブラリ/フレームワークである React のことも忘れてはなりません。そして、ここでの状況はさらに不快なものでした。結局のところ、React には確立され、信頼でき、広範で唯一のライブラリは存在しません。さまざまな開発者によるいくつかの試みがありましたが、そのうちの 1 つはフックが少なすぎます (React ではフックです、そうです)。どこかに未処理の API を使用して構築されたフックがあります。

状況を改善するために、vueuse の代替として、react ではなく、reactuse が登場しました。

例として、ライブラリを利用し、バニラの反応のみを使用してリスト管理を作成してみましょう。

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

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

ログイン後にコピー

get value (配列値)、set (別の配列値を代入する関数)、push (配列に値を追加する関数)、removeAt (インデックスで削除)、updateAt (インデックスで値を変更)、clear (クリア)配列)、リセット (デフォルト値にリセット)
これで、バニラのこれらすべての状態と関数を取得するコードが反応します:

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

ログイン後にコピー

そして、まったく同じメソッドと状態が得られます。そして、コードははるかに小さくてシンプルです

ライブラリは積極的にメンテナンスされ、新しいフックが追加され、ドキュメントを備えた便利な Web サイトがあり、フックは単純なソースを使用し、より複雑な API を備えています。現在、80 を超えるフックが実装されています。また、他では見たことのない、まったく新しい実装があることにも注意してください。

usePaint — 描画用のキャンバスを作成します。キャンバスを設定すると、フックを使用してその上に描画したり、ブラシのサイズ、色、不透明度、ステータス「描画」または「描画中」を調整したりできます
useStopwatch — ストップウォッチの作成用
useEyeDropper — 色の選択にスポイトを使用します
ユーザーのデバイスまたはブラウザー API (useMemory、useOperatingSystem、useClipboard、useBrowserLanguage、useHash など) を操作するための膨大な量のフック