使用数组渲染大型列表时，React 组件的性能会降低

Question

<div className="listCheckbox">
{objects.map((e) => {
return (
<div key={e.value}>
<FormControlLabel control={<Checkbox />} label={e.label} />
</div>
);
})}
</div>
//css----------------------------------------------------------------------------------
.listCheckbox {
max-height: 350px;
overflow-y: scroll;
}

这里的对象是一个状态类型数组，包含250多条记录。如何使用相同样式的更有效地渲染

Answer 1

您可以使用分页并限制记录，而不是全部显示。当你尝试渲染更多时，你可以把它添加到previous state中，这样你就不会丢失previous fetched records，它会得到更好的优化。

Answer 2

以下是加载大数据列表的一些方法：

注意：为了方便起见，我在括号中提到了一些npm库，但这些功能也可以自行实现。

1. 分页(https://www.npmjs.com/package/react-paginate)
2. 无限涡旋(https://www.npmjs.com/package/react-infinite-scroll-component)

还可以查看此博客了解更多选项和解释。

Answer 3

如果您对分页不感兴趣，应该使用虚拟列表。

您可以使用虚拟化反应，或者尝试从头开始构建