cache-route

文档

github

有issue可以提这里哦～点击去github

在线示例

点击查看在线示例

在该示例中，PageA已经使用了CacheRoute；PageB使用的是默认的React-Router。

场景

当路由/a变为/b后，将由页面 A 跳转至页面 B。

假设，此时页面 A 已经有了填写一半的 Form 表单数据，并且我希望再次从路由/b切回/a的时候，表单数据依然存在。一个常见的方法是，将页面 A 的数据临时存放在状态管理工具里面，比如 redux。

但是在大多数时候，项目的状态并不复杂，多引入一个 redux 来单纯做这个事情，又有点大材小用，且增加代码复杂度。

所以需要一个库，用最低的成本，一样来实现这个事儿。

原理

<CacheRoute /> 的基本原理：因 <Route /> 组件的children 函数，具备忽视路由变化的特性，可以用来做页面缓存。 <CacheRoute /> 所做的主要工作是：进一步封装了 <Route children={...} /> ，并为常见的开发场景，提供了一系列 API。

基本用法

import React from "react";
import { HashRouter, Route } from "react-router-dom";
import CacheRoute from "CacheRoute";
import PageA from "./pages/a";
import PageB from "./pages/b";
 
function App() {
  return (
    <HashRouter>
      <CacheRoute path="/a" component={PageA} />
      <Route path="/b" component={PageB} />
    </HashRouter>
  );
}
 
export default App;

用 <CacheRoute /> 代替 <Route />后 ，其 component 将会被缓存。

故在上述例子中，PageA 组件将被缓存。

生命周期

在使用 <CacheRoute /> 后，将会为被包裹的组件，自动注入两个生命周期。分别是：

1、componentWillHide()

因页面被缓存，将不再被卸载。故 componentWillUnmount 生命周期将失效。每次离开页面，将触发 componentWillHide ，可代替 componentWillUnmount。

2、componentDidShow(lastProps, lastState)

因页面被缓存，将不再被卸载。故componentDidMount生命周期只会触发一次。第二次、第三次……进入页面，将触发 componentDidShow 。因可能存在特殊场景，componentDidShow 支持获取到跳出页面前的 props 和 state（很少会用到）。

Demo 如下：

import React from "react";
 
class PageA extends React.Component {
  componentDidShow = (lastProps, lastState) => {
    // 每次进入页面都会触发
    console.log("component did show");
    console.log("lastProps:", lastProps, "lastState:", lastState);
  };
 
  componentDidMount = () => {
    // 只会触发一次
    console.log("component did mount");
  };
 
  componentWillHide = () => {
    // 每次离开页面都会触发
    console.log("component will hide");
  };
 
  componentWillUnmount = () => {
    // componentWillUnmount将失效
    // 这个生命周期中的业务逻辑，需移至componentWillHide
  };
 
  render = () => {
    return (
      <div>
        <h1>Page A</h1>
        <div>
          <input />
        </div>
        <button onClick={() => this.props.history.push("/b")}>go page b</button>
      </div>
    );
  };
}
 
export default PageA;

API

目前 CacheRoute 提供了两个 API，分别是：

1、getPageVisible()

获取当前页面显隐状态。返回：true 或 false。

2、$CacheRouteInjectPageElement()

当页面被高阶函数包裹时使用，请务必调用$CacheRouteInjectPageElement()方法，把页面实例抛给CacheRoute

Demo 如下：

class PageA extends React.Component {
  constructor(props) {
    this.props.$CacheRouteInjectPageElement(this);
    super(props);
  }
 
  render = () => {
    const visible = this.props.getPageVisible();
    return visible ? "pageA可见" : "pageA隐藏";
  };
}
 
export default SomeHoc(PageA);