我們使用item'id或item'name作為item的鍵。但是我發(fā)現(xiàn)我使用Array的索引作為鍵,重新呈現(xiàn)頁面的速度更快。我們總是提醒您使用id或name作為密鑰,這是錯誤的嗎?我進行了兩個演示進行比較,發(fā)現(xiàn)索引比id的唯一值要快。我們單擊btn來調用changeSort方法以重新呈現(xiàn)頁面。您可以找到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作為鍵來重新渲染頁面比使用數(shù)組索引作為鍵更快,但是事實恰恰相反。
為什么我們使用item'id或item'name作為反應列表項目的鍵?
慕森王
2021-04-07 16:19:57