react 从商品详情页返回到商品列表页，列表自动滚动上次浏览的位置

现状：目前从商品详情页返回到商品列表页，还需要再去请求服务数据，还需要用户再去等待获取数据的过程，这样用户体验非常不好，

遇到的问题：

1：如何将数据缓存，

2：如何获取和保存列表滑动的高度，

3：判断商品列表页的上一个页面是什么？

如果是从搜索页进到商品列表页的话我们需要清除缓存，获取接口数据，

如果是商品详情页返回到商品列表页的话就用缓存数据，并且滑到到上次浏览的位置。

 一：数据缓存

 使用react全家桶reducers保存数据

  dispatch({
     type: types.PRODUCT_LIST,
     productlist: oldList.concat(data.result),
     totalPage: data.totalPage,
     curPage: page,
     totalCount: data.totalCount
  });

二：获取和保存列表滑动的高度

 在商品列表页销毁方法里记录滑动高度

    componentWillUnmount(){
        var top = $(document).scrollTop();
        window.sessionStorage.setItem("top",top);
        window.sessionStorage.setItem("isUseCacheProductList",false);
        
    }

 

三：判断商品列表页的上一个页面是什么

在商品详情页离开时劫持路由，判断如果是去商品列表页的话，就设置标识为true。

以下每一步都很关键

商品详情页代码：

import {Router} from 'react-router'

Product.contextTypes = {
    store: React.PropTypes.object,
    router: React.PropTypes.object.isRequired
};

    componentWillMount() {
        /* 发起请求 */
        this.props.actions.initState();
        this.context.router.setRouteLeaveHook(
            this.props.route,
            this.routerWillLeave
        )
    }

  routerWillLeave( nextLocation ){
        console.log("路由跳转---"+ nextLocation.pathname);
        if(nextLocation.pathname == '/product/list'){
        window.sessionStorage.setItem("isUseCacheProductList",true);
        }
  }

 

 在商品列表页获取isUseCacheProductList这个标识，如果为true，说明是商品详情页返回来的，那么久使用缓存数据，

商品列表页代码：

渲染函数里自动滑动到上次浏览位置

render() {
        const {store} = this.context;
        var isUseCache = 
        window.sessionStorage.getItem("isUseCacheProductList");
        var top =  window.sessionStorage.getItem("top");
        if(isUseCache == "true"){
            $("html,body").animate({scrollTop: top + "px"}, 0);
        }
}

 

 这里判断是否需要请求接口数据还是使用缓存数据

componentDidMount() {
        const {store} = this.context;
        var isUseCache = window.sessionStorage.getItem("isUseCacheProductList");
        if(isUseCache != "true"){
            this.props.actions.findProductList("", 1, store.getState().productTodos.pageSize, this.state.categoryId, this.state.keyword, [],isShowInStock,slectString,store.getState().commonTodos.userTypeCode);
        }
       
    }

 

 商品列表页销毁时记录滑动距离，重置 isUseCacheProductList 标识为false。

    componentWillUnmount(){
        //window.addEventListener('scroll', this.handleScroll);
        var top = $(document).scrollTop();
        window.sessionStorage.setItem("top",top);
        window.sessionStorage.setItem("isUseCacheProductList",false);
        console.log("距离顶部距离="+top)
    }