React 是否像 Vue js 一样具有 keep-alive 功能？

Question

我用 React js 做了一个待办事项列表。该网站有列表和详细信息页面。 有一个列表，1 个列表有 10 个项目。当用户滚动底部时，将加载下一页数据。

用户点击第 40 项 -> 观看详情页面（react-router） -> 点击返回按钮

主页面滚动页面顶部，再次获取第一页数据。

如何在不调用 Ajax 的情况下恢复滚动位置和数据？

当我使用 Vue js 时，我使用了“keep-alive”元素。 帮我。谢谢你:)

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，渲染成一个不会被卸载的组件。

Answer 2

keep-alive 真的很不错。通常，如果您想保留状态，您可以考虑使用 Flux (Redux lib) 设计模式将数据存储在全局存储中。如果您愿意，您甚至可以将其添加到单个组件用例中，而不是在其他任何地方使用。

如果您需要保留组件，您可以查看将组件提升并在那里为组件添加“显示：无”样式。这将保留节点，从而保留组件状态。

还值得注意的是，“key”字段帮助 React 引擎确定应该卸载哪些树以及应该保留哪些树。如果您有相同的组件并希望在多次使用中保留其状态，请维护键值。相反，如果您想确保卸载，只需更改键值即可。

Answer 3

不幸的是，到目前为止，遮阳篷还没有。但是在 React 存储库中有一个关于它的问题：https://github.com/facebook/react/issues/12039

Answer 4

在搜索相同的内容时，我发现了这个库，据说它正在做同样的事情。不过没用过 - https://www.npmjs.com/package/react-keep-alive