zent/src/select/demos/7.virtual-scroll.md

一套前端设计语言和基于React的实现

---
order: 7
zh-CN:
	title: 大量数据
	placeholder: 选择一项
en-US:
	title: Tons of options
	placeholder: Select an option..
---

```js
import { Select } from 'zent';
import { FixedSizeList } from 'react-window';

const OPTIONS = Array(100000)
	.fill(null)
	.map((_, index) => ({
		key: String(index),
		text: `Option ${index}`,
	}));

function renderOptionList(options, renderOption) {
	return (
		<FixedSizeList
			height={8.5 * 32}
			itemCount={options.length}
			itemSize={32}
			width={240}
		>
			{({ index, style }) => (
				<div style={style}>{renderOption(options[index], index)}</div>
			)}
		</FixedSizeList>
	);
}

ReactDOM.render(
	<Select clearable options={OPTIONS} placeholder="{i18n.placeholder}" renderOptionList={renderOptionList} />,
	mountNode
);
```