如何在 ReactJS 中快速过滤大型 json 数据集

Question

我有一个大型 json 数据集，例如： [ {"日期":"2020-03-02", "状态："德里"， “区”：“东德里” ...... ...... } ...... ...... ] 我有不同的过滤器，如日期、州、地区、性别、年龄等。我想在各种 Reactjs 组件中显示基于这些过滤器的数据。但加载过滤器需要太多时间，而这些过滤器不是很用户友好.. json 包含超过 50K 的对象并在本地加载..我使用了 for 循环和 if else 条件来过滤数据..但是它花费了太多时间...是否有任何 javascript 或 Reactjs 方法可以做到这一点不一样？？

Answer 1

我的第一个建议是检查花费最多的时间：

• 过滤数据（为了方便检查，您可以在函数调用之前和之后放置控制台日志时间并查看）
• 渲染所有数据（为了方便检查，您可以只渲染 10 个元素，看看它是否更快）
• 也许两者都是（检查前 2 个）

渲染所有数据可能会花费大部分时间，因为渲染 50k 项对于浏览器来说可能很繁重。 所以你有多种选择：

• 分页（但可能对您的用户体验不利）
• 虚拟列表https://github.com/bvaughn/react-virtualized -> 这种库不会直接渲染所有元素，而只会渲染屏幕上可以看到的项目+其他很少的项目，因此如果滚动它会加载更多等，对于用户来说几乎就像所有东西都已经加载了一样