对于 React 中 key 的理解

最新推荐文章于 2024-06-25 14:07:14 发布

城南花开ze

最新推荐文章于 2024-06-25 14:07:14 发布

阅读量521

点赞数

分类专栏： React 文章标签： React key 的理解

本文链接：https://blog.csdn.net/weixin_42614080/article/details/115037045

版权

React 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

一、React 中的 key

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

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

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

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

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

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

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

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

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

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

对于 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>
            &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>

城南花开ze

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对于 React 中 key 的理解

一、React 中的 key在 React 中，虚拟 DOM 的 key 的作用，如下所示：简单的说，key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用详细的说，当列表数组中的数据发生变化生成新的虚拟 DOM 后, React 进行新旧虚拟 DOM 的 diff 比较对于虚拟 DOM 的 diff 比较，如下所示：key 没有变，item 数据没变, 直接使用原来的真实 DOM；item 数据变了, 对原来的真实 DOM 进行数据更新key 变了，销毁原
复制链接

扫一扫

专栏目录