当块被删除/更改位置时，如何呈现列表以响应智能反应？答案

【问题标题】：How to render list in react with smart reaction when block is removed/changed position?当块被删除/更改位置时，如何呈现列表以响应智能反应？
【发布时间】：2019-12-01 19:59:17
【问题描述】：

基本逻辑（在生活中它是带有 immutable.js 的 redux 存储）：

render() {
    const data =[{"name":"test1"},{"name":"test2"},{"name":"test3"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems}
      </div>
    );
  }

我们有一些“数据存储”，例如 data 和 .map，它们会呈现这种结构。

我的问题是性能。

react 如何使用它：当我们在 data 中有 10 000 行并更改一个位置/添加新/删除一些时，它会为 10k 行中的每一行运行 .map 并检查差异。这是一个很长的操作（~600ms）。

我不会做的事情：当我删除例如第 100 个元素（与添加/更改顺序相同）时，我知道只有一个元素被更改，React 必须从 DOM 和 Virtual 中只删除那个元素DOM 并且不要使用更改检测器再次运行 .map 并使用 10k 行。

任何想法/库/技术如何做这样的事情（防止检查整个数组）？

【问题讨论】：

您只能渲染当前视口所需的元素。您也可以将display: none; 应用于您要删除的元素而不实际删除（取决于您的用例）。
@JohnRuddell 的问题完全不同。我至少需要添加和更改订单。
这就是为什么我说取决于你的用例。浏览器可能会在将这么多元素渲染到 DOM 中时遇到问题。您的问题与此更相关。我会根据您的视口限制您渲染的内容。只喜欢当前视口前后的 X 行数，顶部有一个填充来模拟滚动容器的大小。
@JohnRuddell 大声笑，浏览器非常容易绘制 10k div 并用于 ex appendChild 添加新元素。但是反应缪斯运行.map 及其HEAVY 操作，这是问题。在 vanilaJS 中，这个例子需要 ~10ms，反应 ~600ms 移动 1 个 div

标签： reactjs redux

【解决方案1】：

对于超过几个 hundert 项目的所有内容，您应该使用 react-virtualized 或 react-list。这为您节省了最大化性能的麻烦，也减少了浏览器必须做的工作量。它仅在当前视口（可见项目）和下方和上方渲染视图以启用平滑滚动。您的所有性能问题都将得到解决，因为不会为所有 10 000 个项目调用 map 函数。更改或删除项目将是即时的。

【讨论】：

我需要页面上的整个项目列表。问题完全不同
即使在整个页面上，您也几乎无法渲染 10 000 个项目。所以大多数项目无论如何都没有显示，或者你的视图看起来如何？