react为什么不推荐使用index作为key

1.旧的虚拟dom和新的虚拟dom对比，首先看他们的key是否相同
2.相同继续对比他们的内容，不同生成新的真实dom进行替换
3.如果内容和key都相同，复用旧的真实dom 不做改变

那么如果我们使用遍历时候自动生成的index作为每个节点的key可能会出现什么问题呢？ 下面放个小案例

首先，初始时我们进行遍历persons

他会是这样一个过程，源数据

persons: [
{ id: 1, name: “张三”, age: 15 },
{ id: 2, name: “李四”, age: 16 },
],

生成的真实dom节点

<ul>
      <li key="0">张三--15</li>
      <li key="1">李四--16</li>
    </ul>

然后我们在这个名单前面插入一个{id:3,name:‘王五',age:14}的数据会变成这样子

<ul>
   <li key="0">王五--14</li>
      <li key="1">张三--15</li>
      <li key="2">李四--16</li>
    </ul>

通过上面的更新可以发现 王五将之前张三的key给占用了
也就是说当我进行更新这一过程首先新的虚拟dom

<li key="0">王五--14</li>

和旧的虚拟dom

<li key="0">张三--15</li>

进行比较 新的dom先比较key两人相同，在比较内容一个是王五–14 一个是张三15 ,内容发生变化了，这时就会进行使用新的虚拟dom生成新的真是dom重新渲染页面，而且不仅是之前的张三受影响需要重新生成，后面的李四也要被张三进行替换在生成一个新的内容为张三的真实dom，这样就会导致所有的dom都要重新生成重新渲染，导致性能下降

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

    <div id="root"></div>
    <script type="text/babel">
      let root = document.getElementById("root");
      class App extends React.Component {
        constructor(props) {
          super(props);
        }
        state = {
          persons: [
            { id: 1, name: "张三", age: 15 },
            { id: 2, name: "李四", age: 16 },
          ],
        };
        handle = () => {
          const { persons } = this.state;
          const p = {
            id: 0,
            name: "王五",
            age: 14,
          };
          this.setState({
            persons: [p, ...persons],
          });
        };
        render() {
          return (
            <div>
              <button onClick={this.handle}>点击添加</button>
              <ul>
                {this.state.persons.map((person, index) => (
                  <li key={index}>
                    {person.name}--{person.age}
                  </li>
                ))}
              </ul>
            </div>
          );
        }
      }
      ReactDOM.render(<App name="hell" />, root);
    </script>
  </body>
</html>

试想一下经过上面的推导致，如果我们使用id作为唯一的key值会怎么样呢

更新前

<ul>
      <li key="1">张三--15</li>
      <li key="2">李四--16</li>
    </ul>

更新后

<ul>
   <li key="0">王五--14</li>
      <li key="1">张三--15</li>
      <li key="2">李四--16</li>
    </ul>

这次 虽然王五插入的还是张三的前面但是只对比了一次 王五和上面是否有一样的key=0的节点 ，没有生成新的真实dom进行渲染，而张三和上面key=1的进行对比，发现上面有一个key=1的节点，然后再对比他们的内容是否相同，发现内容也相同，那么就可以复用旧的真实dom，节约性能

到此这篇关于react为什么不推荐使用index作为key的文章就介绍到这了,更多相关react index作为key内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2.0移除或更改的一些东西(移除index key)

    vue2.0移除或更改的一些东西(移除index key)

    一.vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲染是怎么写的 <template> <div class="hello"> <ul> <li v-for="item in list">{{

  • vue中使用v-for时为什么不能用index作为key

    结论: 更新DOM的时候会出现性能问题 会发生一些状态bug React 中的 key 也是如此 如果已经了解 为什么要用key,可以通过目录直接跳到下一节. 为什么要用key? Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 同一

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

  • react为什么不推荐使用index作为key

    1.旧的虚拟dom和新的虚拟dom对比,首先看他们的key是否相同 2.相同继续对比他们的内容,不同生成新的真实dom进行替换 3.如果内容和key都相同,复用旧的真实dom 不做改变 那么如果我们使用遍历时候自动生成的index作为每个节点的key可能会出现什么问题呢? 下面放个小案例 首先,初始时我们进行遍历persons 他会是这样一个过程,源数据 persons: [ { id: 1, name: "张三", age: 15 }, { id: 2, name: "李四

  • Vue 中为什么不推荐用index 做 key属性值

    Vue 中为什么不推荐用index 做 key属性值

    目录 前言 key 的作用 key 在 diff 算法中的角色 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 最长递增子序列 为什么不要用 index 性能消耗 数据错位 解决方案 总结 前言 前端开发中,只要涉及到列表渲染,那么无论是 React 还是 Vue 框架,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理.那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key

  • React 中的列表渲染要加 key的原因分析

    React 中的列表渲染要加 key的原因分析

    目录 为什么需要 key? 列表渲染不提供 key 会怎样? 列表渲染的 key 用数组索引会怎样? 应该用什么值作为 key? 结尾 在 React 中我们经常需要渲染列表,比如展示好友列表. 常用写法是用 Arrary.prototype.map 方法,将数组形式的数据映射为 JSX.Element 数组,并嵌入到组件要返回的 JSX.Element 中,如下: function FriendList() { const [items, setItems] = useState(['我们',

  • Vue页面渲染中key的应用实例教程

    Vue页面渲染中key的应用实例教程

    引言 在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码值转换及字段信息展示均有问题. 问题分析 通过阅读代码结构,发现el-table-column通过template循环生成,由于template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上.有关表格数据渲染中key的作用如下: key作为一个DOM节点

  • Vue开发实例探究key的作用详解

    目录 前言 为什么不推荐使用 index 作为 key? 如果 key 重复会导致什么样的错误? 使用 key 和不使用 key 有什么差别? key的实际应用 上述结论在Vue3中也成立吗? 总结 使用key 不使用key 前言 一提到 vue 中的 key,你会想到什么?使用v-for时需要使用 key ?key 不能重复?建议不要使用 index 来做key的值?这究竟是为什么呢?就下来我们就一起来通过实例来一探究竟. 为什么不推荐使用 index 作为 key? 我们先来看两个例子 为了

  • 详解React之key的使用和实践

    在渲染列表时,React的差异比较算法需要一个在列表范围内的唯一key来提高性能(通常用于获知哪个列表项改变了).这个唯一的key需要我们手动提供.React官方建议使用列表数据中可用于唯一性标识的字段来作为列表项渲染时的key.如果实在没有,则可使用数组的index勉为其难,性能上可能会打折扣. 一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码

  • React key值的作用和使用详解

    在react项目中总会遇到这样一个的坑 这是警告数组遍历子元素要有一个唯一的key值,但是key到底是什么,在代码中到底起了什么作用? key概述 react中的key属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后,也仍无法获取这个组件的key值),而是给react自己用的. 简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样.每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

随机推荐