如何获取Qwik Signal的历史值?适配分辨率切换计算场景
断点切换时执行高成本计算的实现问题与解决
需求场景
当用户在移动端与桌面端分辨率间切换时,仅在768px断点切换时执行计算成本较高的操作,需要跟踪分辨率变化,避免不必要的重复计算。
初始错误实现
最初编写的代码尝试通过cleanup方法保存上一次的移动端状态,但出现状态同步异常:
component$(() => { const isMobile = useSignal(true) const prevIsMobile = useSignal(true) useOnWindow( 'resize', $(() => { isMobile.value = window.innerWidth < 768 }) ) useVisibleTask$(({ track, cleanup }) => { track(() => isMobile.value) isMobile.value = window.innerWidth < 768 if (prevIsMobile.value !== isMobile.value) { // 执行高成本计算 } cleanup(() => { prevIsMobile.value = isMobile.value }) }) // 其他逻辑 })
问题:原本期望在cleanup中把isMobile的值保存到prevIsMobile,但赋值后两者状态出现同步问题,无法正确记录上一次的状态。
正确实现方案
无需沿用React的写法,直接在useVisibleTask$的主逻辑中更新prevIsMobile即可:
component$(() => { const isMobile = useSignal(true) const prevIsMobile = useSignal(true) useOnWindow( 'resize', $(() => { isMobile.value = window.innerWidth < 768 }) ) useVisibleTask$(({ track }) => { track(() => isMobile.value) isMobile.value = window.innerWidth < 768 if (prevIsMobile.value !== isMobile.value) { // 执行高成本计算 } prevIsMobile.value = isMobile.value }) // 其他逻辑 })
原因:在Qwik的useVisibleTask$中,cleanup是在任务销毁时执行的,而非每次状态更新后。直接在任务逻辑末尾更新prevIsMobile,能确保每次状态变化时都正确记录上一次的状态,从而准确判断是否发生了断点切换。
内容的提问来源于stack exchange,提问作者Max Huretski
相关产品推荐
相关产品推荐

