• 剖析源码:浅谈react-infinite的机制与原理


      最近又读了一个轮子的源码,react-infinite,虽然star数量不是特别多,1.5k,不过还是个非常实用的轮子,今天给大家讲的是它的原理和实现,并不是如何去使用它,如何使用官方文档上都有。了解了它的原理,你就不一定要全盘使用它,你可以自己剥离一部分实际要用的东西出来,自己写一个合适的轮子用到项目中去(不要为了一个功能去使用一整个框架或者插件)。
      说了那么多废话,它是用来干嘛的?

      官方解释:A browser-ready efficient scrolling container based on UITableView.

      基于UITableView的浏览器端高效滚动容器。本质上它就是利用了原生App的滚动容器原理,让我们可以在浏览器端享受到近原生的滚动体验。

      它解决的主要问题是:无限滚动,导致当前页面元素数量太多,切换视图再切回来时一次性渲染大量元素,会造成卡顿。

      那么正常人的思路来说,我们需要对不在可视区域的元素做回收,只显示在可视区域和即将要显示的部分,这样性能会有大幅提升。

      我们都知道移动端有UIWebView,UITableView,UIScrollView等等各种View。原生App性能为什么强?是天生强么,还不是OC和Java,能比C快么?关键人家优化的好啊,把各种常用组件都给你封装好了,移动端的UIScrollView其实就是对上面这种情况做了优化的,在移动端,会有一个坐标系,你会有很多View铺在坐标系上,你的视口是固定的,这时候我们只需要拉动后面的坐标系,整个屏幕看起来就滚动起来了,那么其中在可视区域的那些View就被渲染了,而不可视区域就被隐藏起来了。

      对应到浏览器端,其实也是差不多,通过剖析react-infinite的作用机制和源代码,它是这么实现的:

      组件允许你设置成内滑或者使用window的滚动条。加载页面时,如果你想用window的滚动条,而不是内滑,那么它就不会创建容器,他会在你渲染的节点下面加载元素。

      这边需要注意的是:它会在你列表元素的首部和尾部都添加两个空的<div>,最头和最尾部的元素是用来撑滚动条的,第二个和最后第二个空<div>是用来加载loading图标的。在滚动视图的过程中,每过一定距离,它会把离当前可视区域最远的那部分元素移除,放在内存里,然后用撑滚动条的那个空<div>来替换他们,给空div加一个高度,和这些移除的元素一样高,这样,滚动条就会保持原位。反方向滚动,会把之前移除的元素重新插入到之前的位置,然后将高度减小,另一边的空<div>高度就会增加,并会移除一些离可视区域远的元素。所以存在的元素始终只有可视区域和即将可视的元素。
      至于上拉加载,下拉刷新,很简单,判断 视口区域的固定高度 + 滚动条滚动的距离 > 滚动区域的高度 - 你设置的开始加载的边界值offset,为true就fetch数据,当然,一旦fetch数据了,要加一个状态变量,防止滚动事件多次进入条件判断,加载完了再把状态变量还原。

      知道原理了,要实现这么一个组件应该不是太难,关键逻辑就是,每移动固定距离,就触发一个函数,将固定数量的元素从dom移除,再把空div的高度增加,另外一边,就是相反的逻辑,添加回移除的dom,把空div的高度减小。

      

      

  • 相关阅读:
    UVA
    UVA
    模板——扩展欧几里得算法(求ax+by=gcd的解)
    UVA
    模板——2.2 素数筛选和合数分解
    模板——素数筛选
    Educational Codeforces Round 46 (Rated for Div. 2)
    Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses
    Educational Codeforces Round 46 (Rated for Div. 2) D. Yet Another Problem On a Subsequence
    Educational Codeforces Round 46 (Rated for Div. 2) C. Covered Points Count
  • 原文地址:https://www.cnblogs.com/geoffgu/p/6527231.html
Copyright © 2020-2023  润新知