码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-16 00:59:34      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:元素   通过   pre   name   创建   自己   dex   dom   key   

一、React中key值得作用

react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建

 

key值相同

如果两个元素是相同的key,且满足第一点元素类型相同, 若元素属性有所变化,则React只更新组件对应的属性,这种情况下,性能开销会相对较小

 

key值不同

在render函数执行的时候,新旧两个虚拟DOM会进行对比,如果两个元素有不同的key,那么在前后两次渲染中就会被认为是不同的元素,这时候旧的那个元素会被unmount,新的元素会被mount

//更新前
render(){
  return (
      <List key = ‘1‘/>
    );
}
//更新后
render(){
  return (
      <List key = ‘2‘/>
    );
}

 

 

 

二、例子

//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>

 

如果没有key值得情况下,react并不会执行插入操作,他直接会移除原先的第二个子元素,然后再append进去剩下的子元素,而其实我们这个操作只只需要一个insert操作就能完成。为了解决这种问题,react需要我们提供给一个key来帮助更新,减少性能开销

 

如果有key值得情况下,react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素,原先的第二个元素被挪到下面去了,因此在操作的时候就会直接指向insert操作,来减少dom操作的性能开销

 

三、不推荐用属性中的index来做key值

大部分情况下我们要在执行数组遍历的时候会用index来表示元素的key。这样做其实并不是很合理。我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系,防止发生不必要的更新操作。那么如果我们用index来标识key,数组在执行插入、排序等操作之后,原先的index并不再对应到原先的值,那么这个key就失去了本身的意义,并且会带来其他问题

 

四、注意事项

React中的key 值必须保证其唯一和稳定性

下面案例中key的值以Math.random() 随机生成而定,这使得数组元素中的每项都重新销毁然后重新创建,有一定的性能开销

{
        dataList.map((item,index)=>{
            return <div style={mystyle} key={Math.random()}>{item.name}</div>
        })
}

 

 

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

标签:元素   通过   pre   name   创建   自己   dex   dom   key   

原文地址:https://www.cnblogs.com/nanianqiming/p/11361364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!