希望能添加配置来设置最大缓存数量 about react-router-cache-route HOT 11 CLOSED

自动删除某些缓存可能不会是一个可预期的行为

我可以尝试增加 getCachingNodes 方法，返回缓存中的组件实例

实例上增加 createTime 和 updateTime 属性，分别表示缓存节点的创建时间和缓存状态变化时间

这样可以由使用者自己来主动拓展出上述功能，也不会影响 cache-route 本身

如何呀？

from react-router-cache-route.

@vimcaw

v1.7.0 上增加了 getCachingComponents 功能，将返回一个 cachingComponentMap 对象结构，以 cacheKey 为键，以 CacheComponent 实例为值

值上将附带 __cacheCreateTime 及 __cacheUpdateTime 属性，分别表示缓存节点的创建时间和缓存状态变化时间

看看是否能满足功能，暂不写进 README 中

from react-router-cache-route.

可以，非常感谢！只要能识别时间先后的顺序就行。

from react-router-cache-route.

ok，一会儿我试试，好了通知

from react-router-cache-route.

@CJY0208 更新了看了下，确实有了，感谢！另外如果方便的话可以提供个回调函数吗，在缓存一个新页面后调用回调，这样会更方便。

from react-router-cache-route.

这个功能跟着 react-router 本身的 history 走就行了，用 history.listen 增加监听

cache-route 缓存状态的变化必然是因为 router 发生变化引起的

from react-router-cache-route.

OK，完美解决，非常感谢！

from react-router-cache-route.

@CJY0208 不知道是不是我写的有问题，我测试了下dropByCacheKey好像没反应，

代码如下：

const MAX_NUMBER_OF_CACHES = 2;

const caches = getCachingComponents();
const cacheKeys = Object.keys(caches);
console.log(caches);

if (cacheKeys.length > MAX_NUMBER_OF_CACHES) {
  // 找到最早更新缓存的组件，清除缓存
  const timeCompare = (a, b) => caches[a].__cacheUpdateTime < caches[b].__cacheUpdateTime;
  const oldestCacheKey = cacheKeys.reduce((resultKey, currentKey) =>
    (!resultKey || timeCompare(currentKey, resultKey)) ? currentKey : resultKey, '');

  dropByCacheKey(oldestCacheKey);
  console.log('drop cache: ', oldestCacheKey);
}

这里为了测试，把最大缓存数量设置为两个，大概的逻辑是大于两个就清除最早更新的缓存，但是进入下一个页面时清除的那个还在。

控制台输出：

from react-router-cache-route.

看起来似乎尝试清除的缓存节点是刚被新建的那个？例如正要去往 /user-center 而尝试清除 /user-center

可能由于时序原因，在 history.listen 的瞬间新建的节点处于缓存状态所以被列在了 cachingComponents 中，但其实它是即将被激活的路由，所以可能是清不掉的

from react-router-cache-route.

对，确实是这样，对比了一下我发现 __cacheUpdateTime 好像不太对劲，有的后面进入的页面的缓存更新时间反而比前面进入的更早
浏览路径为：/message > /user-center > /services
控制台输出：

from react-router-cache-route.

缓存更新时间貌似有点奇怪。

浏览路径还是：/message > /user-center > /services

控制台时间格式化输出：

from react-router-cache-route.