React是否像Vue js一样保持活力？

Question

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

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

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

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

当我使用Vue js时，我已经使用过＆＃39; keep-alive＆＃39;元件。 帮我。谢谢:)）

Answer 1

如果您正在使用react-router

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

如果路线不匹配，则组件将被卸载

阅读Route的源代码后，我们发现使用child 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道具，并将其渲染为组件那将不会被卸载。

Answer 2

keep-alive非常好。通常，如果要保留状态，可以使用Flux（Redux lib）设计模式将数据存储在全局存储中。您甚至可以将其添加到单个组件用例中，如果您愿意，也不要在其他任何地方使用它。

如果您需要保留组件，可以查看提升组件并添加＆＃34; display：none＆＃34;风格到那里的组件。这将保留节点，从而保留组件状态。

值得注意的还有＆＃34;键＆＃34; field帮助React引擎找出应该卸载哪个树以及应该保留什么。如果您具有相同的组件并希望在多个用法中保留其状态，请保持键值。相反，如果您想确保卸载，只需更改键值。

Answer 3

不幸的是，直到现在，遮阳篷仍然没有。但是React存储库中有一个问题：https://github.com/facebook/react/issues/12039

Answer 4

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