Javascript 如果状态更改，将销毁组件中的所有旧DOM吗？

我有一个组件，它有如下项目列表：

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>
    )
}

loadMore（）{
const len=this.state.itemList.length；
如果（透镜<1000）{
constnewitems=Array.from（{length:10}，（v，i）=>“item-”+（i+len））；
this.setState（{itemList:this.state.itemList.concat（newItems）}）；
}否则{
警惕（“不再”）；
}
}
render（）{
返回(

this.state.itemList.map（（item，i）=>
项
)

加载
)
}

因此，当我单击加载时，将删除所有旧的DOM，然后重新创建它们？

事实上，我只是添加元素，而不是替换它们，因此如果react这样做，性能就不太好，我如何避免这种情况？这是一个很好的问题

React将尽可能重用DOM

在您的示例中，您使用的

键将在每个循环中重复，因为它是基于索引的。它将在每个循环中从0变为n每当重复按键时，DOM将被重新使用并更新内容。

这两个文档可以帮助您了解更多信息：




如react文档中所述：

render（）控制传递的容器节点的内容
在里面第一次调用时，将替换其中的任何现有DOM元素。
以后的调用使用React的DOM扩散算法进行高效更新

render（）不修改容器节点（仅修改
容器的子容器）。将来，有可能
将组件插入到现有DOM节点，而不覆盖
现有儿童

因此，react显然不会删除所有旧的DOM并重新创建它们，而是基于当前和以前的DOM之间的差异来呈现DOM

在您的情况下，您正在为
组件使用键，因此react将检查键，并在匹配的地方保留该部分DOM并更新新条目

当您更改状态时，它将调用组件的渲染方法。然后，它将比较由render方法创建的新DOM和仅已更改组件的已渲染DOM，并将使用diffing算法替换/添加/删除仅更改的部分。
据我所知，React不会销毁和重新创建元素，只要它们设置了正确的关键帧。它只会添加新元素，而使用索引作为键不是一个好方法idea@erdysson那么什么是更好的选择呢？它应该是每个项目都是唯一的，即使它们没有呈现。例如，如果您有一个用户列表，那么唯一的用户ID是不错的选择