基于react的虚拟列表

发表于 2020-07-13 | 分类于 react

虚拟列表

在工作中，我们经常会以列表的形式来展示内容，当时如果列表项很多的话，在pc端我们会考虑用分页的形式来解决长列表带来的性能问题。但是如果是在移动设备，为了用户体验，我们通常是用长列表的形式来展示，用户只需上下滑动来浏览。这时如果不做处理，而是一次加载全部的数据，那么当数据量过大的时候，就会出现性能问题，影响体验。这时，我们就需要用到*虚拟列表*了。

虚拟列表是按需显示的一种技术，可以根据用户的滚动，不必渲染所有列表项，而只是渲染可视区域内的一部分列表元素的技术。

如图所示，当页面有很多数据的时候，我们只需渲染用户可看到的区域item8到item15。这样就大大提升了性能和用户体验。

固定高度长列表

我们项目中的列表如果都是高度固定，那么这种情况就是固定高度的长列表。这种情况的处理相对简单，我们只要根据可视区域的高度和列表的高度，就能计算出可视区域要渲染列表项的索引（范围）啦。
首先我们可以根据scrollTop属性来确定可视区域开始项的索引；然后我们可以根据可视区域的高度和列表项的高度，计算得出结束索引的值，这样可视区域要渲染的内容索引已经确认，可视区域上下方的高度，也就是开始索引的值列表项的高度和（列表的长度-结束索引）列表项的高度。监听容器的scroll事情，重复上面的计算，这就是当列表项目固定的情况下，实现虚拟列表的原理。

如果是列表项高度不一，但是我们可以确定没项列表的高度，那么也是可用上面的方法计算，我们只需为列表增加一个height属性来记录每个列表的高度，然后根据索引和之前列表的高度相加，我们就可以确定当前列表的top相对与股东容器的高度，这样形成了一个有序的top值数组，然后我们就可以使用二分法结合固定列表项高度的情况来得到可视区域的索引范围。

由于本文的讨论重点不是上面两种情况，对上面两种情况感兴趣的同学，推荐我自己之前看到过的一篇文章，讲的很详细虚拟滚动的轮子是如何造成的？

不固定列表高度的情况

终于来到今天讨论的重点啦。在高度不固定的情况下，要怎么实现虚拟列表呢？通过前面的概述，相信大家也认识到要实现一个虚拟列表，我们只需要确定可是区域的渲染范围（索引）即可，滚动盒子上下高度根据计算出来的索引和列表的总长度就可以计算出来啦。那么，我们要怎么确定可视区域要渲染列表的索引呢？

其实在高度不确定的情况下，我们就只有等到列表项渲染完成后，才能得到列表项的真实高度，所以我们要动态的记录列表项的真实高度。为了不是页面发生错误的情况，我们需要一个预估列表项的高度来尽可能撑开滚动盒子，就等到列表项渲染后，我们就可以拿到真实dom的高度，在替换可视区域。考虑到单独的记录每个列表项的真实高度，会比较麻烦，所以我就页为单位来记录pageHeight。

来看代码ScrollList

import React, { PureComponent } from 'react'
import { throttle } from '../../utils/index'

// 应该接收的props: renderItem: Function, height:string; estimateHeight:Number
class ScrollList extends PureComponent {
  constructor (props) {
    super(props)
    this.renderItem = props.renderItem
    this.getData = props.getData
    // 预估高度 做屏幕适配
    this.estimateHeight = document.documentElement.clientWidth * (props.estimateHeight / 320)
    // 每一页展示的数据
    //一页10条数据，进行一页数据的预估
    // 每一页的总体高度
    this.pageHeight = []
    this.state = {
      List: []
    }
    this.scrollWrapper = React.createRef()
    this.handleScroll = throttle(this.onScroll, 300)
    this.hasDidMounted = false
  }

  async componentDidMount () {
    console.log('----- sroll list mount')
    this.init()
    this.hasDidMounted = true
  }

  init=async (isEimtByParant = false) => {
    const { offset, events } = await this.props.getData()
    this.initOptions({ offset, events, isEimtByParant })
  }
  // resource
  // static getDerivedStateFromProps ({ resource, pageSize }) {
  //   if (resource.length && resource.length <= pageSize) {
  //     self.initOptions({ offset: 0, events: resource })
  //     console.log(resource, pageSize)
  //   }
  //   return null
  // }

  initOptions = ({ offset = 0, events = [], isEimtByParant }) => {
    const page = Math.floor(offset / this.props.pageSize)
    let pageList = [...this.state.List]

    if (!offset) {
      pageList = []
    }
    // 列表数据
    if (!pageList.length) {
      pageList[0] = {
        data: events,
        visible: true
      }
    } else {
      pageList[page] = {
        data: events,
        visible: false
      }
    }
    if (isEimtByParant) {
      this.pageHeight = []
    }
    // debugger
    // 然后对pageHeight根据预估高度进行预估初始化，后续重新进行计算,每个列表的预估位置高度
    if (this.pageHeight.length) {
      this.pageHeight[page] = {
        top: this.pageHeight[page - 1].height + this.pageHeight[page - 1].top,
        height: this.estimateHeight * events.length,
        isComputed: false
      }
    } else {
      this.pageHeight.push({
        top: 0,
        height: this.estimateHeight * events.length,
        isComputed: false
      })
    }
    console.log('inint options ', this.pageHeight)
    this.setState({
      List: pageList
    })
  }

   initHeight =(offsetHeight, scrollTop) => {
     requestAnimationFrame(() => {
       // 判断一下需要展示的列表，其他的列表都给隐藏了
       const listShow = [...this.state.List]
       //  console.log(listShow)
       listShow.forEach((item, index) => {
         if (this.pageHeight[index]) {
           const bottom = this.pageHeight[index].top + this.pageHeight[index].height
           //  console.log('------', bottom, scrollTop, this.pageHeight[index].top > scrollTop + offsetHeight + 5)
           if ((bottom < scrollTop - 10) || (this.pageHeight[index].top > scrollTop + offsetHeight + 10)) {
             listShow[index].visible = false
           } else {
             // 根据预估高度算出来它在视野内的时候，先给它变成visible，让他出现，才能拿到元素高度
             this.setState(prevState => {
               const List = [...prevState.List]
               List[index].visible = true
               return {
                 List
               }
             })
             //  console.log(1111111, this.state.List)
             // 出现以后，然后计算高度，替换掉之前用预估高度设置的height
             const target = this[`page${index}`].current
             let top = 0
             if (index > 0) {
               top = this.pageHeight[index - 1].top + this.pageHeight[index - 1].height
             }
             if (target && target.offsetHeight && !listShow[index].isComputed) {
               this.pageHeight[index] = { top, height: target.offsetHeight }
               //  console.log(target.offsetHeight)
               listShow[index].visible = true
               listShow[index].isComputed = true
               // 计算好了以后，还要再setState一下，调整列表高度
               this.setState({
                 List: listShow
               })
             }
           }
         } else {
           this.pageHeight[index] = { top, height: this.estimateHeight * this.props.pageSize }
         }
       })
     })
   }

  onScroll= async () => {
    const { offsetHeight, scrollHeight, scrollTop } = this.scrollWrapper.current
    this.initHeight(offsetHeight, scrollTop)
    // console.log(offsetHeight, scrollHeight)
    if (offsetHeight + scrollTop + 10 > scrollHeight && this.props.hasMore) {
      const { events, offset } = await this.props.getData(1)
      this.initOptions({ offset, events })
      this.initHeight(offsetHeight, scrollTop)
    }
  }

  render () {
    const { List } = this.state
    // console.log('list', List)
    let headerHeight = 0
    let bottomHeight = 0
    let i = 0
    for (; i < List.length; i++) {
      if (!List[i].visible) {
        headerHeight += this.pageHeight[i].height
      } else {
        break
      }
    }
    for (; i < List.length; i++) {
      if (!List[i].visible) {
        bottomHeight += this.pageHeight[i].height || 0
      }
    }
    const renderList = List.map((item, index) => {
      this[`page${index}`] = React.createRef()
      if (item.visible) {
        return <div ref={this[`page${index}`]} key={`${item.id}_page${index}`}>
          {item.data.map((value, log) => {
            return (
              this.renderItem(value, `${index}-${log}`)
            )
          })}
        </div>
      }
    })
    return (<div
      ref={this.scrollWrapper}
      onScroll={this.handleScroll}
      style={{ height: '100%', overflow: 'scroll' }}
    >
      <div style={{ height: headerHeight }} />
      {renderList}
      <div style={{ height: bottomHeight }} />
      {/* {this.state.loading && (
        <div>加载中</div>
      )}
      {this.state.showMsg && (
        <div>暂无更多内容</div>
      )} */}
    </div>)
  }
}

export default ScrollList

从代码中我们可以看到组件ScollList接收的props有：

renderItem：渲染列表项的函数，由用户传入即可。
hasMore：判断是否还有下一页数据，用户往下滑动。
pageSize：表示每一页的列表项，因为scrollList是以页为单位来计算高度的
getData：获取列表项
estimateHeight：列表项的预估高度，可以稍微大些，撑开滚动盒子的高度

原理梳理

先设置一个预设一个列表高度，如 320
然后componentDidMounted中加载一页数据，并用pageHeight来存储每一页（10）条数据的预估高度和，还有顶端位置，用top记录
1
2
3
4
5
6
7
// pageHeight
[
{
top: 0,
height: document.documentElement.clientWidth * (props.estimateHeight / 320)
}
]

在state中用List，来接受请求的数据

[
  {
    data: [....] // 要渲染的真实数据,
    isComputed: false // 表示这页数据是用的预估的高度来渲染的，在滚动事件中，我们会用真实的这页数据的高度来替换，在重新更新页面
    visible: false // 标示本页数据是否在可是区域
  }
]

scroll事件，根据hasMore来请求后面的数据

最后贴下冴羽大佬的throttle

export const throttle = (func, wait, options = { leading: true, trailing: true }) => {
  let timeout, context, args // result
  let previous = 0
  if (!options) options = {}

  const later = function () {
    previous = options.leading === false ? 0 : new Date().getTime()
    timeout = null
    func.apply(context, args)
    if (!timeout) context = args = null
  }

  const throttled = function () {
    const now = new Date().getTime()
    if (!previous && options.leading === false) previous = now
    const remaining = wait - (now - previous)
    context = this
    args = arguments
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      previous = now
      func.apply(context, args)
      if (!timeout) context = args = null
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining)
    }
  }

  throttled.cancel = () => {
    clearTimeout(timeout)
    previous = 0
    timeout = null
  }
  return throttled
}

小结

以上就是本人在项目有用到的虚拟列表实现方法，大家可以帮忙优化下哈！

迟来的前端面经

发表于 2020-06-07 | 分类于前端三剑客

最近也是在换工作，小公司和大厂（虾皮、腾讯）都有面试。几次面试收获还是比较大的，了解许多自己的短板，当然也拿到了合适的offer。本文主要整理下面试遇到的问题和知识点，希望对准备找工作的掘友有所帮助。

基础部分

面试的时候，前端基础知识，还是仔细准备，这一块可以问的东西很多，不管哪一面，都将会有问到，或者通过面试题来考察。

你对css3的动画属性了解多少？

这个问题，是在介绍项目的时候，面试官提出来的。我介绍的项目是一个利用贝塞尔曲线公式，来控制小车做曲线运动移动到对应的位置，抽取奖品。我自己是用js套用公式做的，当时面试官，有提到具体的公式是怎样的（有点慌，确实是百度来的。。。），车的坐标怎么控制，小车是否可以连续运动（项目中采用的是把所有动画函数放入一个数组，采用类似express中间件 next这样的方式来实现）。然后面试就提了上面的问题，我的回答（常规操作），animation开头的后面的属性，能记住的都说了，最后面试官问我知道 css3也可以设置贝塞尔曲线么，还有animationend 事件，然后项目的新的思路就出来了，利用css3 cubic-bezier结合动画结束事件animationend,就可以实现小车的曲线运动了。嗯，服气！

session和cookie的区别是啥？

这个网上答案有很多，建议回答的时候，就是解释一下基本的概念，然后结合场景说明下用途就ok啦。。。。

聊聊js的原型链吧？

这个考的方式有很多。比如直接说出一个function Person，让你画图的（如果头脑清晰，可以把函数也是对象的那部分画出来，这是一个加分项）;还有就是出一个题，让你说出p1.__proto__ ，Person.prototype的关系或是各种__proto__的指向问题，建议用纸笔仔细捋捋。

防抖和节流的实现原理，和使用场景？
这个也是一个面试高频问题。防抖类似于，我们排队上地铁，一个人上去后，后面的人才能接着上（one by one），一般用在搜索展示下拉框这样的场景；节流，是理解为是水龙头按节奏的滴水，一般是用在有onresize onsrcoll 这样的场景。
http的缓存机制？
协商缓存(etag,last-mofify)和强制缓存（cache-control）。分别解释了各种概念后，面试官追问，既然有了last-modify为什么还要有etag：1、文件内容没有变的情况，但是last-mofidy会变，比如，打开文件修改，当时内容没有变化。2、就是last-mofify的时间精度是秒级，但后台可能存在一秒对文件多次操作的可能。
聊聊http2的特性？

概念性问题，背背书。。。。

addeventlistener第三个参数作用

阅读全文 »

vue收集依赖watcher

发表于 2020-03-21 | 分类于 Vue

前文，有聊到vue中的数据侦测机制（observer），如果实现对监听对象object和数组的数据变化。但是，如果我们只知道数据的变化，也无法及时的把这些数据更新到视图。所以，我们需要收集依赖，等数据更新了，就把收集到的依赖循环触发一遍就好了，这样数据的变化就可以及时更新到视图了。

收集依赖Dep

对于对象来说，依赖是在getter中收集，在setter中触发执行。那么，依赖存储在哪呢？vue中用了一个Dep类来管理依赖，对于响应数据对象的每一个key值，都有一个数组来存储依赖。先来看看Dep类，它可以帮助我们收集依赖、删除依赖和触发依赖。

export default class Dep {
    export default class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  removeSub(sub) {
    remove(this.subs,sub)
  }

  depend() {
    if(Window.target) {
      this.addSub(window.target)
    }
  }
  notify() {
    const subs = this.subs.slice();
    for(let i=0,len = subs.slice.length;i<1;i++) {
      subs[i].update()
    }
  }
}

function remove(arr,item) {
  if(arr.length) {
    const index = arr.indexOf(item);
    if(index > -1) {
      return arr.splice(index,1)
    }
  }
}
}

阅读全文 »

vue数据监测机制observer

发表于 2020-03-15 | 分类于 Vue

vue的mvvm模型，解耦了视图和数据，为前端开发提供了极大的便利，而其中最重要的是数据变化检测，vue的data检测机制有以下几个特点：

检测数据为对象的时候，必须先声明属性，这个属性才是响应式的。
增加不存在的属性不能更新视图（vm.$set）
修改数组索引和长度是不会导致视图更新的
数组里套对象对象是支持响应式变化的，如果是常量则没有效果
如果新增的数据 vue中也会帮你监控（对象类型）

Object的变化检测

在js中有两种方法可以侦测到对象的变化Object.defineProperty和ES6的Proxy,vue2.0的版本是采用Object.defineProperty来检测对象数据的变化。根据vue的使用特性，我们要检测对象的所有key值，并且对新增的数据也要检测，我们可以写出下面的代码：

function observer(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return obj;
    }

    // 监听对象的每一个属性 key
    Object.keys(obj).forEach(key=>{
        defineReactive(obj,key,obj[key])    
    })
}

function defineReactive(obj,key,value) {
    // 递归对象的值，如果值为对象，也监测
    observer(value);
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable: true,
        get() {
            // 对于对象 我们在这里 收集依赖 watcher
            return value
        },
        set(newValue) { 
            //给某个key设置值的时候 可能也是一个对象 也需要监听
            observer(newValue);
            //对象： 在这里触发收集的依赖
            value = newValue;
             console.log('视图更新');
        }
    })
}

阅读全文 »

vue实现api调用的消息弹框

发表于 2020-03-07 | 分类于 Vue

快速原型开发

免于vue文件的繁杂配置，或者脚手架下载依赖的时间，这次让我们轻装上阵来实现一个notification弹框。

1
2
3


npm install -g @vue/cli  @vue/cli-service-global
npm i less less-loader -D

vue serve 就可以启动了。

用的vue方法api

Vue.extend
这是一个基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象（同单文件.vue的参数，或者.vue文件导出的对象）。

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

extends:允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。使用他的原因是因为，可以在基础的notifation组件基础扩展一个新的组件来实现api式调用，而不会影响原来组件的正常使用。

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

阅读全文 »

陈虎

记录学习，记录生活，记录点滴

RSS