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就能夠記錄組件的狀態了，呃真的真的是灰常簡單啊。