@cxkit/version-react

@cxkit 针对 React (v18+) 生态量身定做的高度解耦的前端发版检查订阅插件。

完美基于 React 官方新架构范式钩子 useSyncExternalStore，杜绝任何声明周期冲突引起的重绘和僵尸监听事件，轻轻松松打通。

安装

npm install @cxkit/version-react

接入指南

1. 执行全局初始化 initVersionUpdate(options)

强行要求： 在组件渲染树之前（比如你的 index.tsx 或 main.tsx），先进行一次唯一初始化调用，它将把所有的底层轮询和监听常驻内存而不占用 React Context。

import { initVersionUpdate } from '@cxkit/version-react'

initVersionUpdate({
  pollInterval: 1000 * 60 * 10,  // 每 10 分钟自动检查 version.json
})

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />)

2. (基础使用) 挂载无状态 UI 组件 <VersionUpdateBanner />

我们在包内部实现了一个具有丝滑过渡交互的自研悬浮通知带。你可以不用自己手写弹窗了，直接在任意能够处于活动状态的 Layout 或顶层 App 层级下扔进入口组件。

import { VersionUpdateBanner } from '@cxkit/version-react'
import '@cxkit/version-react/style.css'

export default function App() {
  return (
    <>
      <VersionUpdateBanner 
        title="网站内容变更"
        message="有全新的内容已被推送到服务器，为了最好的体验建议刷新重载。"
      />
      
      <Router />
    </>
  )
}

3. (高阶解耦) 自由化 Hooks 状态读取 useVersionUpdate()

当且仅当你不想用预置组件，而想对接诸如 Material-UI、Ant Design 自己排版，或是希望将是否有更新作为某种数据驱动红点显示，可以按需使用解构 Hooks API：

import { useVersionUpdate } from '@cxkit/version-react'
import { Modal } from 'antd'

function LayoutLayer() {
  // `useSyncExternalStore` 实现的内部桥接引擎，状态自动响应！
  const { hasPendingUpdate, latestVersion, confirm, defer } = useVersionUpdate()

  return (
    <Modal
      open={hasPendingUpdate}
      footer={[
        <Button onClick={() => defer()}>稍后再说</Button>,
        <Button onClick={confirm}>立刻刷新</Button>
      ]}
    >
      全新升级 V{latestVersion}，速度体验吧。
    </Modal>
  )
}

阅读完整文档

详细接入流程与 API 清单请访问 官方开发文档。