useTask$() - 顯式響應性

除了模板創建的隱式響應性之外,Qwik 還支持在屬性更改時顯式執行程式碼。這是通過 useTask$() hook 實現的。useTask$() hook 在組件渲染之前執行,並且可以是非同步的。該 hook 還可以有一個清理函數,在下次 hook 執行或組件被移除時調用。

在此示例中,點擊 +1 會立即更新 count。我們希望在 2 秒延遲後更新 delay count。如果在 2 秒結束之前更新了 count,則計時器將重新啟動。

請注意,useTask$() 回調函數接收一個 track 函數。使用 track 函數告訴 Qwik 哪些屬性應該觸發任務的觀察器。track 函數在儲存區中創建訂閱。在每次調用 useTask$() 時,訂閱都會被清除,因此務必始終設置一組新的訂閱。如果函數生命週期中訂閱集發生變化,這將非常有用。

useTask$() 回調函數可以返回一個清理函數。清理函數在下一次 useTask$() 回調函數執行或組件被移除時調用。在我們的例子中,清理函數用於返回清除 setTimeout 的程式碼。

useTask$() 回呼函式會在元件渲染之前執行。這讓它們可以用於計算渲染時所需的值。該函式會在伺服器和客戶端上執行。伺服器執行會設定訂閱,然後序列化並提供給客戶端。這可以避免客戶端下載所有元件並至少執行一次以恢復系統的訂閱資訊。

編輯教學