H5 页面列表缓存方案

时间  2021-04-08
标签 javascript html 前端 html5 java react git github 数据库 redux 栏目 JavaScript 繁體版
原文   原文链接

这是第 95 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注咱们吧~ 本文首发于政采云前端博客： H5 页面列表缓存方案

前言

在 H5 平常开发中，会常常遇到列表点击进入详情页面而后返回列表的状况，对于电商类平台尤其常见，像咱们日常用的淘宝、京东等电商平台都是作了缓存，并且不仅是列表，不少地方都用到了缓存。但刚才说的都是 App，在原生 App 中，页面是一层层的 View，盖在 LastPage 上，自然就可以保存上一个页面的状态，而 H5 不一样，从详情返回到列表后，状态会被清除掉，从新走一遍生命周期，会从新发起请求，会有新的状态写入，对于分页接口，列表很长，当用户翻了好几页后，点击详情看看商品详情后再返回列表，此时页面回到第一页，这样用户体验不好，若是在进入详情的时候将列表数据缓存起来，返回列表的时候用缓存数据，而不是从新请求数据，停留在离开列表页时的浏览位置；或者是可以像 App 那样，将页面一层层堆叠在 LastPage 上，返回的时候展现对应的页面，这样用户体验会好不少，本文简单介绍一下在本身在作列表缓存的时候考虑的几点，后附简单实现。

思考

状态丢失的缘由

一般在页面开发中，咱们是经过路由去管理不一样的页面，经常使用的路由库也有不少，譬如：React-Router，Dva-router...... 当咱们切换路由时，没有被匹配到的 Component 也会被总体替换掉，原有的状态也丢失了，所以，当用户从详情页退回到列表页时，会从新加载列表页面组件，从新走一遍生命周期，获取的就是第一页的数据，从而回到了列表顶部，下面是经常使用的路由匹配代码段。javascript

function RouterConfig({ history, app }) {
  const routerData = getRouterData(app);
  return (
    <ConnectedRouter history={history}>
      <Route
        path="/"
        render={(props) => <Layouts routerData={routerData} {...props} />}
        redirectPath="/exception/403"
      />
    </ConnectedRouter>
  );
}
// 路由配置说明（你不用加载整个配置，
// 只需加载一个你想要的根路由，
// 也能够延迟加载这个配置）。
React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.body)

如何解决

缘由找到了，那么咱们怎么去缓存页面或者数据呢？通常有两种解决方式：1. 路由切换时自动保存状态 。 2. 手动保存状态。在 Vue 中，能够直接使用 keep-alive 来实现组件缓存，只要使用了 keep-alive 标签包裹的组件，在页面切换的时候会自动缓存 失活 的组件，使用起来很是方便，简单例子以下。html

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

可是，React 中并无 keep-alive 这种相似的标签或功能，官方认为这个功能容易形成内存泄漏，暂不考虑支持。
前端

因此只能是在路由层作手脚，在路由切换时作对应的缓存操做，以前有开发者提出了一种方案：经过样式来控制组件的显示/隐藏，可是这可能会有问题，例如切换组件的时候没法使用动画，或者使用 Redux、Mobx 这样的数据流管理工具，还有开发者经过 React.createPortal API 实现了 React 版本的 React Keep Alive，而且使用起来也比较方便。第二种解决方案就是手动保存状态，即在页面卸载时手动将页面的状态收集存储起来，在页面挂载的时候进行数据恢复，我的采用的就是简单粗暴的后者，实现上比较简单。缓存缓存，无外乎就是两件事，存和取，那么在存、取的过程当中须要注意哪些问题呢？html5

我的认为须要注意的有如下几点：java

存什么？什么时候存？存在哪？什么时候取？在哪取？

存什么

首先咱们须要关心的是: 存什么？既然要缓存，那么咱们要存的是什么？是缓存整个 Component 、列表数据仍是滚动容器的 scrollTop 。举个例子，微信公众号里的文章就作了缓存，任意点击一篇文章浏览，浏览到一半后关闭退出，再一次打开该文章时会停留在以前的位置，并且你们能够自行测试一下，再次打开的时候文章数据是从新获取的，在这种场景下，是缓存了文章详情滚动容器的滚动高度，在离开页面的时候存起来，再次进入的时候拿到数据后跳转到以前的高度，除此以外，还有不少别的缓存的方式，能够缓存整个页面，缓存 state 的数据等等，这些均可以达到咱们想要的效果，具体用哪种要看具体的业务场景。react

什么时候存

其次，咱们须要考虑的是何时存，页面跳转时会有多种 action 导航操做，好比：POP、PUSH 、REPLACE 等，当咱们结合一些比较通用的路由库时，action 会区分的更加细致，对于不一样的 action 在不一样的业务场景下处理的方式也不尽相同，仍是拿微信公众号举例，文章详情页面就是无脑存，不管是 PUSH、POP 都会存高度数据，因此咱们不管跳转多少次页面，再次打开总能跳转到以前离开时的位置，对于商品列表的场景时，就不能无脑存了，由于从 List -> Detail -> List 须要缓存没问题，可是用户从 List 返回到其余页面后再次进入 List 时，是进入一个新的页面，从逻辑上来讲就不该该在用以前缓存的数据，而是从新获取数据。正确的方式应该是进行 PUSH 操做的时候存， POP 的时候取。git

存在哪

  1. 持久化缓存。 若是是数据持久化可存到 URL 或 localStorage 中，放到 URL 上有一个很好点在于肯定性，易于传播。但 URL 能够先 pass 掉，由于在复杂列表的状况下，须要存的数据比较多，所有放到 URL 是不现实的，即便能够，也会让 URL 显得极其冗长，显然不妥。 localStorage 是一种方式，提供的 getItem、setItem 等 api 也足够支持存取操做，最大支持 5M，容量也够，经过序列化 Serialize 整合也能够知足需求，另外 IndexDB 也不失为一种好的方式，WebSQL 已废弃，就不考虑了，详细可点击张鑫旭的这篇文章《HTML5 indexedDB前端本地存储数据库实例教程》查看对比。
  2. 内存。 对于不须要作持久化的列表或数据来讲，放内存多是一个更好的方式，若是进行频繁的读写操做，放内存中操做 I/O 速度快，方便。所以，能够放到 redux 或 rematch 等状态管理工具中，封装一些通用的存取方法，很方便，对于通常的单页应用来讲，还能够放到全局的 window 中。

什么时候取

在进入缓存页面的时候取，取的时候又有几种状况github

  1. 当导航操做为 POP 时取， 由于每当 PUSH 时，都算是进入一个新的页面，这种状况是不该该用缓存数据。
  2. 不管哪一种导航操做都进行取数据，这种状况须要和什么时候存一块儿看待。
  3. 看具体的业务场景，来判断取的时机。

在哪取

这个问题很简单，存在哪就从哪里取。数据库

CacheHoc 的方案

  • 存什么: 列表数据 + 滚动容器的滚动高度
  • 什么时候存: 页面离开且导航操做为 PUSH
  • 存在哪: window
  • 什么时候取: 页面初始化阶段且导航操做为 POP 的时候
  • 在哪取: window

CacheHoc 是一个高阶组件，缓存数据统一存到 window 内，经过 CACHE_STORAGE 收敛，外部仅须要传入 CACHE_NAME，scrollElRefs 便可，CACHE_NAME 至关于缓存数据的 key，而 scrollElRefs 则是一个包含滚动容器的数组，为啥用数组呢，是考虑到页面多个滚动容器的状况，在 componentWillUnmount 生命周期函数中记录对应滚动容器的 scrollTop、state，在 constructor 内初始化 state，在 componentDidMount 中更新 scrollTop。redux

简单使用

import React from 'react'
import { connect } from 'react-redux'
import cacheHoc from 'utils/cache_hoc'

@connect(mapStateToProps, mapDispatch)
@cacheHoc
export default class extends React.Component {
  constructor (...props) {
    super(...props)
    this.props.withRef(this)
  }

  // 设置 CACHE_NAME
  CACHE_NAME = `customerList${this.props.index}`;
  
  scrollDom = null

  state = {
    orderBy: '2',
    loading: false,
    num: 1,
    dataSource: [],
    keyWord: undefined
  }

  componentDidMount () {
    // 设置滚动容器list
    this.scrollElRefs = [this.scrollDom]
    // 请求数据，更新 state
  }

  render () {
    const { history } = this.props
    const { dataSource, orderBy, loading } = this.state

    return (
      <div className={gcmc('wrapper')}>
        <MeScroll
          className={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 => (
              <Card
                key={item.clienteleId}
                data={item}
                {...this.props}
                onClick={() =>
                  history.push('/detail/id')
                }
              />
            ))
          )}
        </MeScroll>
        <div className={styles['sort']}>
          <div className={styles['sort-wrapper']} onClick={this._toSort}>
            <span style={{ marginRight: 3 }}>最近下单时间</span>
            <img
              src={orderBy === '2' ? SORT_UP : SORT_DOWN}
              alt='sort'
              style={{ 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
      // 取 state
      if (action === 'POP') {
        const { state = {} } = window[storeName][this.CACHE_NAME]
        this.state = {
          ...state,
        }
      }
    }

    async componentDidMount () {
      if (super.componentDidMount) {
        await super.componentDidMount()
      }
      const { history: { action } = {} } = this.props
      if (action !== 'POP') return
      const { scrollTops = [] } = window[storeName][this.CACHE_NAME]
      const { scrollElRefs = [] } = this
      // 取 scrollTop
      scrollElRefs.forEach((el, index) => {
        if (el && el.scrollTop !== undefined) {
          el.scrollTop = scrollTops[index]
        }
      })
    }

    componentWillUnmount () {
      const { history: { action } = {} } = this.props
      if (super.componentWillUnmount) {
        super.componentWillUnmount()
      }
      if (action === 'PUSH') {
        const scrollTops = []
        const { scrollElRefs = [] } = this
        scrollElRefs.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只是最简单的一种实现，还有不少能够改进的地方，譬如：1. 直接存在 window 中有点粗暴，多页应用下存到 window 会丢失数据，能够考虑存到 IndexDB 或者 localStorage 中，另外这种方案若不配合上 mescroll 须要在 componentDidMount 判断 state 内的数据，如有值就不初始化数据，这算是一个 bug。

缓存方案纵有多种，但须要考虑的问题就以上几点。另外在讲述须要注意的五个点的时候，着重介绍了存什么和存在哪，其实存在哪不过重要，也不须要太关心，找个合适的地方存着就行，比较重要的是存什么、什么时候存，须要结合实际的应用场景，来选择合适的方式，可能不一样的页面采用的方式都不一样，没有固定的方案，重要的是分析存取的时机和位置。

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程