在 javascript 中映射大型数组而不会导致浏览器崩溃

Question

所以我要映射的数组包含大约 10000 到 25000 个对象，所有对象如下所示：

{
 name:"NewYork",
 code:"NY",
 fullName:"NewYork city",
 id:"2",
}

所以我用来映射这个数组的方式就像我映射所有其他列表一样，但这里的问题是它会导致浏览器崩溃，但我在其他一些网站上看到，它们很容易管理做同样的事情，没有任何问题或他们的浏览器变慢，所以我在徘徊是否有一种方法可以在不影响性能和浏览器崩溃的情况下处理这个问题，顺便说一句，我映射数组如下：

this.state.CitiesList.map(item =>
     <li className="option" key={item.code}>
        {item.name}
     </li>
)

Answer 1

长列表的问题是 React 需要渲染所有项目，这会导致浏览器延迟。

如果要渲染整个列表，有一种技术叫做开窗，看看react-window。它只是渲染您在视口中看到的内容。当您滚动时，它也会呈现其他项目。

以下是 react-window 工作原理的示例： React Window Example

import { FixedSizeList as List } from 'react-window';
 
const longList = [/* very long list of items */];

const Row = ({ item, index }) => (
  <div>Row {index}</div>
);
 
const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {longList.map((item, index) => <Row item={item} index={index} /> )}
  </List>
);

您还可以使用分页功能来防止呈现整个数组。

在 javascript 中映射大型数组而不会导致浏览器崩溃

Map large Arrays without browser crashing in javascript

javascript

arrays

mapping

reactjs