react-virtualized初体验

业务场景

一次性插入1000条dom，如何不卡顿？如电商列表，朋友圈等等...

懒加载

最常见的方案是使用懒加载，懒加载的形式有很多，如滑动加载，但假设对已加载但不在用户视图的dom做处理，只会造成dom树冗余堆积，对低版本的机型和浏览器不友好，很容易造成卡死现象。

优化

在此基础上，有一个好的思路是列表在用户在视图的部分即渲染，不在的部分则不渲染，节省性能。react的社区非常的丰富，对于长列表的优化提供了react-virtualized库，实现了可视化列表的渲染。

虚拟列表

对于react-virtualized官方提供的介绍是：React components for efficiently rendering large lists and tabular data，即对react组件能高效的渲染长列表和数据。由于react渲染的数据并不是全完整的，我们一般称这种优化为虚拟列表。

使用

node版本：14.0.0 脚手架：create-react-app 虚拟列表：react-virtualized

import React from 'react';
import {List} from 'react-virtualized';


const renderLen = 100;
let ListItem:String[] = [];
for(let i = 0;i < renderLen;i++) {
    ListItem.push(Math.random()+"aaa");
}

function rowRenderer({
 	// 这里可以理解成渲染的内容样式
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
}){
    return (
        <div key={key} style={style}>
            {ListItem[index]}
        </div>
    );
}

function TrueList() {
    return (
        <List
            width={300} //容器的宽
            height={300} //容器的高
            rowCount={ListItem.length} // 列表长度
            rowHeight={20} // 渲染条数
            rowRenderer={rowRenderer} // 渲染函数渲染列表样式
        />
    )
};

export default TrueList;

完成效果

保证了业务需要的效果：规定了视图里的dom渲染，视图外的不渲染，渲染条数固定。