反应像Vue js一样能维持生命吗？

Question

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

用户单击第40项->监视详细信息页(react路由器) ->单击后退按钮

主页滚动页的顶部，并再次获得第一页的数据。

如何不用Ajax调用恢复滚动位置和数据？

当我使用Vue js时，我使用了“保持活着”的元素。帮帮我。谢谢您:)

Answer 1

保持-活着真的很好。通常，如果您希望保留状态，可以使用Flux (Redux )设计模式将数据存储在全局存储中。您甚至可以将其添加到单个组件用例中，如果您愿意的话，不可以在其他任何地方使用它。

如果您需要保持组件的周围，您可以查看提升组件，并添加一个“显示:无”样式到那里的组件。这将保留节点，从而保持组件状态。

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

Answer 2

如果您正在使用react-router

组件在前进或后退时不能缓存，这会导致在使用Route时丢失数据和交互。

组件将在路由不匹配时卸载

在阅读了路由的源代码后，我们发现使用子支持作为一个函数可以帮助控制渲染行为。

隐藏而不是删除将修复此问题。

我已经用我的工具反应-路由器-缓存-路由修复了它

用法

将<Route>替换为<CacheRoute>

将<Switch>替换为<CacheSwitch>

如果您想要真正的<KeepAlive /> for 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>中的组件，即它们的children道具，并将它们呈现为不会被卸载的组件。

Answer 3

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