Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

activate 和 unactivate 间状态变更,组件渲染 和 eventBus 触发顺序不一致 #331

Open
youngBrain1893 opened this issue Nov 15, 2024 · 1 comment

Comments

@youngBrain1893
Copy link

当前组件的 activate 和 freeze 两个阶段 组件渲染eventBus 执行 顺序不一致,是否可保持统一

activate -> freeze: 先触发 eventBus,等待 1s 触发 freeze(冻结 React 组件)
相关代码:https://github.com/CJY0208/react-activation/blob/master/src/core/Keeper.js#L98-L113

this.eventBus.emit(LIFECYCLE_UNACTIVATE)
const listeners = [...this.listeners]
listeners
    .reverse()
    .forEach(([, listener]) => run(listener, [LIFECYCLE_UNACTIVATE]))

// 缓存后,延迟冻结,保证各项后续处理得以进行,如关闭弹窗等
clearTimeout(this.freezeTimeout)
this.freezeTimeout = setTimeout(() => {
    flushSync(() => {
        this.safeSetState({
            freeze: true,
        })
    })
}, 1000)

freeze -> activate: 立即触发 unfreeze(React 组件渲染),而后在 eventBus
相关代码:https://github.com/CJY0208/react-activation/blob/master/src/core/Keeper.js#L90-L93

// 激活后,立即解冻
this.safeSetState({
    freeze: false,
})
this.eventBus.emit(LIFECYCLE_ACTIVATE)

问题:由于先解冻,在触发 eventBus,从 freeze 到 activate 阶段第一次渲染无法感知到是缓存态的渲染还是已经激活后的渲染
我们的业务场景上使用 use-query-params(需要在缓存时使用进入缓存前的值(保证进入缓存到 freeze 的 1s 内不触发额外 url 变更响应),激活后使用最新的值)

@CJY0208
Copy link
Owner

CJY0208 commented Nov 21, 2024

不太明白你的场景是什么,能具体举例说明吗?听起来是缓存时延迟 freeze 导致了你们的 useQueryParams 获取了异常值,解冻时取到的值可能存在问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants