React 有没有像 Vue js 一样有 keep-alive？

Question

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

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

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

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

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

Answer 1

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

如果您需要将组件保留在周围，您可以考虑将组件提升并向那里的组件添加 "display: none" 样式。这将保留节点以及组件状态。

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

Answer 2

到目前为止，不幸的是答案是否定的。但是在 React 存储库中有一个问题：https://github.com/facebook/react/issues/12039

Answer 3

如果您正在使用 react-router

在前进或后退时无法缓存组件，这导致在使用 Route

时 丢失数据和交互

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

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

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

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

用法

将<Route>替换为<CacheRoute>

将<Switch>替换为<CacheSwitch>

---

如果你想要真正的 <KeepAlive /> for 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>中的组件，即它们的childrenprops，并将它们渲染到一个不会被卸载的组件。

Answer 4

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