页面书签

简略讲就是你从以后页面进行滚动浏览，当“进来一趟”再回来的时候，要还原这个滚动地位，就如同一本书的书签一样。

那么就形容下对页面书签的冀望吧

当我跳转其余页面的时候，回来要还原。
还原不能间接就定位太突兀，应该是动画。

那么开始着手去实现冀望

如何实现 “当我跳转其余页面的时候，回来要还原。”

顺推一下思路：

“还原”是须要依附“数据”的。
"数据"是须要在页面之间跳转仍然能够“保留”的
“保留”是须要脱离页面之外不受其“管制”的
“管制”是须要谁来做呢？？？

简略啊，那显著就交给数据仓库被。

如何实现 “还原不能间接就定位太突兀，应该是动画。”

再顺推一下：

“动画”是须要“细腻”的。
"细腻"是须要“连贯”的。
“连贯”是须要对此执行“递归”的。
“递归”是须要谁来做呢？？？

通过摸索，Bom对象的requestAnimationFrame就很适合。

requestAnimationFrame 官网介绍：

通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

画面一秒60fps，那么回调函数执行次数通常是每秒60次（除了卡掉帧了）那就足够“连贯”了，没次做一点扭转，间断做就能做到“细腻”了（这就跟游戏开发没啥区别了）。

这里必须要强调一下，查阅了几篇文章，有不少都说错了一个点（我感觉的）

比方这句：

你这么说就如同跟setinterval似的了，我感觉不对，逻辑矛盾了。

我的了解：页面一秒60fps，那么你执行了requestAnimationFrame,那么只是在下一次屏幕绘制的时候执行一次，那么怎么连贯的呢，那是通过递归执行这个函数实现的，代码就是这么说的。不会骗人的。

上代码：

export function sineaseOut(t, b, c, d) {    return c * ((t = t / d - 1) * t * t + 1) + b}export function scrollToView(scroller, value) {    if (!scroller) {        return    }    const scroll = value    const scrollStart = 0    let start = null    const step = (timestamp) => {        if (!start) {            start = timestamp        }        let stepScroll = sineaseOut(timestamp - start, 0, scroll, 500)        let total = scroller.scrollTop = scrollStart + stepScroll        if (total < scrollStart + scroll) {            requestAnimationFrame(step)        }    }    requestAnimationFrame(step)}

那么做个小结

状态数据交由数据管理器Mobx来负责，mobx派global仓库来做。
动画的细腻就通过一秒60次的绘制进行递归调用requestAnimationFrame来实现。

情理都懂，那么而后呢？

哎呀，的确啊。。。尽管两个都有方法解决了，但还有最最要害的问题，“用武之地”在哪啊？？？

“用武之地”可是很看“风水”的哦

地位要是没选好，那几乎让你的代码中处处充斥了做作，就为了看起来难受那么一点，那就跟“打肿脸充胖子”差不多了。

最危险的陷阱往往很温顺

首先从需要上来看，很容易就联想到组件的卸载和挂载，因为真的很匹配，这就是最大的引诱，因为它能实现，但这绝不是好的方法，至多不是最好的，因为你如果真这么做了，那所有的页面组件都要去写这个反复的逻辑，那太烦了，如果是给一个曾经写好了很多页面的我的项目加，你会解体的，这不能承受。

要抓住乌云背地的幸福线

当我想来想去，几经挫折，差点“真香”的时候，终于让我想到了一个极佳的地位，那就是。

history.listen

那时那刻，我自信地嘴角微微上扬，稳了。

间接上代码，我置信b数自在大家心中，无需多言了。

    let history = useHistory();    let location = useLocation();    const {        global: { current, scrollData, changeParams },    } = store;    useEffect(() => {        const { pathname, search } = location;        changeParams({            current: decodeURIComponent(pathname + search)        })        if (!history._listenCount) {            history._listenCount++;            history.listen((locationState, type) => {                const {                    global: { current, scrollData, changeParams },                } = store;                let node = document.getElementsByClassName('ant-layout-content')[0]                if (!node) {                    return                }                // node.scrollTop = 0;                //最新页面的Key，存上就行                let newkey = decodeURIComponent(locationState.pathname + locationState.search);                /* 找一下看看有没有记录值 */                let recordValue = scrollData[newkey]                if (typeof recordValue === 'number') {                    scrollToView(node, recordValue)                }                // 取值（过来的）存一下，old                let oldKey = current;                let scrollDataTemp = { ...toJS(scrollData), [oldKey]: node.scrollTop }                if (type === "POP") {                    //POP 状况下node.scrollTop曾经被设置成0了                    changeParams({                        current: newkey,                    })                } else {                    changeParams({                        current: newkey,                        scrollData: scrollDataTemp                    })                }            })        }    }, [])

代码很清晰，就是页面走了，记录一下，页面回来，复原一下，解决的就是这么简略天然。

看下成果

结语

通过摸索页面书签性能的实现形式，可能更好的领会一个情理，实现的形式不止一种，分明本人想要什么，你也就晓得本人该保持什么，该怎么做，也就更有可能抓住乌云背地的幸福线。

集成了该性能的