为什么我们使用item'id或item'name作为反应列表项目的键？

Question

我们使用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作为键来重新渲染页面比使用数组索引作为键更快，但是事实恰恰相反。

Answer 1

当您只需要更新集合的一部分时，跟踪发光的好处。说，数百个瓷砖中的一个已更改。要知道哪个更改了（哪个需要更新），需要一些唯一的标识符。因此key。