我们使用item'id或item'name作为item的键。但是我发现我使用Array的索引作为键，重新呈现页面的速度更快。我们总是提醒您使用id或name作为密钥，这是错误的吗？
我进行了两个演示进行比较，发现索引比id的唯一值要快。我们单击btn来调用changeSort方法以重新呈现页面。您可以找到ID，因为密钥比较慢
constructor(){
super();
this.state = {
sorts: this.buildArr()
}
}
buildArr = () => {
let len = 10000, tempArr = [];
for (let i = 1; i < len; i++) {
tempArr.push({
name: `a${i}`,
id: `b${i}`
})
}
return tempArr;
}
changeSort = () => {
this.setState((prestate) => ({
sorts: prestate.sorts.reverse()
}))
}
render() {
return (
<div>
<div onClick={this.changeSort}>changeState</div>
<ul>
{this.state.sorts.map((item, index) => {
return <li key={index}>{item.name} </li>
})}
</ul>
</div>
)
}
compare with
render() {
return (
<div>
<div onClick={this.changeSort}>changeState</div>
<ul>
{this.state.sorts.map((item, index) => {
return <li key={item.id}>{item.name} </li>
})}
</ul>
</div>
)
}
我希望我使用item'id作为键来重新渲染页面比使用数组索引作为键更快，但是事实恰恰相反。
Helenr
相关分类