useVisibleTask$()
使用 useVisibleTask$()
在组件恢复后执行代码。这对于在应用程序恢复时在客户端设置计时器或流很有用。
track()
和 useVisibleTask$()
useVisibleTask$()
接收一个 track()
函数,就像 useTask$()
一样。使用 track()
函数在存储更新时触发效果。有关更多信息,请参阅 响应式。
组件生命周期和 SSR
Qwik 是可恢复的。可恢复性意味着应用程序在服务器上启动,然后传输到客户端。在客户端,应用程序从停止的地方继续执行。一个常见的用例是在服务器上创建组件,暂停,然后在客户端恢复。为了使组件完全正常工作,可能需要在客户端急切地执行代码以设置计时器或流。
useVisibleTask$()
是一个仅限客户端的方法。(服务器上没有等效方法。)
注意 有关需要在客户端和服务器上执行的行为,请参阅
useTask$()
。
useVisibleTask$()
?
何时执行 客户端效果代码在组件恢复后执行。useVisibleTask$()
方法接受一个额外的参数 ({strategy:'intersection-observer|document-ready|document-idle'}
),它控制何时执行效果。有三个选项
intersection-observer
(默认):任务将在元素在视口中可见时首次执行,在幕后它使用 IntersectionObserver API。document-ready
:任务将在文档准备就绪时首次执行,在幕后它使用文档加载事件。document-idle
:任务将在文档空闲时首次执行,在幕后它使用 requestIdleCallback API。
示例
该示例显示了一个在折线下方渲染的时钟组件。使用 useVisibleTask$()
使时钟每秒更新当前时间,使其在客户端正常工作。我们提供了实用函数 updateClock
来帮助您实现。
请记住,useVisibleTask$()
应该返回一个清理函数,该函数释放 setInterval
计时器,以便在组件卸载/销毁时可以正确清理计时器。