likes
comments
collection
share

基于react的列表缓存方案整理

作者站长头像
站长
· 阅读数 65

一、手动保存状态。配合react组件中的componentWillUnmount生命周期通过redux, sessionStorage之类的状态管理对数据进行保存，通过componentDidMount周期进行数据恢复。【数据量大&情况多变时手动保存逻辑麻烦】

  • 存什么：由于每次从详情页返回列表页需要重新获取数据，所以需要缓存的信息仅为查询条件以及页码
  • 何时存：页面跳转时会有多种action导航操作，比如POP, PUSH, REPLACE等。从详情页返回列表页需要使用缓存，但是从详情页跳到新的列表页，逻辑上来说不需要用之前缓存的数据而是重新获取数据。因此可以在PUSH操作的时候进行数据存储，在POP操作的时候使用缓存数据。
  • 存在哪：持久化localStorage，IndexDB，临时性本地存储sessionStorage，内存redux或rematch等状态管理工具，封装一些通用的存取方法。

文章地址：segmentfault.com/a/119000003…

二、通过路由实现状态自动保存，改变路由对组件的渲染行为。

  1. 为react-router重写一个缓存的Route组件。

    • 主要实现思路：通过样式来控制组件的现实/隐藏，并根据路由对应显示。

      正常的路由匹配规则就是通过path这个props来控制渲染/卸载，缓存路由匹配规则同样需要一个props来控制它的隐藏/恢复。因此可以给重写的Route组件LiveRoute一个额外的props来控制隐藏/恢复livePath路径即可。其规则可以直接套用path。

      LiveRoute内部有三中组件渲染状态：

      1）hide_render, livePath匹配则需要将LiveRoute渲染的组件隐藏，备份滚动位置，通过ReactDOM.findDOMNode获取路由渲染的组件的dom，display:none，并备份之前的display属性。

      2）normal_render_match：路由正常匹配上，调用原版Route的渲染方法，保存当前的context.router作为之后隐藏渲染时需要保持渲染所需要的router，在componentDidUpdate生命周期中查看时候有存在备份的滚动位置。

      3）normal_render_unmatch：正常渲染但是不匹配，即卸载当前路由。清空LiveRoute中保存的dom的引用

    • 存在的问题： 切换组件时无法使用转场动画，需要注意对原始<Route>功能的保存。

    • 现有插件：react-live-route

    • 文章地址： juejin.cn/post/684490…

    • git地址：github.com/fi3ework/re…

  1. 重写路由库

  2. 基于<Route>组件现有行为做拓展

    • 主要实现思路：通过样式来控制组件的现实/隐藏，并根据路由对应显示。 在Route中，使用component或render属性，都会在不匹配的时候被卸载，但是将children属性当方法使用，就有了手动控制渲染行为的可能。对<Route>的不匹配行为由卸载调整为隐藏。
    • 现有插件：react-router-cache-route
    • 文章地址：juejin.cn/post/684490…
    • git地址：github.com/CJY0208/rea…

  3. 基于<Route>以及<switch>组件现有行为做拓展

    • 主要思想：在切换页面的时候,组件销毁，但是作为渲染调度的react fiber保存keepalive状态。只要fiber存活，就能获取到dom元素，数据层state等信息。

      初始化 ： 整体设计思路第一次切入缓存页面的时候，会自动生成一个容器组件，缓存Route会把组件，交给容器组件来挂载，然后容器组件生成fiber,render之后生成对应的dom树，将dom树交给Route组件（也就是我们的正常的页面）。

      切换页面： 切换页面的时候，路由组件是肯定卸载的，这时候需要将我们的dom还给容器组件，然后容器组件进入冻结状态。

      再次切换到缓存页面：再次进入路由页面的时候,首先从容器中，发现有该页面的缓存，那么将容器解封状态，然后将dom树，还给当前路由页面。完成keepalive状态。

      缓存销毁： ： 项目支持销毁缓存功能，调用销毁方法,会卸载当前缓存容器，进一步销毁fiber 和 dom ，完成整个销毁功能。

    • 现有插件： react-keepalive-router

    • 文章地址：juejin.cn/post/692234…

    • git地址：github.com/GoodLuckAli…

转载自:https://juejin.cn/post/7038544396870123534
评论
请登录