前端对大数据处理方案,比如列表如何显示几万条数据

本文链接：https://blog.csdn.net/weixin_48181168/article/details/120467455

当后端一次性丢给你10万条数据, 作为前端工程师,要怎么处理?

采用懒加载+分页(前端维护懒加载的数据分发和分页)

初级工程师的方案:

直接从后端请求数据, 渲染到页面的硬编码方案,思路如下:

请求后端数据:

fetch(`${SERVER_URL}/api/getMock`).then(res => res.json()).then(res => {
  if(res.state) {
    data = res.data
    setList(data)
  }
})

渲染页面

{
    list.map((item, i) => {
      return <div className={styles.item} key={item.tid}>
        <div className={styles.tit}>{item.title} <span className={styles.label}>{item.name}</span></div>
        <div>{item.text}</div>
      </div>
    })
}

搜索数据

const handleSearch = (v) => {
    let searchData = data.filter((item, i) => {
      return item.title.indexOf(v) > -1
     })
     setList(searchData)
  }

中级工程师的方案

懒加载+分页方案懒加载的实现主要是通过监听窗口的滚动, 当某一个占位元素可见之后去加载下一个数据

在滚动的过程汇总我们还需要注意一个问题就是当用户往回滚动时, 实际上是不需要做任何处理的,所以我们需要加一个单向锁, 具体代码如下:

function scrollAndLoading() {
    if(window.scrollY > prevY) {  // 判断用户是否向下滚动
      prevY = window.scrollY
      if(poll.current.getBoundingClientRect().top <= window.innerHeight) {
        // 请求下一页数据
      }
    }
}

useEffect(() => {
    // something code
    const getData = debounce(scrollAndLoading, 300)
    window.addEventListener('scroll', getData, false)
    return () => {
      window.removeEventListener('scroll', getData, false)
    }
  }, [])

其中prevY存储的是窗口上一次滚动的距离, 只有在向下滚动并且滚动高度大于上一次时才更新其值.

至于分页的逻辑, 原生javascript实现分页也很简单, 我们通过定义几个维度:

curPage当前的页数
pageSize 每一页展示的数量
data 传入的数据量

有了这几个条件,我们的基本能分页功能就可以完成了. 前端分页的核心代码如下:

let data = [];
let curPage = 1;
let pageSize = 16;
let prevY = 0;

// other code...

function scrollAndLoading() {
    if(window.scrollY > prevY) {  // 判断用户是否向下滚动
      prevY = window.scrollY
      if(poll.current.getBoundingClientRect().top <= window.innerHeight) {
        curPage++
        setList(searchData.slice(0, pageSize * curPage))
      }
    }
}

防抖函数实现 防抖函数因为比较简单, 这里直接上一个简单的防抖函数代码:

function debounce(fn, time) {
    return function(args) {
      let that = this
      clearTimeout(fn.tid)
      fn.tid = setTimeout(() => {
        fn.call(that, args)
      }, time);
    }
  }

搜索实现搜索功能代码如下:

const handleSearch = (v) => {
     curPage = 1;
     prevY = 0;
     searchData = data.filter((item, i) => {
        // 采用正则来做匹配, 后期支持前端模糊搜索
       let reg = new RegExp(v, 'gi')
       return reg.test(item.title)
     })
     setList(searchData.slice(0, pageSize * curPage))
}