CJY0208 / react-activation

Hack <KeepAlive /> for React
https://www.npmjs.com/package/react-activation
MIT License
1.83k stars 144 forks source link

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

Open youngBrain1893 opened 1 week ago

youngBrain1893 commented 1 week ago

当前组件的 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 commented 6 days ago

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