处理反应中的动态增长列表

Question

我有一个用于显示列表的组件，该组件是从父组件呈现的。我目前正在使用for循环生成此列表的内容。喜欢 -

let content = []
for (let i = 0; i < list.length; i++) {
  content.push(
    <div>
      <p> list[i].something </p>
      <p> list[i].somethingElse </p>
    </div>
  )
}

return content;

现在，只要将新对象添加到此列表中，就会呈现列表中的所有先前对象以及新添加的对象。当列表包含大约1000个对象时，这变得非常慢。

有没有一种方法可以只添加和渲染新添加的内容，而无需再次重新呈现列表中的所有先前条目？

Answer 1

这主要是因为你没有添加qazxsw poi，在为每个列表项设置id后尝试以下代码并将其分配给key prop。

key

如果列表是不变的静态列表，则索引也可以用作键道具的值。

let content = []
for (let i = 0; i < list.length; i++) {
  content.push(
    <div key={list[i].id}>
      <p> list[i].something </p>
      <p> list[i].somethingElse </p>
    </div>
  )
}

return content;

Answer 2

您应该为每个项目呈现列表项组件的唯一ID。您可以在ES6上执行以下操作：

let content = []
for (let i = 0; i < list.length; i++) {
  content.push(
    <div key={i}>
      <p> list[i].something </p>
      <p> list[i].somethingElse </p>
    </div>
  )
}

return content;