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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React合成事件及Test Utilities在Facebook内部进行测试
这篇文章主要介绍了React合成事件及Test Utilities在Facebook内部进行测试，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
react+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
解决React报错Property does not exist on
这篇文章主要为大家介绍了React报错Property does not exist on type 'JSX.IntrinsicElements'解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常，你知道多少种方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就来详细的介绍一下2021-06-06
这篇文章主要介绍了React中如何设置多个className问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
虚拟列表是现在比较常用的前端渲染大数据列表的方案,目前也有很多组件库和工具库也都有对应的实现,本文将给大家介绍一下如何用React实现一个简单的虚拟列表,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了React Native 环境搭建的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文主要介绍了react实现组件状态缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家介绍了ReactJS 应用兼容ios9对标ie11解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论