javascript - 如果状态改变， react 会破坏组件中的所有旧 dom 吗？

Question

我有一个组件有一个像这样的项目列表:

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这样做，性能不是很好，如何避免这种情况？

Answer 1

好问题。

React 将尝试尽可能重用 DOM。

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

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

• Reconciliation
• Dynamic Children