为什么我们使用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。