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 计时器,以便在组件卸载/销毁时可以正确清理计时器。