详情页回退到列表页之react-keeper

项目背景：react项目、使用react-router、未使用redux

本次需求：希望详情页回退到列表页，列表页的状态维持之前的状态不变

想到的方案：

• 引入redux
• 使用localStorage
• react-router传参的方式
• 度娘的答案：react-keeper

每种方案的利弊：

1. 由于项目从一开始就没有使用redux并且已经上线使用一段时间，我觉得这个时候添加redux实在没必要又麻烦
2. 由于需要改的模块太多，localstorage需要存很多key，有点乱，第二条也待定
3. react-router传参解决（列表要传参到详情，详情返回列表时需要带回参数，列表页用带回来的参数重新请求数据）
4. react-keeper，是基于react-router并且对react-router的扩展，比如缓存...刚好是现在需要的功能，跃跃欲试中 0_0

---

下面是这次替换为react-keeper用到的，大概总结一下

真不知道我是怎么坚持改完的！！！要用react-keeper完全替换react-router

两种方式 传参、获取参数的方式都不一样，很多个模块很多个文件很多地方...现在回过头来想想，其实用redux也挺好~

友情提示： 改完之后每个模块每个功能都要仔细测一遍0.0

• react-keeper-npm 参考文档
• Doc md文档

/* App.js */

import { BrowserRouter, Route } from 'react-keeper'


  

       // 这里path中的'>'和react-router中的exact大同小异
    
    
  

• ，keeper目前没有采用react-router中的switch、exact方案，而是类似正则$标识结束的方式，比如上面例子中path='/>'中的'>'
• 更多请参考-RouteMapping.md

/* List.js */

import { CacheLink } from 'react-keeper'
/* to只能是string，state 是 object，可以用state传参 */

• 直接采用了CacheLink的方式做缓存，用state来传参。当然还有其他缓存方式，比如，这个大家可以自己研究一下
• 更多请参考-CacheLink.md

/* Detail.js */

import React from 'react'
import { Control } from 'react-keeper'
class Detail extends React.PureComponet {
  componentDidMount() {
  /* 其他页面可以使用Control.state获取传过来的参数 */
     const { item, id } = Control.state || {}  
  }
  onHandleClick = () => {
    /* 返回上一页，也可以这样-- Control.go(path, state) */
    Control.go(-1)
  }
  render() {
    return(
      
取消
    )
  }
}

• 这里采用Control.state获取参数，使用Control.go(-1)回到上一页，如果想回到上两页，参数可以是-2、-3 以此类推
• 下面是模拟出来的效果，具体表现在 — 缓存了页面滚动的位置
• 更多请参考 Control.md
  
  缓存列表页模拟.GIF

ok！解决~~~~~~~

但事情往往要比想象的复杂很多，比如现在...，项目中有一些场景是希望既缓存当前的页数、搜索框的搜索条件，又想把详情页做的数据更改反应在列表页的数据中...

按理说这种有分页的页面是不做缓存的，不过既然这么要求了也不是不能实现，这里就react-keeper，我想到两种解决方案

1. 使用Link实现，不做缓存，跳详情页的时候将页码和搜索条件带过去，返回列表页时再将数据带回来然后再请求数据（和文章开头react-router的解决方案一样）

2. 使用CacheLink实现，列表页使用监听函数监听，详情页更改数据后将数据传回列表页，列表页监听到变化后使用setState修改某一条数据

这里只展示第二个方案（使用CacheLink实现）：

/* List.js */

import { CacheLink } from 'react-keeper'
class List extends React.PureComponent {
  state = {
    item: [],
    isModify: false
  }

  /* 这里用Control.history.listen函数监听数据的变化并且利用setState修改对应的值 */
  componentDidMount() {
    Control.history.listen((data) => {
      const { item, isModify } = data.state || {}
      this.setState({
        item,
        isModify
      })
    }
  }

  render() {
    const { item, isModify } = this.state
    return (
      
    )
  }
}

• 列表页使用Control.history.listen监听数据的变化，回调函数返回的数据长下面这样

  
  
  Control.history.listen回调函数返回的数据

使用心得

我觉得既然做了缓存，还要修改该页面的数据并不太适合用CacheLink，这样并不能发挥它的优势

所以我建议还是纯浏览的列表页使用CacheLink更好一些

最后决定还是把学习英语提上日程，以防某些文档只有英文版，看的那个费劲吆 - -