为 react-router 写一个可以缓存的 Route about blog HOT 11 OPEN

见过两个例子，一个是 react-keeper，一个是 taro 编译出来的 h5 页面，他们都是通过隐藏页面来实现的。
但是这种做法有几个问题：

1. 被隐藏的页面监听了全局滚动(例如用了一些滚动加载的组件)，即使旧页面被隐藏了，新页面的滚动还是会触发事件。同理还有音频和视频播放，页面隐藏不代表会自动暂停。

2. 旧页面组件的层级比新页面还高，例如 antd-mobile 的弹窗是脱离当前组件的元素单独在 body 下创建的，不一定会被新页面覆盖

3. 只要切换路由，都会创建新的对应组件。在 react-router 中，两个不同的路由如果指向同一个组件，那么在两个路由之间切换(replace)，组件是不会销毁的，只会更新。react-keeper 中的话会先销毁，再创建，在做 tabbar 的切换时很不方便。

from blog.

支持一个，mark

from blog.

支持，之前在项目中也意识到这个问题，当时没有找到楼主的方案，自己也实现了一套

思路比较简单，Route 部分没有重造，利用原有 Route children prop 传递 function 时可控渲染行为的特点，产生一个 HOC 组件完成缓存行为

Switch 部分在业务上有要求，所以有必要支持 Switch 中的缓存路由功能，方法是继承原有 Switch 并覆写 render 部分实现支持

目前存在的最大问题，难以突破的瓶颈是，如果是嵌套路由中，上层路由是原有 Route，下层路由的缓存行为便无法自控，上层 Route 如果被卸载，内部的缓存路由也将全部卸载...

由此看来，最好还是 React 本身能给出官方的 keep-alive 方案，实现真实 dom 节点的缓存和复用...

最后贴上自己的方案地址，与楼主有幸作为同一问题的探讨者

https://github.com/CJY0208/react-router-cache-route

from blog.

@CJY0208
Switch 与缓存其实是挺矛盾的，除非改变 Switch 「严格匹配第一个」的定义，目前 react-live-route 的处理方案是暂时放到 Switch 外面来。嵌套路由这种事感觉无解，整个 react 的哲学就决定了这种事......，感谢分享~

from blog.

@jamieYou 使用 react-router-cache-route，这 3 个问题都可以解决

1. 利用模拟的生命周期在被缓存时解除监听或停止媒体播放，恢复时重新挂载监听或继续播放。滚动方面还可以尝试的措施为不共用全局滚动而改为每个页面设立独立的滚动容器

2. 仅在旧页面被缓存时将旧页面 dom 节点隐藏，或者调整 z-index 将其压入最下层，新页面的渲染中不做任何样式上的干预

3. 在 react-router 基础上使用，行为可期

楼主的方案相同，理论上也可以解决

from blog.

@CJY0208 主要是解决起来很多功夫，为了做缓存反而多了其他坑出来维护，感觉不划算。
我还是期望 react 能自带 keep-alive 的功能

from blog.

在 Fiber 架构下，实现 keep-alive 是有可能的，保持对应那部分的 Fiber tree 不被卸载即可。
不过我觉这只能是 React 团队来实现，开发者改不了这个层面。

from blog.

@jamieYou 木有希望，官方目前明确表示不会支持，官方认为 keep-alive 带有缓存性质，是一个不纯行为，除了我们自己魔改拓展，目前别无他法

参考 facebook/react#12039 (comment)

from blog.

@CJY0208 好吧，在函数式面前凉凉

from blog.

@fi3ework 可以理解的啦

官方对 React 的定位和期望挺高的，是一个通用基础底层架构的存在

作为基础、具有函数式特征、兼容 ssr，从这几点来看的话，官方确实没必要为了某些便捷性而给 React 引入一个有隐患的特性

但也并没有完全阻止我们的魔改之路~~哈哈，不然也不会有今天的讨论了

@jamieYou 另外还找到了一个不一样的实现方案 react-keep-alive

原理大致是利用 createPortal 将被卸载的组件保留，总体上比借助 react-router 更接近 keep-alive 书写方式和行为预期

但测试中似乎无法保留滚动位置，可能和 createPortal 工作方式有关

from blog.

mark一下。
dan 说的方案，一种是将数据存放点分离开，一种是使用display: none
display: none 组件不会出发unmount 有一些绑定事件未必会被卸载
本质上应该都是如何缓存当前router 状态，当router再次命中如何render

from blog.