我有一个组件有一个像这样的项目列表:
loadMore() {
const len = this.state.itemList.length;
if (len < 1000) {
const newItems = Array.from({length:10}, (v,i) => "item-" + (i+len));
this.setState({itemList: this.state.itemList.concat(newItems)});
} else {
alert("no more");
}
}
render() {
return (
<div>
<ul>
this.state.itemList.map((item, i) =>
<li key={i}>item</li>
)
</ul>
<a onClick={this.loadMore.bind(this)}>Loading</a>
</div>
)
}
那么,当我点击 Loading
时,会 react 删除所有旧的 dom 然后重新创建它们吗?
其实我只是添加元素,而不是替换元素,所以如果react这样做,性能不是很好,如何避免这种情况?
最佳答案
好问题。
React 将尝试尽可能重用 DOM。
在您的示例中,您使用 key
它将在每个循环中重复,因为它是基于索引的。它会在每个循环中从 0 到 n。 每当重复键时,DOM 将被重用并更新内容。
这两个文档可以帮助您了解更多信息:
关于javascript - 如果状态改变, react 会破坏组件中的所有旧 dom 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38113559/