router-cache

react-router-dom v6 cache

文档

在线 demo

安装

npm i @qse/router-cache

使用

import React from 'react'
import { withCache } from '@qse/router-cache'
import { useRoutes } from 'react-router-dom'

const List = withCache(() => <div>list</div>)
const Item = () => <div>item</div>

const APP_ROUTES = [
  {
    path: '/list',
    element: <List />,
    children: [{ path: ':id', element: <Item /> }],
  },
]

const App = () => useRoutes(APP_ROUTES)

export default App

原理

使用 react-freeze 实现组件冻结

冻结特性

• 组件无法感知冻结状态，因为在进入冻结状体时，所有 hooks 都停止工作了
• 冻结状态的组件不会执行 hooks，也不会刷新视图，dom
• 副作用函数还是会执行，例如 window.addEventListener

解冻特性

• 组件能够感知解冻状态，可以通过对比解冻前后 Date.now()
• 解冻后组件会使用最新的数据刷新一遍视图