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

这主要是因为您尚未添加key，请在为每个列表项设置ID后将以下代码分配给关键道具，然后尝试以下代码。

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;

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

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;

Answer 2

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

try { JSON.parse(LARGE_JSON) } catch(e) { .. log the error }

处理React JS中的动态增长列表

2 个答案: