群晖的网站开发,专业做数据的网站有哪些方面,温州小程序制作,珠海网络推广咨询大家好#xff0c;我是若川#xff08;点这里加我微信 ruochuan12#xff0c;长期交流学习#xff09;。今天给大家介绍一下关于h5页面的列表缓存方案。感谢屏幕前的你一直关注着我。点击下方卡片关注我、加个星标#xff0c;或者查看源码等系列文章。学习源码整体架构系列… 大家好我是若川点这里加我微信 ruochuan12长期交流学习。今天给大家介绍一下关于h5页面的列表缓存方案。感谢屏幕前的你一直关注着我。点击下方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列前言在 H5 日常开发中会经常遇到列表点击进入详情页面然后返回列表的情况对于电商类平台尤为常见像我们平常用的淘宝、京东等电商平台都是做了缓存而且不只是列表很多地方都用到了缓存。但刚才说的都是 App在原生 App 中页面是一层层的 View盖在 LastPage 上天然就能够保存上一个页面的状态而 H5 不同从详情返回到列表后状态会被清除掉重新走一遍生命周期会重新发起请求会有新的状态写入对于分页接口列表很长当用户翻了好几页后点击详情看看商品详情后再返回列表此时页面回到第一页这样用户体验很差如果在进入详情的时候将列表数据缓存起来返回列表的时候用缓存数据而不是重新请求数据停留在离开列表页时的浏览位置或者是能够像 App 那样将页面一层层堆叠在 LastPage 上返回的时候展示对应的页面这样用户体验会好很多本文简单介绍一下在自己在做列表缓存的时候考虑的几点后附简单实现。思考状态丢失的原因通常在页面开发中我们是通过路由去管理不同的页面常用的路由库也有很多譬如React-Router (https://react-guide.github.io/react-router-cn/)Dva-router (https://dvajs.com/api/#dva-router)... 当我们切换路由时没有被匹配到的 Component 也会被整体替换掉原有的状态也丢失了。因此当用户从详情页退回到列表页时会重新加载列表页面组件重新走一遍生命周期获取的就是第一页的数据从而回到了列表顶部下面是常用的路由匹配代码段。function RouterConfig({ history, app }) {const routerData getRouterData(app);return (ConnectedRouter history{history}Routepath/render{(props) Layouts routerData{routerData} {...props} /}redirectPath/exception/403//ConnectedRouter);
}
// 路由配置说明你不用加载整个配置
// 只需加载一个你想要的根路由
// 也可以延迟加载这个配置。
React.render((RouterRoute path/ component{App}Route pathabout component{About}/Route pathusers component{Users}Route path/user/:userId component{User}//RouteRoute path* component{NoMatch}//Route/Router
), document.body)
如何解决原因找到了那么我们怎么去缓存页面或者数据呢一般有两种解决方式1. 路由切换时自动保存状态。2. 手动保存状态。在 Vue 中可以直接使用 keep-alive 来实现组件缓存只要使用了 keep-alive 标签包裹的组件在页面切换的时候会自动缓存 失活 的组件使用起来非常方便简单例子如下。!-- 失活的组件将会被缓存--
keep-alivecomponent v-bind:iscurrentTabComponent/component
/keep-alive
但是React 中并没有 keep-alive 这种类似的标签或功能官方认为这个功能容易造成内存泄漏暂不考虑支持 (https://github.com/facebook/react/issues/12039)。所以只能是在路由层做手脚在路由切换时做对应的缓存操作之前有开发者提出了一种方案通过样式来控制组件的显示/隐藏 (https://github.com/facebook/react/issues/12039)但是这可能会有问题例如切换组件的时候无法使用动画或者使用 Redux、Mobx 这样的数据流管理工具还有开发者通过 React.createPortal API 实现了 React 版本的 React Keep Alive (https://github.com/Sam618/react-keep-alive)并且使用起来也比较方便。第二种解决方案就是手动保存状态即在页面卸载时手动将页面的状态收集存储起来在页面挂载的时候进行数据恢复个人采用的就是简单粗暴的后者实现上比较简单。缓存缓存无外乎就是两件事存和取那么在存、取的过程中需要注意哪些问题呢个人认为需要注意的有以下几点存什么何时存存在哪何时取在哪取存什么首先我们需要关心的是存什么既然要缓存那么我们要存的是什么是缓存整个 Component、列表数据还是滚动容器的 scrollTop。举个例子微信公众号里的文章就做了缓存任意点击一篇文章浏览浏览到一半后关闭退出再一次打开该文章时会停留在之前的位置而且大家可以自行测试一下再次打开的时候文章数据是重新获取的在这种场景下是缓存了文章详情滚动容器的滚动高度在离开页面的时候存起来再次进入的时候拿到数据后跳转到之前的高度除此之外还有很多别的缓存的方式可以缓存整个页面缓存 state 的数据等等这些都可以达到我们想要的效果具体用哪一种要看具体的业务场景。何时存其次我们需要考虑的是什么时候存页面跳转时会有多种 action 导航操作比如POP、PUSH、REPLACE 等当我们结合一些比较通用的路由库时action 会区分的更加细致对于不同的 action 在不同的业务场景下处理的方式也不尽相同。还是拿微信公众号举例文章详情页面就是无脑存无论是 PUSH、POP 都会存高度数据所以我们无论跳转多少次页面再次打开总能跳转到之前离开时的位置对于商品列表的场景时就不能无脑存了因为从 List - Detail - List 需要缓存没问题但是用户从 List 返回到其他页面后再次进入 List 时是进入一个新的页面从逻辑上来说就不应该在用之前缓存的数据而是重新获取数据。正确的方式应该是进行 PUSH 操作的时候存POP 的时候取。存在哪持久化缓存。如果是数据持久化可存到 URL 或 localStorage 中放到 URL 上有一个很好点在于确定性易于传播。但 URL 可以先 pass 掉因为在复杂列表的情况下需要存的数据比较多全部放到 URL 是不现实的即使可以也会让 URL 显得极其冗长显然不妥。localStorage 是一种方式提供的 getItem、setItem 等 api 也足够支持存取操作最大支持 5M容量也够通过序列化 Serialize 整合也可以满足需求另外 IndexDB 也不失为一种好的方式WebSQL 已废弃就不考虑了详细可点击张鑫旭的这篇文章《HTML5 indexedDB前端本地存储数据库实例教程》(https://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/)查看对比。内存。对于不需要做持久化的列表或数据来说放内存可能是一个更好的方式如果进行频繁的读写操作放内存中操作 I/O 速度快方便。因此可以放到 Redux 或 Rematch 等状态管理工具中封装一些通用的存取方法很方便对于一般的单页应用来说还可以放到全局的 window 中。何时取在进入缓存页面的时候取取的时候又有几种情况当导航操作为 POP 时取因为每当 PUSH 时都算是进入一个新的页面这种情况是不应该用缓存数据。无论哪种导航操作都进行取数据这种情况需要和何时存一起看待。看具体的业务场景来判断取的时机。在哪取这个问题很简单存在哪就从哪里取。CacheHoc 的方案存什么列表数据 滚动容器的滚动高度何时存页面离开且导航操作为 PUSH存在哪window何时取页面初始化阶段且导航操作为 POP 的时候在哪取windowCacheHoc 是一个高阶组件缓存数据统一存到 window 内通过 CACHE_STORAGE 收敛外部仅需要传入 CACHE_NAMEscrollElRefs 即可CACHE_NAME 相当于缓存数据的 key而 scrollElRefs 则是一个包含滚动容器的数组为啥用数组呢是考虑到页面多个滚动容器的情况在 componentWillUnmount 生命周期函数中记录对应滚动容器的 scrollTop、state在 constructor 内初始化 state在 componentDidMount 中更新 scrollTop。简单使用import React from react
import { connect } from react-redux
import cacheHoc from utils/cache_hocconnect(mapStateToProps, mapDispatch)
cacheHoc
export default class extends React.Component {constructor (...props) {super(...props)this.props.withRef(this)}// 设置 CACHE_NAMECACHE_NAME customerList${this.props.index};scrollDom nullstate {orderBy: 2,loading: false,num: 1,dataSource: [],keyWord: undefined}componentDidMount () {// 设置滚动容器listthis.scrollElRefs [this.scrollDom]// 请求数据更新 state}render () {const { history } this.propsconst { dataSource, orderBy, loading } this.statereturn (div className{gcmc(wrapper)}MeScrollclassName{gcmc(wrapper)}getMs{ref (this.scrollDom ref)}loadMore{this.fetchData}refresh{this.refresh}up{{page: {num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 15 // 每页数据的数量// time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;}}}down{{ auto: false }}{loading ? (div className{gcmc(loading-wrapper)}Loading //div) : (dataSource.map(item (Cardkey{item.clienteleId}data{item}{...this.props}onClick{() history.push(/detail/id)}/)))}/MeScrolldiv className{styles[sort]}div className{styles[sort-wrapper]} onClick{this._toSort}span style{{ marginRight: 3 }}最近下单时间/spanimgsrc{orderBy 2 ? SORT_UP : SORT_DOWN}altsortstyle{{ width: 10, height: 16 }}//div/div/div)}
}效果如下:缓存的数据:代码const storeName CACHE_STORAGE
window[storeName] {}export default Comp {return class CacheWrapper extends Comp {constructor (props) {super(props)// 初始化if (!window[storeName][this.CACHE_NAME]) {window[storeName][this.CACHE_NAME] {}}const { history: { action } {} } props// 取 stateif (action POP) {const { state {} } window[storeName][this.CACHE_NAME]this.state {...state,}}}async componentDidMount () {if (super.componentDidMount) {await super.componentDidMount()}const { history: { action } {} } this.propsif (action ! POP) returnconst { scrollTops [] } window[storeName][this.CACHE_NAME]const { scrollElRefs [] } this// 取 scrollTopscrollElRefs.forEach((el, index) {if (el el.scrollTop ! undefined) {el.scrollTop scrollTops[index]}})}componentWillUnmount () {const { history: { action } {} } this.propsif (super.componentWillUnmount) {super.componentWillUnmount()}if (action PUSH) {const scrollTops []const { scrollElRefs [] } thisscrollElRefs.forEach(ref {if (ref ref.scrollTop ! undefined) {scrollTops.push(ref.scrollTop)}})window[storeName][this.CACHE_NAME] {state: {...this.state},scrollTops}}if (action POP) {window[storeName][this.CACHE_NAME] {}}}}
}总结以上的 CacheHoc 只是最简单的一种实现还有很多可以改进的地方譬如直接存在 window 中有点粗暴多页应用下存到 window 会丢失数据可以考虑存到 IndexDB 或者 localStorage 中另外这种方案若不配合上 mescroll 需要在 componentDidMount 判断 state 内的数据若有值就不初始化数据这算是一个 bug。缓存方案纵有多种但需要考虑的问题就以上几点。另外在讲述需要注意的五个点的时候着重介绍了存什么和存在哪其实存在哪不太重要也不需要太关心找个合适的地方存着就行比较重要的是存什么、何时存需要结合实际的应用场景来选择合适的方式可能不同的页面采用的方式都不同没有固定的方案重要的是分析存取的时机和位置。最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信 ruochuan12 拉你进群。················· 若川出品 ·················今日话题还有最后一天上班就放五一小长假啦努力让内心喜悦不被发现虽然扣除2天补班, 2天周末实际天只有1天假期~哈哈但是能连着休息5天也还是很不错哦。趁着小长假可以好好放休息休息整理一下之前没及时整理的东西大家五一都有什么计划呢欢迎在下方留言~ 欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你现在还能加我进模拟面试群若川知乎问答2年前端经验做的项目没什么技术含量怎么办点击上方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列
