对于 React 中 key 的理解

心已赠人 2022-11-11 14:42 212阅读 0赞

#### 一、React 中的 key ####

1.  在 `React` 中，虚拟 `DOM` 的 `key` 的作用，如下所示：

*  简单的说，`key` 是虚拟 `DOM` 对象的标识, 在更新显示时 `key` 起着极其重要的作用
 *  详细的说，当列表数组中的数据发生变化生成新的虚拟 `DOM` 后, `React` 进行新旧虚拟 `DOM` 的 `diff` 比较

1.  对于虚拟 `DOM` 的 `diff` 比较，如下所示：

*  `key` 没有变，`item` 数据没变, 直接使用原来的真实 `DOM`；`item` 数据变了, 对原来的真实 `DOM` 进行数据更新
 *  `key` 变了，销毁原来的真实 `DOM`, 根据 `item` 数据创建新的真实 `DOM` 显示(即使 `item` 数据没有变)

1.  对于 `key` 为 `index` 的问题，如下所示：

*  添加/删除/排序，产生没有必要的真实 `DOM` 更新，界面效果没问题, 但效率低
 *  如果 `item` 界面还有输入框，产生错误的真实`DOM` 更新，界面有问题
 *  如果不存在添加/删除/排序操作, 用 `index` 没有问题

1.  对于 `key` 为 `index` 的问题解决，如下所示：

*  使用 `item` 数据的标识数据作为 `key`, 比如 `id` 属性值

1.  那么可以用 `index` 作为 `key`，需要分情况，如下所示：

*  不能有的情况是添加、删除和排序
 *  可以有的情况是更新元素内部的数据

1.  对于 `React` 中 `key` 的简单应用，如下所示：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>key</title>
    </head>
    <body>
    
    <div id="root"></div>
    
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    
    <script type="text/babel"> const time = Date.now() class PersonList extends React.Component { state = { persons: [ { id: time, name: 'Tom', age: 13}, { id: time +1, name: 'Jack', age: 12}, ] } add = () => { const persons = [...this.state.persons] persons.unshift({ id: Date.now(), name: 'Bob', age: 14}) this.setState({ persons}) } remove = () => { const persons = [...this.state.persons] persons.shift() this.setState({ persons}) } sort = () => { const persons = [...this.state.persons] persons.sort((p1, p2) => p1.age - p2.age) this.setState({ persons}) } render() { const persons = this.state.persons return ( <div> <div> <button onClick={ this.add}>add first</button>   <button onClick={ this.remove}>remove first</button>   <button onClick={ this.sort}>sort</button> </div> <h2>使用id作为key</h2> <ul> { persons.map((p, index) => <li key={ p.id}>{ p.id}--{ p.name}--{ p.age}--<input/></li> ) } </ul> <h2>使用index作为key</h2> <ul> { persons.map((p, index) => <li key={ index}>{ p.id}--{ p.name}--{ p.age}--<input/></li> ) } </ul> </div> ) } } ReactDOM.render( <PersonList/>, document.getElementById('root') ) </script>
    </body>
    </html>