react 返回一个页面_React页面返回上一页时恢复原来页面的状态

需求：

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

难点：

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

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

解决方案：

1.设置列表数据初值

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

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

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

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

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

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