学习笔记
react-virtualized 可视区渲染数据 专对大数量数据进行渲染的 GitHub地址 https://github.com/bvaughn/react-virtualized
对大列表数据 ，大表格 渲染 非常建议 使用 reac-virtualized渲染 可视区渲染 比懒加载渲染好多了
懒加载 只解决部分数据渲染问题 ，数据量 一大 操作的dom元素过多 同样会导致 浏览器卡死
可视区渲染 只渲染可见的区域，多加载一点可视区之外的数据 防止 白屏
1.安装react-virtualized
npm install react-virtualized --save
2.约会样式
导入 ' react-virtualized / styles.css ' ;3.按需引入你想用什么就引入什么我这里使用列表list
按图操作在GitHub上找到list源码地方
自使用高宽的
从'react' 导入React
import ReactDOM from 'react-dom'
import { AutoSizer, List } from 'react-virtualized'
// List data as an array of strings
const list = Array(1000).fill('Brian Vaughn')
function rowRenderer({ key, index, style }) {
return (
<div key={key} style={style}>
{list[index]}
</div>
)
}
// Render your list
ReactDOM.render(
<AutoSizer>
{({ height, width }) => (
<List
height={height}
rowCount={list.length}
rowHeight={20}
rowRenderer={rowRenderer}
width={width}
/>
)}
</AutoSizer>,
文件。getElementById（'example'）
）
