导言

在实际开发中，往往会碰到一些场景，在一个鼠标滚轮滚动过一定位置的列表中，点击一个具体的列表项，跳到了这个列表项的详情页，当返回的时候，为了保持良好的用户体验，希望在回到列表的时候，还能回到之前列表滑动到过的位置。

scrollRestoration

在chrome 46之后，history引入了scrollRestoration属性，这个属性有提供两个值，第一个是auto，作为它的默认值，基于元素进行位置记录，浏览器会原生记录下window中某个元素的滚动位置，不管是浏览器强制刷新切换页面，还是pushState，replaceState改变页面状态，可能由于一些操作滚动条会变，但是这个属性始终让元素能恢复到之前的屏幕范围内，但是要注意，只能记录下在window中滚动的元素，如果是某个容器中的局部滚动，浏览器是无法识别出的，事实上元素在某个容器或者容器的容器中时，浏览器并不知道你想要保存哪个dom的滚动位置，所以这种情况会失效。在IE于Safari目前也不支持这个属性。对于另一个属性manual，这等于把属性设置为手工进行，这将丢失上述原生的恢复能力，在是浏览器强制刷新切换页面，或者pushState，replaceState改变页面状态时，滚动条都会回到顶部。

容器元素滚动恢复

为了实现容器滚动恢复，具体的思路是，在路由切换，元素即将消失于屏幕前，记录下元素的滚动位置，元素重新渲染，或者出现于屏幕中时，再恢复这个元素的滚动位置。得益于React-Router的设计思路，类似Router组件负责搜集location变化，并把状态向下传递，设计滚动管理组件ScrollManager，用于管理整个应用的滚动状态。同理类似于React-Router中的Route，作为具体执行者，进行路由匹配，设计对应的滚动恢复执行者ScrollElement，用以执行具体的恢复逻辑。

示例使用React 16.8版本，方便使用React Hook, React context的Api。

滚动管理者ScrollManager

滚动管理者做为整个应用的管理员，应该具有一个管理者对象，用来设置原始滚动位置，恢复，保存原始节点等，通过React context的Api，该对象分发给具体的滚动执行者。

export interface IManager {
  registerOrUpdateNode: (key: string, node: HTMLElement) => void;
  setLocation: (key: string, node: HTMLElement | null) => void;
  setMatch: (key: string, matched: boolean) => void;
  restoreLocation: (key: string) => void;
  unRegisterNode: (key: string) => void;
}

上述的Manage对象，有注册HTMLElement元素，设置HTMLElement元素位置，恢复等方法，但是缺少了缓存对象。对于缓存可以使用React.userRef，这个api类似于类的属性。设置缓存：

cache

    /*
        注册缓存内存，类似this.cache
    */
  const locationCache = React.useRef<{
    [key: string]: { x: number; y: number };
  }>({});
  const nodeCache = React.useRef<{ [key: string]: HTMLElement | null }>({});
  const matchCache = React.useRef<{ [key: string]: boolean }>({});
  const cancelRestoreFnCache = React.useRef<{ [key: string]: () => void }>({});

通过React.useRef设置了各类缓存。接下来来实现Manager对象：

manager

manager对象使用到上述的缓存对象，并使用key作为缓存的索引，关于key会在scrollElement中进行说明。

 const manager = {
    registerOrUpdateNode: (key: string, node: HTMLElement) => {
      nodeCache.current[key] = node;
    },

    setMatch: (key: string, matched: boolean) => {
      matchCache.current[key] = matched;
    },

    unRegisterNode: (key: string) => {
      nodeCache.current[key] = null;
    },

    setLocation: (key: string, node: HTMLElement | null) => {
      if (!node) {
        return;
      }
      locationCache.current[key] = { x: node.scrollLeft, y: node.scrollTop };
    },

    restoreLocation: (key: string) => {
      if (!locationCache.current[key]) {
        return;
      }
      const { x, y } = locationCache.current[key];
      nodeCache.current[key].scrollLeft = x;
      nodeCache.current[key].scrollTop = y;
    }
  };

其中registerOrUpdateNode用来保存当前的真实dom节点，unRegisterNode对应用于清空，setLocation用来保存页面切换前的滚动位置，restoreLocation用于恢复。在简单实现了manager对象之后，便可以通过context将对象进行传递

Provider

  <ScrollManagerContext.Provider value={manager}>
     {shouldChild && props.children}
  </ScrollManagerContext.Provider>

这样一个基本的ScrollManager雏形就完成了。但manager还需要一个重要的能力：获知元素切换前的位置。只有实现了这个能力，manager才能进行setLoction。

获知元素切换前的位置

在React-Router中，使用了props.history.listen，一切路由状态的切换都从props.history.listen中发起，由于listen可以监听多个函数，便可利用props.history.listen，在React-Router路由状态切换前，插入一段监听函数，去获得相关的节点信息，在获得变化前的节点信息之后，才执行React-Router的路由切换。路径为：

loactionChange---->getDomLocation----->React-Router路由update

示例中使用了一个状态shoudChild，来确保监听函数一定是先于React-Router的监听函数触发。实现上使用useEffect模拟了didMount和unMount，在回调函数中，会对每个nodeCache中的HTMLElement变量，判断matchCache， matchCache为true，表明从当前match(路由渲染的页面)离开，所以离开之前，保存scroll位置。

 useEffect(() => {
    const unlisten = props.history.listen((_location, _action) => {
      // 每次location变化时，保存结点信息
      // 这个回调要在history的所有回调中第一个执行，原因是这个时候还没进行setState,并且即将要进行setState,在这个回调中拿到的状态或者dom属性是进行状态更新前的
      const cacheNodes = Object.entries(nodeCache.current);
      cacheNodes.forEach(entry => {
        const [key, node] = entry;
        // matchCache为true，表明从当前match(路由渲染的页面)离开,所以离开之前，保存scroll
        if (matchCache.current[key]) {
          manager.setLocation(key, node);
        }
      });
    });
    // 保证先监听完上面的回调函数后，才实例化Router! 保证了上面的回调函数最先入栈
    setShouldChild(true);
    return () => {
      // reset所有缓存 防止内存泄露
      locationCache.current = {};
      matchCache.current = {};
      nodeCache.current = {};
      cancelRestoreFnCache.current = {};
      Object.values(cancelRestoreFnCache.current).forEach(
        cancel => cancel && cancel()
      );
      unlisten();
    };
    // 依赖为空，didmount与unmount
  }, []);

在组件销毁时，要清空所有的缓存，防止内存泄漏。ScrollManager在使用时放在Router的外侧，这样可以控制Router的实例化：

   <ScrollManager history={history}>
        <Router history={history}>
            …………
            …………
        </Router>
      </ScrollManager>

滚动恢复执行者 ScrollElement

ScrollElement的主要职责是控制真实的HTMLElement元素，决定缓存的key，包括决定何时触发恢复，何时保存原始HTMLElement的引用，设置是否需要保存位置的标志等。ScrollElement接受如下Props:

interface IProps {
  // 必须 缓存的key
  scrollKey: string;
  children?: React.ReactElement;
  // 为true触发滚动恢复
  when?: boolean;
  // 外部传入ref
  getRef?: () => HTMLElement;
}

其中scrollKey必须传入的的字段，用来标志缓存的具体元素，缓存的位置信息，缓存的状态等，需要全局唯一。使用when字段可控制是否需要进行滚动恢复，ScrollElement本质上是个代理，会拿到子元素的ref，接管其控制权，也可以自行实现getRef传入组件中，组件会对传入的ref做操作。

// ScrollElement
export default function(props: IProps) {
  const nodeRef = React.useRef<HTMLElement>();
  const manager: IManager = useContext<IManager>(ScrollManagerContext);
  const currentMatch = useContext(RouterContext).match;
  useEffect(() => {
    if (currentMatch) {
      // 设置标志，表明在location改变时，可以保存路径
      manager.setMatch(props.scrollKey, true);
      // 更新ref，代理的dom可能会remount，所以要每次更新
      nodeRef.current &&
        manager.registerOrUpdateNode(props.scrollKey, nodeRef.current);
      // 恢复原先滑动过的位置，可通过外部props通知是否需要进行恢复，一般为:when={xxx.length>0}
      (props.when === undefined || props.when) &&
        manager.restoreLocation(props.scrollKey);
    } else {
      // 没命中设置标志，不要保存路径
      manager.setMatch(props.scrollKey, false);
    }
    // 销毁时注销这个node
    return () => manager.unRegisterNode(props.scrollKey);
  });
  if (props.getRef) {
    // 得到ref了 不用关心children了
    nodeRef.current = props.getRef();
    return props.children;
  }
  const onlyOneChild = React.Children.only(props.children);
  // 代理第一个child，需要是真实的dom，div,h1,h2……不能是组件
  if (typeof onlyOneChild.type === "string") {
    // 必须是 原生tag 在合格的子元素上 加上新的ref
    // 以便接管控制权
    return React.cloneElement(onlyOneChild, { ref: nodeRef });
  } else {
    console.warn(
      "-------------滚动恢复将失效，ScrollElement的children须为原生的单个html标签-------------"
    );
    return props.children;
  }
}

使用useEffect，会执行didmount,didupdate,willunmount生命周期，在初次加载或者每次更新的时候，会根据当前的Route匹配与否做对应的处理，如果Route匹配成功，表明当前的ScrollElement组件应是渲染的，这时可以在effect中执行更新ref的操作，之所以在effect中执行更新，是由于代理的dom可能会remount，所以要每次更新。同时还需要设置标志，表明在location改变时，是可以保存滚动位置的，相当于告诉Manager，我此刻渲染成功了，你可以在离开页面的时候把我现在的位置保留下来。如过match为false，表明此刻组件并没有跟路由匹配上，不应渲染，所以manager此刻也不应保存这个元素的位置信息。在元素匹配成功，并且更新了dom，这个时候便可在effect中恢复元素到原先的位置：

(props.when === undefined || props.when) &&
        manager.restoreLocation(props.scrollKey);

在之前的manager部分有过介绍，这个时候会根据key获得缓存的位置信息，并设dom属性，以恢复元素位置:

   restoreLocation: (key: string) => {
      if (!locationCache.current[key]) {
        return;
      }
      const { x, y } = locationCache.current[key];
      nodeCache.current[key].scrollLeft = x;
      nodeCache.current[key].scrollTop = y;
    }

元素的恢复可以通过when来判断是否需要滚动恢复。如果ScrollElement是第一次渲染，由于没有保存过滚动位置，执行restoreLocation不会触发任何行为。至此ScrollElement就实现完成。使用方法：

    <ScrollElement
        when={bigArray.length > 0}
        scrollKey="xxxxx(全局唯一)"
      >
        <ul>
         …………
         …………
        </ul>
      </ScrollElement>

多次尝试机制

在上面的恢复过程中，只执行了一次恢复的行为：

 nodeCache.current[key].scrollLeft = x;
 nodeCache.current[key].scrollTop = y;

对于一些浏览器，有可能执行一次位置赋值浏览器得到的结果并不如预期，可能会有偏差，可引入一个工具函数使得可以多次执行：

// 可取消，为cancelable的
const tryMutilTimes = (
  callback: (...args: any[]) => void,
  tickInterval: number,
  timeout: number
) => {
  const timeId = setInterval(callback, tickInterval);
  setTimeout(() => {
    clearTimeout(timeId);
  }, timeout);
  return () => clearTimeout(timeId);
};

使用一个定时器多次执行callback，同时设置一个执行时间上限，并返回一个取消的函数给到外部。 tryMutilTimes为可取消的，这给restoreLocation很好的控制能力，更改后的restoreLocation为：

   restoreLocation: (key: string) => {
      if (!locationCache.current[key]) {
        return;
      }
      const { x, y } = locationCache.current[key];
      let shoudNextTick = true;
      cancelRestoreFnCache.current[key] = tryMutilTimes(
        () => {
          if (shoudNextTick && nodeCache.current[key]) {
            nodeCache.current[key]!.scrollLeft = x;
            nodeCache.current[key]!.scrollTop = y;
            // 如果恢复成功 就取消，不用再恢复了
            if (
              nodeCache.current[key]!.scrollTop === y &&
              nodeCache.current[key]!.scrollLeft === x
            ) {
              shoudNextTick = false;
              cancelRestoreFnCache.current[key]();
            }
          }

          // 每隔50ms试一次恢复，试到500ms结束， 时间可配置
        },
        props.restoreInterval || 50,
        props.tryRestoreTimeout || 500
      );
    }

设置一个时间间隔多次尝试滚动恢复的操作，如果最终恢复的位置与预期一致，便可取消tryMutilTimes多次尝试，滚动恢复结束，如果与预期不符，便再次尝试，直到timeout时间内与预期的滚动位置一致。

示例地址

最终的示例地址： https://codesandbox.io/s/kind-moon-rn4s7

其他

window的恢复

虽然有scrollRestoration的帮助，但是由于此接口兼容性问题，在chrome 46以下也不支持，window的恢复也可以照此思路实现。

刷新问题

示例中的实现只是把位置信息保留在内存中，刷新就会丢失，如果遇到刷新也要保存的场景，可以把位置信息同步到sessionStorage，localStorage等，进行持久化存储。

tips

打个广告，成都美团招前端，感兴趣的小伙伴可邮件至klfzlyt@outlook.com