react-router-cache-route — 页面缓存插件

react-router-cache-route — 页面缓存插件

功能

此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。

简介

搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。

原理

Route 中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 dom 树中删除，利用Route暴露的children方法，让我们手动控制渲染。

安装

注意：作者测试使用时版本为1.4.6

npm install react-router-cache-route --save

注意事项

• 缓存语句不要写在 Switch 组件当中，因为 Switch组件会卸载掉所有非匹配状态下的路由，需使用 CacheSwitch 替代 Switch。

• 使用 when 属性决定何时使用缓存功能，可选值为 [forward, back, always] ，默认值为 forward。

• 使用 className 属性给包裹组件添加自定义样式。

• 也可以使用 behavior 属性来自定义缓存状态下组件的隐藏方式，工作方式是根据 CacheRoute 当前的缓存状态，返回一个作用于包裹组件的 props。

代码示例

路由改写

import React from 'react'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

import List from './components/List'
import Item from './components/Item'

import List2 from './components/List2'
import Item2 from './components/Item2'

const App = () => (
  <Router>
    {/*
      也可使用 render, children prop
      <CacheRoute exact path="/list" render={props => <List {...props} />} />
      或
      <CacheRoute exact path="/list">
        {props => <List {...props} />}
      </CacheRoute>
      或
      <CacheRoute exact path="/list">
        <div>
          支持多个子组件
        </div>
        <List />
      </CacheRoute>
    */}
    <CacheRoute exact path="/list" component={List} when="always" /> 
    <Switch>
      <Route exact path="/item/:id" component={Item} />
    </Switch>

    <CacheSwitch>
      <CacheRoute 
        exact 
        path="/list2" 
        component={List2} 
        className="custom-style"
        behavior={cached => (cached ? {
          style: {
            position: 'absolute',
            zIndex: -9999,
            opacity: 0,
            visibility: 'hidden',
            pointerEvents: 'none'
          },
          className: '__CacheRoute__wrapper__cached'
        } : {
          className: '__CacheRoute__wrapper__uncached'
        })}
      />
      <Route exact path="/item2/:id" component={Item2} />
      <Route
        render={() => (
          <div>404 未找到页面</div>
        )}
      />
    </CacheSwitch>
  </Router>
)

export default App

额外的生命周期

使用 CacheRoute 的组件将会得到一个名为 cacheLifecycles 的属性，里面包含两个额外生命周期的注入函数 didCache 和 didRecover，分别用在组件 被缓存 和 被恢复 时

import React, { Component } from 'react'

export default class List extends Component {
  constructor(props, ...args) {
    super(props, ...args)
    props.cacheLifecycles.didCache(this.componentDidCache)
    props.cacheLifecycles.didRecover(this.componentDidRecover)
  }
  
  componentDidCache = () => {
    console.log('List cached')
  }

  componentDidRecover = () => {
    console.log('List recovered')
  }

  render() {
    return (
      // ...
    )
  }
}

注意：

• 在使用该插件的页面中，使用了轮播图时，在低版本的react-router-cache-route，在返回该页面内，轮播图会停止轮播。需要手动处理
• 返回页面后，该页面有多个儿子但享用同一个页面渲染（如；多篇文章的入口，文章的详情页面），进入第二篇文章详情时，里面的内容是第一篇的内容，这是 低版本问题。高版本已有解决方案。