recycler-view v1.1.0

recycler-view

recycler 提供一个高性能、高度定制、Dom 元素可复用的滚动列表。主要包括三个部分，Recycler（核心控制）、Source（数据源）、Renderer（渲染器）。使用时需注意以下几点：

1. 滚动列表里的每一个项目高度必须是已知的，且单位只能是 px；可以动态改变，下文会介绍如何改变。
2. 滚动列表里的每一个项目的 scrollTop 必须是已知的；可动态改变，一般会跟随高度改变而改变。
3. Recycler 并不实现 Dom 复用，该逻辑在 Renderer 中实现，这部分下文会做介绍。
4. 图片列表最好搭配 LazyLoader 一起使用，否则可能会有大片白屏。
5. Renderer 可以搭配任何框架，但是推荐使用原生 js 进行 Dom 创建和变更，一般框架使用的 Virtual Dom 在这样的场景下比较损耗性能。
6. 性能瓶颈大概率出现在 Renderer 上，所以请小心控制您的 Renderer 渲染时间，包括 js 执行和 layout、paint、compute style 等步骤所消耗时间。

安装

npm i recycler-view

或

yarn add recycler-view

兼容性

基本概念

项目： 以下简称称滚动列表里的每一个滚动项目为「项目」

渲染范围： 由当前的 scrollTop 和各项目高度计算得出，当前应渲染 n~m 的项目，并放在对应的位置。

基本用法

你需要实现 Source 类和 Renderer 类，源码提供了它们的抽象类，可以直接继承；当然也可以重新实现，只要暴露必须的接口就行。

最后实例化 Recycler，传入自行实现的 Source 实例和 Renderer 实例。

NOTE: renderer 可以在 Recycler 第三个参数 options 中提供，也可以在 Source 的 getRenderer() 方法中返回，两者至少要提供一个。

<style>
  #scroller, #container {
    position: relative;
  }
</style>

<div id="scroller">
  <div id="container"></div>
</div>

import { Recycler, Source, Renderer } from 'recycler';

declare type DataType = number;

const data: DataType[] = [1, 2, 3, 4, 5];

// 继承 Renderer 抽象类，实现 MyRenderer 类
class MyRenderer extends Renderer<DataType> {
  public createElement(data?: DataType): HTMLElement {
    return document.createElement('div');
  }
  
  public update(el: HTMLElement, data: DataType): HTMLElement {
    el.textContent = data;
    return el;
  }
}

// 继承 Source 抽象类，实现 MySource 类
class MySource extends Source<DataType> {
  private renderer: MyRenderer = new MyRenderer(); // 此项根据需要决定是否提供
  
  public getWidth(index: number): string {
    return '100%';
  }
  
  public getHeight(index: number): number {
    return 100;
  }
  
  public getScrollTop(index: number): number {
    return index * this.getHeight();
  }
  
  public getMaxScrollHeight(): number {
    return this.getLength() * this.getHeight();
  }
  
  public getLength(): number {
    return data.length;
  }
  
  public getData(index: number): DataType {
    return data[index];
  }
  
  // 此方法可以没有，如果没有，在 Recycler Options 中就必须提供
  public getRenderer(index: number): MyRenderer {
    return this.renderer;
  }
  
  // 此方法可以没有，如果没有就不会尝试加载更多
  public fetch(): Promise<boolean> {
    const newData = [1, 2, 3, 4, 5];
    data = data.concat(newData);
    return Promise.resolve(true);
  }
}

// 绑定 scroller、Source 和 Renderer，启动监听和视图更新
const recycler = new Recycler<DataType>(
  document.getElementById('scroller'),
  new MySource(),
  { 
    container: document.getElementById('container'),
    renderer: new MyRenderer() // 此项可以没有，如果没有，在 Renderer 中就必须实现 getRenderer 方法
  }
);

Recycler

核心模块，决定渲染范围、调用用户实现的 release 方法释放 Dom 元素、提供几种视图更新方法。

const recycler = new Recycler(scroller: HTMLElement, sources: ISource | ISource[], options?: IOptions);

runway 代表一个数据源（source）所创建出的滚动列表，它包含该列表目前的状态，比如目前的 scrollTop、在屏幕上首个项目在所有项目中的 index、数据源、屏幕上的节点集合等信息。

一个 recycler 可以包含多个 runway，可由 recycler 创建时传入的 sources 数组自动创建，也可在 recycler 创建后调用 recycler.addRunway(source) 动态添加。调用 recycler.checkout(key) 可切换当前 runway，即在屏幕上渲染另外一组视图

checkout(key: string)：key 由 source 中的 key 字段指定。若由 sources 数组创建，且 source 不包含 key 字段，则会根据 source 在 sources 数组中的位置确定 key 值；若由 addRunway(source: ISource) 创建，且 source 不包含 key 字段，则把当前 runways.length + 1 作为此 runway 的 key 值

滚动容器节点，HTMLElement 实例

数据源（详细信息见下文 Source 模块）。可为 Source 实例或一个每一项都为 Source 实例的数组。

如果该参数为数组，则会根据该数组创建多个 runway，用户可以根据 source 中提供的 key 自由切换 runway；若未提供 key，则会以其在数组中的位置自动生成 key

一些可选项目

Recycler 继承了一个轻量的 EventEmitter，向外派发了一些事件

const recycler = new Recycler();

recycler.on(Recycler.Events.Initialized, (recycler: IRecycler) => {});
recycler.on(Recycler.Events.RunwaySwitched, (recycler: IRecycler) => {});
recycler.on(Recycler.Events.Resized, (recycler: IRecycler) => {});
recycler.on(Recycler.Events.Scrolling, (recycler: IRecycler, delta: number) => {});
recycler.on(Recycler.Events.ScrollAtStart, (recycler: IRecycler) => {});
recycler.on(Recycler.Events.ScrollAtEnd, (recycler: IRecycler) => {});
recycler.on(Recycler.Events.Update, (recycler: IRecycler, disableRenderer: boolean) => {});

Source

数据源，提供 项目渲染所需数据 和 项目的几何信息

Renderer

渲染器，用于项目创建和更新

Dom 复用

源码中提供了 Renderer 的抽象类，该类实现了render、release、releaseAll、clear 函数，createElement 和 update 需由用户来实现。而 Dom 复用的其中一个要点就在 render 中。下面介绍 render 如何实现 Dom 复用。

/* at Renderer.ts */

// 这里贴出一部分关于 Renderer 抽象类的源码，以便对照

interface IQueue {
  unused: HTMLElement[];
  using: Set<HTMLElement>
}

abstract class Renderer<T> {
  // 该对象包含 using（使用中的节点）和 unused（未在使用中的节点）
  protected queue: IQueue = {
    unused: [],
    using: new Set()
  };
  
  // 释放使用中的节点
  public release(el: HTMLElement, recycler: Recycler): void {
    this.queue.using.delete(el);
    this.queue.unused.push(el);
  }
  
  // 渲染函数
  public render(data: T, recycler: Recycler): HTMLElement {
    // 从 queue.unused 中弹出一个节点
    let el = this.queue.unused.pop();
    
    // 如果 el 不存在则创建一个新的节点。createNewElement 自行实现，返回一个 HTMLElement
    if (!el) {
      el = this.createNewElement(data);
    }
    
    // 无论是刚创建的元素还是原来就有的元素，都走 update 更新
    this.update(el, data, recycler);
    
    // 向 queue.using 中添加一个节点
    this.queue.using.add(el);
    
    // 返回节点
    return el;
  }
  
  // createElement 抽象方法
  public abstract createElement(data?: T): HTMLElement;
  
  // update 抽象方法
  public abstract update(el: HTMLElement, data: T, recycler: IRecycler): HTMLElement;
}

/* at MyRenderer.ts */

// 继承 Renderer 抽象类，并实现 createElement 和 update 方法
class MyRenderer extends Renderer<MyDataType> {
  // 创建新节点，这里推荐创建的节点与 data 无关
  // 只创建一个架子，接下来由 update 方法更新视图，这样不用写重复逻辑，速度也快
  public createElement(data?: MyDataType) {
    const el = document.createElement('div');
    
    el.innerHTML = '....';
    
    return el;
  }
  
  public update(el: HTMLElement, data: MyDataType, recycler: Recycler) {
    // Do some udpate to el...
    return el;
  }
  
  // 这里可以根据需要改造，比如移除 el 节点
  @Override
  public release(el: HTMLElement, recycler: Recycler) {
    super.release(el, recycler);
    
    el.remove(); // 把 el 从 Dom 树中移除
  }
}

上面的代码实现了一种 Dom 复用的方式，即使用原生 js 创建和更新节点，直接复用节点。如果想要使用框架也没问题，这里以 Vue 举个例子。

import MyComponent from 'my-component';

class MyRenderer extends Renderer<MyDataType> {
  public createElement(data?: MyDataType): HTMLElement {
    // 创建 Vue 实例
    const vm = new Vue(MyComponent);

    // 把 Vue 实例绑定到真实 Dom 元素上
    vm.$el.vm = vm;
    
    // 返回真实 Dom 元素
    return vm.$el;
  }
  
  public update(el: HTMLElement, data: MyDataType, recycler: Recycler): HTMLElement {
    // 拿到绑定在真实 Dom 元素上的 Vue 实例，并更新
    Object.assign(el.vm.props, data);
    
    // 返回更新后的 Dom 元素
    return el;
  }
}

上面代码使用了一些骚操作，达到复用 Vue 实例的目的。但是一来更新的时候需要做 diff，所以 Virtual Dom 更新视图肯定比手动更新慢（除非手动更新时做了很多触发回流的操作，比如反复读取几何属性等）；二来在滚动场景下性能十分重要，特别是在中低端移动设备上，cpu 性能不足。所以并不推荐使用框架进行渲染。

另外，如果有特殊需要，可以自行实现 Renderer 类，只要暴露必须的接口即可，接口定义在 src/interfaces/recycler#IRenderer

视图更新方法

onScroll： 最普通的更新，即在滚动过程中对视图的更新，释放渲染范围之外的元素，并且只重新渲染这些释放了的元素

update： 直接更新。会更新 sentinal 的位置，并调用一次 onScroll

forceUpdate： 强制更新。调用一次 update，但不同点在于现存屏幕上的元素都会被释放，并重新渲染

inPlaceUpdate： 原地更新。不走 onScroll，而是直接对缓存中屏幕上的元素重新渲染。也就是说不会计算渲染范围，直接对当前已经计算出的 渲染范围 内的所有元素做一次重新渲染

特殊更新 resize： 由 window.resize 触发的视图更新，内部调用 forceUpdate。触发时会把 recycler.isResizeUpdate 置为 true，render 函数可以判断这个值，对于图片就不需要做懒加载了

动态改变项目高度

假设有这样的场景，项目高度是随滚动容器的宽度变化而变化，这时确实需要动态改变项目高度

基本方案是监听滚动容器宽度的变化，在变化时变更 source.getHeight 方法的依赖，然后调用一次 forceUpdate

let ratio = 1;

window.onresize = function() {
  ratio = window.innerWidth / 375;
  recycler.forceUpdate();
}

class MySource extends Source {
  getHeight(index: number): number {
    return ratio * 100;
  }
  
  getScrollTop(index: number): number {
    return this.getHeight() * index;
  }
}

具体如何做根据需求而定，这里只给出思路

几种列表效果的实现

项目高度一致，n 列

const columns = 3;

class MySource extends Source<MyDataType> {
  private columns: number = columns;
  private width: number = 1 / columns * 100 + '%';
  
  public getHeight(index: number): number {
    return 100;
  }
  
  public getWidth(): number {
    return this.width;
  }
  
  public getScrollTop(index: number): number {
    return this.getHeight() * Math.floor(index / this.columns);
  }
}

项目高度不一致，n 列（瀑布流）

// 首先我们需要每一项的高度，这个值在实际项目中需要想办法知道

let ratio = 1;

window.onresize = function() {
  ratio = window.innerWidth / 375;
}

class MySource extends Source<MyDataType> {
  // 缓存每一项的 scrollTop
  private scrollTopCollector: number[] = [];
  private columns: number = 3;
  
  public getData(index: number): MyDataType {
    return {}
  }
  
  public getHeight(index: number): number {
    // 这里乘一个系数，用于动态改变高度
    return ((this.getData(index) || {}).height || 0) * ratio;
  }
  
  public getScrollTop(index: number): number {
    // 这里乘一个系数，用于动态改变高度时，scrollTop 也要跟着变
    return (this.scrollTopCollector[index] || 0) * ratio;
  }
  
  // 此方法向 scrollTopCollector 中添加新的 scrollTop 缓存
  private collectScrollTop(/*新增数据的长度*/newDataLength: number) {
    const collector = this.scrollTopCollector;
    
    for (let i = 0;i < newDataLength;i++) {
      const topItemIndex = collector.length - this.columns;
      const topItemHeight = this.getHeight(topItemIndex);
      const topItemScrollTop = this.getScrollTop(topItemIndex);
      
      collector.push(topItemScrollTop + topItemHeight);
    }
  }
}

上面瀑布流的实现存在问题，没有自适应填充，可能造成某一列很长，下面是自适应实现

let ratio = 1;
const columns = 3;

window.onresize = function() {
  ratio = window.innerWidth / 375;
}

class MySource extends Source<MyDataType> {
  // 缓存每一项的 scrollHeight 和 column（处于第几列）
  private positions: {scrollHeight: number, column: number}[] = [];
  // 当前 n 列，每列最大 scrollHeight 集合
  private maxScrollHeightOfPerColumn: number[] = (new Array(co)).fill(0);
  // 列数
  private columns: number = columns;
  
  public getData(index: number): MyDataType {
    return {
      height: (index % 5 + 1) * 30
    }
  }
  
  public getHeight(index: number): number {
    // 这里乘一个系数，用于动态改变高度
    return ((this.getData(index) || {}).height || 0) * ratio;
  }
  
  // 宽度假设为平均分配
  public getWidth(): string {
    return 1 / this.columns * 100 + '%';
  }
  
  // 这里获取 x 方向偏移
  public getOffset(index: number): {x: string, y: number} {
    const position = this.positions[index];
    const x = position.column / this.columns * 100;
    
    return {
      x: x > 0 ? x + '%' : x + '',
      y: 0
    }
  }
  
  public getScrollTop(index: number): number {
    // 这里乘一个系数，用于动态改变高度时，scrollTop 也要跟着变
    // 之所以要减掉一个 height 是因为缓存的是 scrollHeight，包括了元素本身的高度
    return (this.position[index].scrollHeight - this.getData(index).height) * ratio;
  }
  
  // 此方法向 positions 中添加新的 position 缓存
  // 由于循环体中使用了 indexOf 和 Math.min，因此每次添加的 data 不宜过多
  private collectPositions(/*新增的数据*/datas: MyDataType[]) {
    const maxScrollHeightOfPerColumn = this.maxScrollHeightOfPerColumn;
    const length = datas.length;
    
    for (let i = 0;i < length;i++) {
      const minScrollHeight = Math.min(...maxScrollHeightOfPerColumn);
      const index = maxScrollHeightOfPerColumn.indexOf(minScrollHeight);
      const scrollHeight = minScrollHeight + datas[i].height;
      
      this.positions.push({
        scrollHeight,
        column: index
      });
      
      maxScrollHeightOfPerColumn[index] = scrollHeight;
    }
  }
}

结语

Recycler 搭配不同的 Source 和 Renderer 可以实现多种效果。目前作者也在探索和改进中，下一步目标是省略 Source 中的 getScrollTop，让使用更加方便（虽然毫无头绪）