React 中的状态自动保存（KeepAlive）

时间 2019-11-09

原文原文链接

图文无关javascript

什么是状态保存？

假设有下述场景：vue

移动端中，用户访问了一个列表页，上拉浏览列表页的过程当中，随着滚动高度逐渐增长，数据也将采用触底分页加载的形式逐步增长，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，须要停留在离开列表页时的浏览位置上java

相似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增加，这里理解为状态，在交互过程当中，由于某些缘由须要临时离开交互场景，则须要对状态进行保存react

在 React 中，咱们一般会使用路由去管理不一样的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，因此上述列表页例子中，当用户从详情页退回列表页时，会回到列表页顶部，由于列表页组件被路由卸载后重建了，状态被丢失git

如何实现 React 中的状态保存

在 Vue 中，咱们能够很是便捷地经过 <keep-alive> 标签实现状态的保存，该标签会缓存不活动的组件实例，而不是销毁它们程序员

而在 React 中并无这个功能，曾经有人在官方提过功能 issues ，但官方认为这个功能容易形成内存泄露，表示暂时不考虑支持，因此咱们须要本身想办法了github

常见的解决方式：手动保存状态

手动保存状态，是比较常见的解决方式，能够配合 React 组件的 componentWillUnmount 生命周期经过 redux 之类的状态管理层对数据进行保存，经过 componentDidMount 周期进行数据恢复redux

在须要保存的状态较少时，这种方式能够比较快地实现咱们所需功能，但在数据量大或者状况多变时，手动保存状态就会变成一件麻烦事了api

做为程序员，固然是尽量懒啦，为了避免须要每次都关心如何对数据进行保存恢复，咱们须要研究如何自动保存状态缓存

经过路由实现自动状态保存（一般使用 react-router）

既然 React 中状态的丢失是因为路由切换时卸载了组件引发的，那能够尝试从路由机制上去入手，改变路由对组件的渲染行为

咱们有如下的方式去实现这个功能

重写 <Route> 组件，可参考 react-live-route
重写能够实现咱们想要的功能，但成本也比较高，须要注意对原始 <Route> 功能的保存，以及多个 react-router 版本的兼容
重写路由库，可参考 react-keeper
重写路由库成本是通常开发者没法承受的，且彻底替换掉路由方案是一个风险较大的事情，须要较为慎重地考虑

基于 <Route> 组件现有行为作拓展，可参考 react-router-cache-route

在阅读了 <Route> 的源码后发现，若是使用 component 或者 render 属性，都没法避免路由在不匹配时被卸载掉的命运

但将 children 属性看成方法来使用，咱们就有手动控制渲染的行为的可能，关键代码在此处
https://github.com/ReactTrain...

// 节选自 Route 组件中的 render 函数
  if (typeof children === "function") {
    children = children(props); // children 是函数时，将对 children 进行调用获得真实的渲染结果

    if (children === undefined) {
      ...

      children = null;
    }
  }

  return (
    <RouterContext.Provider value={props}>
      {children && !isEmptyChildren(children) 
        ? children // children 存在时，将使用 children 进行渲染
        : props.match
          ? component
            ? React.createElement(component, props)
            : render
              ? render(props)
              : null // 使用 render 属性没法阻止组件的卸载
          : null // 使用 component 属性没法阻止组件的卸载
      }
    </RouterContext.Provider>
  );

基于上述源码探究，咱们能够对 <Route> 进行拓展，将 <Route> 的不匹配行为由卸载调整为隐藏，以下

<Route exact path="/list">
    {props => (
        <div style={props.match ? null : { display: 'none' }}>
            <List {...props} />
        </div>
    )}
</Route>

上述是最简的调整方式，实际状况中也须要考虑隐藏状态下 match 为 null 致使组件报错的问题，且因为再也不是组件卸载，因此和 TransitionGroup 配合得很差，致使转场动画难以实现

使用 react-router-cache-route，获得的效果大体以下图，

上述探究了经过路由入手实现自动状态保存的可能，以及现有的实现，但终究不是真实的、纯粹的 KeepAlive 功能，接下来咱们尝试探究真实 KeepAlive 功能的实现

模拟真实的 `<KeepAlive>` 功能

如下是指望的使用方式

function App() {
  const [show, setShow] = useState(true)

  return (
    <div>
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      {show && (
        <KeepAlive>
          <Test />
        </KeepAlive>
      )}
    </div>
  )
}

实现原理提及来较为简单，因为 React 会卸载掉处于固有组件层级内的组件，因此咱们须要将 <KeepAlive> 中的组件，也就是其 children 属性抽取出来，渲染到一个不会被卸载的组件 <Keeper> 内，再使用 DOM 操做将 <Keeper> 内的真实内容移入对应 <KeepAlive>，就能够实现此功能

这里作了一个最简的、不到 70 行的 <KeepAlive> 实现示例：最简实现

如下是 react-activation 的实现效果

在线示例

下图为 <KeepAlive> 的实现原理说明

实际实现过程当中，遇到了许多问题，都是因为打破了原有 React 层级关系引发的，例如

渲染延迟（react-activation 中已修复）
Context 上下文功能失效（react-activation 中已修复）
Error Boundaries 失效（react-activation 中已修复）
React.Suspense & React.lazy 失效（react-activation 中已修复）
React 合成事件冒泡失效
其余未发现的功能
但上述问题，大多数是能够经过桥接机制修复的，具体能够参考此处 issues

相同的、更早的实现还有 react-keep-alive

结语

状态缓存是应用中十分常见的需求，在须要处理的数据量较少时，使用手动状态缓存就能够解决大多数问题，但当状况复杂时，还须要尝试将缓存功能单独拎出来解决，以便在业务开发过程当中更好地进行关注点分离

目前的实现都有各自的问题，但其探究过程十分有趣，最好的方式还是官方的支持，但目前还不能报太大指望