【react】-react中key值的作用 - Powered by Discuz! Archiver

我们的生活 發表於 2019-8-16 00:11:00

【react】---react中key值的作用

<h1 class="md-end-block md-heading">一、React中key值得作用</h1>
<blockquote>
react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建
</blockquote>
 
key值相同
<blockquote>
如果两个元素是相同的key，且满足第一点元素类型相同，若元素属性有所变化，则React只更新组件对应的属性，这种情况下，性能开销会相对较小
</blockquote>
 
key值不同
<blockquote>
在render函数执行的时候，新旧两个虚拟DOM会进行对比，如果两个元素有不同的key，那么在前后两次渲染中就会被认为是不同的元素，这时候旧的那个元素会被unmount，新的元素会被mount
</blockquote>
<div class="cnblogs_code">
<pre>//更新前
render(){
return (
 <List key = '1'/>
);
}
//更新后
render(){
return (
 <List key = '2'/>
);
}</pre>
</div>
 
 
 
<h1 class="md-end-block md-heading">二、例子</h1>
<div class="cnblogs_code">
<pre>//tree1
<ul>
<li key='1'>1</li>
<li key='2'>2</li>
</ul>
//tree 2
<ul>
<li key='1'>1</li>
<li key='3'>3</li>
<li key='2'>2</li>
</ul></pre>
</div>
 
<blockquote>
如果没有key值得情况下，react并不会执行插入操作，他直接会移除原先的第二个子元素，然后再append进去剩下的子元素，而其实我们这个操作只只需要一个insert操作就能完成。为了解决这种问题，react需要我们提供给一个key来帮助更新，减少性能开销
 
如果有key值得情况下,react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素，原先的第二个元素被挪到下面去了，因此在操作的时候就会直接指向insert操作，来减少dom操作的性能开销
</blockquote>
 
<h1 class="md-end-block md-heading">三、不推荐用属性中的index来做key值</h1>
<blockquote>
大部分情况下我们要在执行数组遍历的时候会用index来表示元素的key。这样做其实并不是很合理。我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系，防止发生不必要的更新操作。那么如果我们用index来标识key，数组在执行插入、排序等操作之后，原先的index并不再对应到原先的值，那么这个key就失去了本身的意义，并且会带来其他问题
</blockquote>
 
<h1 class="md-end-block md-heading">四、注意事项</h1>
<blockquote>
React中的key 值必须保证其唯一和稳定性
下面案例中key的值以Math.random() 随机生成而定，这使得数组元素中的每项都重新销毁然后重新创建，有一定的性能开销
</blockquote>
<div class="cnblogs_code">
<pre>{
 dataList.map((item,index)=>{
 return <div style={mystyle} key={Math.random()}>{item.name}</div>
 })
}</pre>
</div>
 
  
来源：https://www.cnblogs.com/nanianqiming/p/11361364.html

頁: [1]

琼殿技术论坛's Archiver

【react】---react中key值的作用