useTask$() - 明示的なリアクティビティ
テンプレートによって作成される暗黙的なリアクティビティに加えて、Qwik はプロパティが変更されたときにコードを明示的に実行することをサポートしています。これは、useTask$() フックを使用して実現されます。useTask$() フックは、コンポーネントがレンダリングされる前に実行され、非同期にすることができます。このフックには、次のフックの実行時またはコンポーネントが削除されたときに呼び出されるクリーンアップ関数を含めることもできます。
この例では、+1 をクリックすると、count が即座に更新されます。ここでやりたいのは、2 秒の遅延後に delay count を更新することです。2 秒が経過する前に count が更新された場合は、タイマーが再起動されます。
useTask$() コールバックは、track 関数を受け取ることに注意してください。track 関数を使用して、どのプロパティがタスクのウォッチャーをトリガーするかを Qwik に伝えます。track 関数は、ストアにサブスクリプションを作成します。useTask$() の各呼び出しで、サブスクリプションはクリアされるため、常に新しいサブスクリプションを設定することが重要です。これは、関数の有効期間中にサブスクリプションのセットが変更された場合に便利です。
useTask$() コールバック関数は、クリーンアップ関数を返すことができます。クリーンアップ関数は、次の useTask$() コールバックの実行時、またはコンポーネントが削除されたときに呼び出されます。この例では、クリーンアップ関数は、setTimeout をクリアするコードを返すために使用されます。
useTask$() コールバックは、コンポーネントがレンダリングされる前に実行されます。これにより、レンダリングで使用される値を計算するために使用できます。この関数は、サーバーとクライアントの両方で実行されます。サーバーの実行では、シリアライズされてクライアントで使用できるサブスクリプションが設定されます。これにより、クライアントはすべてのコンポーネントをダウンロードして、システム用のサブスクリプション情報を回復するために少なくとも 1 回は実行する必要がなくなります。