react记录页面的滚动条位置

从数据较多的列表页进入详情页返回时，列表页恢复原来的状态。

需求：

从一个横向纵向都有滚动条的列表页进入详情页，返回时列表页的活动条恢复到之前到位置。

难点：

1.列表用的是antd的table组件，滚动条是这个table组件的，浏览器返回时自身可以记录页面即document的滚动条，但不能记录某一个元素的滚动条。

2.数据加载，每次进去列表页时数据都会重新加载，列表的初始值都为空，表头也需要动态加载，所以返回页面时，整个列表是没有高度和宽度的，所以即使设一个初始的滚动条位置也不会生效。

解决方案：

1. 设置列表数据初值

在离开列表页时将加载列表相关的数据存储到本地，或者放到redux里，返回页面时可以直接取值，列表不会没有宽高。在列表页初始化时即constructor 时就可以将存下来的数据取出赋值。

2.设置列表滚动条位置初值

审查列表页渲染以后的节点，找到滚动条所对应的元素，并将其作为目标元素操作dom。

离开页面时记录滚动条的位置，在生命周期didmount 里操作dom设置滚动条的初始位置。

离开页面时可以是componentWillUnmount或者是页面跳转前。

操作dom时用原生js的方法和ReactDom得ReactDom.FindDOMNode方法结合。

部分代码：

componentDidMount() {
    var Btn = document.getElementsByClassName('ant-table-body')[0]
    const scrollLeft = localDb.get('scrollLeft') || 0;
    const scrollTop = localDb.get('scrollTop') || 0;
    // 设置滚动条的位置
    ReactDOM.findDOMNode(Btn).scrollTo(scrollLeft, scrollTop);
    let params = {}
    const { initDate } = this.state
    params.beginDate = initDate[0]
    params.endDate = initDate[1]
    this.loadData(params)
}
componentWillUnmount() {
   // 通过审查元素找到滚动条的盒子元素类
    const scrollLeft = document.getElementsByClassName('ant-table-body')[0].scrollLeft;
    const scrollTop = document.getElementsByClassName('ant-table-body')[0].scrollTop;
    const {
      wid,
      checkedUUids,
      org,
      data,
      type
    } = this.state
    localDb.set('scrollLeft', scrollLeft);
    localDb.set('scrollTop', scrollTop);
}
复制代码

后记

今天一个朋友问我要怎么react后退不刷新时，我告诉他了我的这种实现方式，不难但是复杂。一直以来用vue开发的他，发出了这么一声感叹，然后告诉我vue只要在组件外包一层keep-alive就可以记录组件的状态了，呃真的真的是灰常简单啊。

转载于:https://juejin.im/post/5b80117bf265da432a6ae1dc