ListView(React, JavaScript, HTML)

最近浏览百度新闻时发现百度新闻的列表随着新闻条目的扩大，庞大的DOM树严重拖累了滑动性能。于是乎便想找一个高性能列表，后来想到了Android的ListView和IOS的TableView轮循器机制。可惜遍寻各大网站也没有什么结果，只能自己实现一个。

基本原理：

轮循器的原理其实尤为简单，简而言之就是显示计算出当前列表所能显示的最大item数。也就是说即便在加载一万条数据时候DOM树上也只会留下当前所能显示的最大条目数的节点。

Handler（handler是用于操作item生成的工厂）

通过使用者注实现(抽象类，JS木有抽象所以请脑补抽象)iHandler。实现如下函数：

• getView(item)=>JSX.Element

接受一个item，item为一个带有height和data的条目描述对象，height用于描述当前item高度，data为自定义数据。

该函数返回一个JSXView对象。该View将会被渲染在列表内。

• getItem(index:number)=>{height:number,data:object}

接受当前条目索引，生产条目描述对象，最终将会用于view的生成。

• getSize()=>number

返回条目总数目。

ListView

ListView将会根据handler产生列表，所必需接受的属性为 height 和 handler，其他属性为 tools 和 width。height是该view高度，handler为iHandler的实例。tools为需要向ListView获取的操作函数列表，width为宽度（如无则默认100%）。

下面用一个小Demo来演示ListView的使用。

import React from "react";import Rx from "rxjs";import { ListView, iHandler } from "./index";import "./demo.css";const viewSubject = new Rx.Subject().delay(200);viewSubject.subscribe({  next: ({ height, demo }) => {    if (viewSubject.height == height) {      console.log("view change");      demo.setState({ height: height });      tools.updataView();    }  }});const items = [];for (let i = 0; i < 500; i += 1) {  items[i] = i;}class Handler extends iHandler {  getView(item) {    let color = "white";    let bg = "black";    if (item.data % 2 == 1) color = "black";    if (item.data % 2 == 1) bg = "white";    return (      <div        className="item"        style={{          borderBottom: "1px solid black",          background: color,          width: "100%",          height: "100%",          color: bg        }}      >        <img          onClick={e => alert(item.data)}          height={item.height}          src="/images/24404591.jpeg"        />        {item.data}      </div>    );  }  getItem(index) {    let h = 100;    if (index != 0 && index % 3 == 0) {      h = 120;    }    if (index != 0 && index % 5 == 0) {      h = 160;    }    return { height: h, data: items[index] };  }  getSize() {    return items.length;  }}let height = 600;const handler = new Handler();const tools = {  onScroll: null,  updataView: null};export default class Demo extends React.Component {  constructor(props) {    super(props);    window.onresize = e => {      this.changeHeight();    };    this.state = {      height: 200    };    this.changeHeight();  }  changeHeight() {    let h = window.innerHeight - 200;    h = h < 200 ? 200 : h;    viewSubject.height = h;    viewSubject.next({ height: h, demo: this });  }  render() {    return (      <div>        <div style={{ float: "left" }}>          <ListView            isShowScroll={true}            tools={tools}            width={300}            height={this.state.height}            handler={handler}          />        </div>        <div style={{ float: "left", marginLeft: "10px" }}>          <div>U can change the browser's height to look at the result</div>        </div>      </div>    );  }}

最后我通过直接生成div item与ListView做了比较。因为懒得设计view，所以item内只是简单填充数字，因此只能加大数量来测试。div直接生成直接在一万条项目的情况下卡死，而ListView秒读。

现在真实项目中已经有所使用，item条目最高时达到两千条依然没有任何性能问题，效果非常显著，而以前的普通item则直接卡死。

github地址：https://github.com/Saberteeth/react-redux-utils