`$` を使用した API の作成

オプティマイザーの強力な機能の1つは、`$` サフィックスを使用して独自のAPIを作成できることです。

コールバックを遅延読み込みする delay メソッドが必要だとします。 通常は、次のようなものを書く必要があります。

setTimeout(() => {
  // I am eagerly loaded, but it would be better if I was lazy-loaded.
  ...
}, timeout);

上記の例の問題点は、コールバックを事前にダウンロードして作成する必要があることです。 クロージャが大きい場合、またはコールバックが実行されない（または後で実行される）場合、これは問題になる可能性があります。

より良い解決策は、コールバックに関連付けられたクロージャを遅延読み込みできる `delay$` メソッドを用意することです。 このようになります。

delay$(() => {
  // I am lazy-loaded only when I need to be executed.
  ...
}, 1000)

上記の解決策では、コールバックは `delay$` が実行準備ができたときにのみダウンロードされます。

`$` サフィックスを使用した API の作成

Qwik ランタイムは `QRL` で動作します。 このため、次のようにメソッドを定義します。

export function delayQrl<T>(fn: QRL<() => T>, delayInMs: number): Promise<T> {
  return new Promise((res) => {
    setTimeout(() => {
      res(fn.invoke());
    }, delayInMs);
  });
}

このメソッドは、`QRL` を受け取り、一定の遅延後に実行する方法を知っています。 ここでの重要な部分は、`QRL.invoke()` メソッドが遅延の準備ができたときに呼び出されるため、遅延されることです。

次のステップは、`delayQrl` メソッドを `delay$` エイリアスに変換することです。 これは、次のように `implicit$FirstArg` を使用して行われます。

export const delay$ = implicit$FirstArg(delayQrl);

何が起こっているのかを明確にするための型を以下に示します。

declare function delayQrl<T>(fn: QRL<() => T>, delayInMs: number): Promise<T>;
declare function delay$<T>(fn: () => T, delayInMs: number): Promise<T>;

上記により、`delay$` をインライン形式で使用できますが、オプティマイザーは `delay$` を `delayQrl` 形式に変換します。

**注意** 2つのメソッドは同じプレフィックスを持つ必要があります。 したがって、一般的な形式は次のとおりです。

export const SOME_NAME_Qrl = ...;
export const SOME_NAME_$ = implicit$FirstArg(SOME_NAME_Qrl);

例

この例では、`store.count++` と `store.delay++` を一緒に実行しています。 `store.delay` を `delay$()` 呼び出しでラップして、1秒の遅延で更新されるようにします。

次へuse Hooks の合成