javascript - 缓存 react 路由器路由

Question

我有以下代码:

<View>
  <Header />
  <List />
</View>

如果用户单击列表项中的编辑按钮，react-router 会将页面从 /list 更改为 /list/{itemId}。这是一个新页面。用户填写一些信息并点击保存后，react-router 变回 /list。现在，完整的 /list 页面已重新渲染!

有没有办法缓存页面，以便 react 可以检测到更改并仅重新渲染它们，而不是再次渲染整个页面？

还应该可以直接渲染页面(而不是通过 /list -> /list/{itemId})，因此没有 modal > 我认为的解决方案。

我正在使用 react-router-redux v5.0.0-alpha.9 因此解决方案应该与其兼容。它还应该与 react-native 和 react-dom 兼容。

Answer 1

如果您正在使用react-router

组件在前进或后退时无法缓存，这会导致使用 Route 时丢失数据和交互

当路由不匹配时，组件将被卸载

阅读 Route 的源代码后，我们发现使用 Children prop 作为函数可以帮助控制渲染行为。

隐藏而不是删除可以解决此问题。

我已经用我的工具修复了它 react-router-cache-route

用法

替换<Route>与 <CacheRoute>

替换<Switch>与 <CacheSwitch>

<小时/>

如果你想要真实的 <KeepAlive />对于 React

我有我的实现 react-activation

Online Demo

用法

import KeepAlive, { AliveScope } from 'react-activation'

function App() {
  const [show, setShow] = useState(true)

  return (
    <AliveScope>
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      {show && (
        <KeepAlive>
          <Test />
        </KeepAlive>
      )}
    </AliveScope>
  )
}

实现原理很好说。

因为React将卸载内在组件层次结构中的组件，我们需要提取 <KeepAlive> 中的组件，即他们的children props，并将它们渲染成不会被卸载的组件。