useTask$() - 显式反应性

除了模板创建的隐式反应性之外,Qwik 还支持在属性更改时显式执行代码。这是通过 useTask$() 钩子实现的。 useTask$() 钩子在组件渲染之前执行,可以是异步的。钩子还可以具有在下次钩子执行或组件被移除时调用的清理函数。

在这个例子中,点击 +1 会立即更新 count。我们想要的是在 2 秒延迟后更新 延迟计数。如果 count 在 2 秒结束之前更新,则计时器会重新启动。

请注意,useTask$() 回调接收一个 track 函数。使用 track 函数告诉 Qwik 哪些属性应该触发任务的观察者。track 函数在存储中创建订阅。在每次调用 useTask$() 时,订阅都会被清除,因此始终设置新的订阅集非常重要。如果订阅集在函数的生命周期内发生变化,这将非常有用。

useTask$() 回调函数可以返回一个清理函数。清理函数在下次 useTask$() 回调执行或组件被移除时调用。在我们的例子中,清理函数用于返回清除 setTimeout 的代码。

useTask$() 回调在组件渲染之前执行。这使它们可以用于计算渲染中使用的值。该函数在服务器和客户端上都运行。服务器执行会设置订阅,这些订阅随后会被序列化并可供客户端使用。这使客户端不必下载所有组件并至少执行一次才能恢复系统的订阅信息。

编辑教程