Skip to main content

v5

React-router Route 静止路由​

这个例子分别展示了 state 与 dom 的缓存

其中, Home 页签中的计数器不会因为路由变化而更新,因为它被静止了. 而 list 页签中的列表滚动之后会一直记忆上次的位置,因为它也被静止了.

当然,点击 clear 按钮之后,计数器和列表的缓存状态会被清空.

React-router Switch 静止路由切换​

这个例子中使用了 Switch 的相关特性

Title: StillnessSwitch

这里的 StillnessSwitch 是基于 withRouter 封装的组件,正如简述中所说, react-stillness-component 是基础库,可以在其上再次进行组合和封装

因为官方提供的 switch 会默认卸载掉其他路由,所以这里封装的组件在保留了 switch 的匹配功能之外,还针对路由做了缓存处理,这样每一个路由默认就是可以静止的,如果想自己控制,也可以通过各种原生能力来支持,比如:props,相比于原版的代码,仅仅只是不卸载其他路由而已

如果有更好的思路,欢迎讨论!