对于 React 中 key 的理解

  • 时间:
  • 浏览:
  • 来源:互联网

一、React 中的 key

  1. React 中,虚拟 DOMkey 的作用,如下所示:
  • 简单的说,key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用
  • 详细的说,当列表数组中的数据发生变化生成新的虚拟 DOM 后, React 进行新旧虚拟 DOMdiff 比较
  1. 对于虚拟 DOMdiff 比较,如下所示:
  • key 没有变,item 数据没变, 直接使用原来的真实 DOMitem 数据变了, 对原来的真实 DOM 进行数据更新
  • key 变了,销毁原来的真实 DOM, 根据 item 数据创建新的真实 DOM 显示(即使 item 数据没有变)
  1. 对于 keyindex 的问题,如下所示:
  • 添加/删除/排序,产生没有必要的真实 DOM 更新,界面效果没问题, 但效率低
  • 如果 item 界面还有输入框,产生错误的真实DOM 更新,界面有问题
  • 如果不存在添加/删除/排序操作, 用 index 没有问题
  1. 对于 keyindex 的问题解决,如下所示:
  • 使用 item 数据的标识数据作为 key, 比如 id 属性值
  1. 那么可以用 index 作为 key,需要分情况,如下所示:
  • 不能有的情况是添加、删除和排序
  • 可以有的情况是更新元素内部的数据
  1. 对于 Reactkey 的简单应用,如下所示:
<!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>
            &nbsp;
            <button onClick={this.remove}>remove first</button>
            &nbsp;
            <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>

本文链接http://www.dzjqx.cn/news/show-617084.html