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

Question

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

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

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

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

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

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

Answer 2

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

如果您需要保留该组件，您可以考虑将组件升起并向那里的组件添加“display: none”样式。这将保留节点，从而保留组件状态。

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