缓存反应路由器路由

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不匹配时组件会被卸载

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

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

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

用法

<Route>用。。。来代替<CacheRoute>

<Switch>用。。。来代替<CacheSwitch>

如果你想要真正<KeepAlive />的React

我有我的实施反应激活

在线演示

用法

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>，即它们的childrenprops，并将它们渲染成不会被卸载的组件。