如何用react实现vue的 keep-alive功能

Question

之前一直用的是react， 最近在看vue。 对于keep-alive这个功能感觉实在太好用了。
之前做 react 数据都用redux管理， 获取数据的时候就去判断数据的长度是否为0， 为0采取获取， 不为0不获取。 但是组件的内部state， 这些还是会丢失。

不知道怎么用react去实现 keep-alive那种效果。

Answer 1

配合 react-router 实现类似 <keep-alive> 的效果

react-router-cache-route

使用 <Route> 时，路由对应的组件在前进或后退无法被缓存，导致了数据和行为的丢失

例如：列表页滚动到底部后，点击跳转到详情页，返回后会回到列表页顶部，丢失了滚动位置和数据的记录

<Route> 中配置的组件在路径不匹配时会被卸载，对应的真实节点也将从 dom 树中删除

在阅读了 Route 的源码后发现可以将 children 当作方法来使用，以帮助手动控制渲染的行为

隐藏替代删除可以解决遇到的问题

使用方法

使用 <CacheRoute> 替换 <Route>

使用 <CacheSwitch> 替换 <Switch>

React 中真实的 <KeepAlive> 功能

vue 中有个 keep-alive 组件功能，但 React 官方未提供支持，这边也尝试做了实现

react-activation

在线示例

用法

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>
  )
}

效果

Answer 2

第一种方式是把数据全部缓存到 Redux 或者 Mobx 这类数据流管理工具中，另一种方式是直接使用样式（display: block | none）进行控制。

我觉得这样比较麻烦，所以自己写了一个组件 react-keep-alive；这个组件没有直接使用样式来进行控制，而是使用了 React 16.3 新出的 createPortal API 把组件都挂载到了 App 外面，然后把 DOM 移动到显示的位置来实现的缓存。这样做能够很好的与 React Router 结合，并且也可以在切换页面时使用动画。

Answer 3

https://github.com/rt2zz/redu...