react中的key怎么使用
这篇“react中的key怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react中的key怎么使用”文章吧。
成都创新互联是专业的江津网站建设公司,江津接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行江津网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
在react中,key用于识别组件,可在DOM中的某些元素被增加或删除时识别哪些元素发生了变化,是一种身份标识;可以根据key来决定是销毁还是更新组件,若key相同,组件有变化就只更新组件相应的属性,若key不同,会销毁之前的组件重新渲染。
本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。
react中key的用法是什么
简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。
Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
react的diff算法是把key当成唯一id然后比对组件的value来确定是否需要更新的,所以如果没有key,react将不会知道该如何更新组件。
你不传key也能用是因为react检测到子组件没有key后,会默认将数组的索引作为key。
react根据key来决定是销毁重新创建组件还是更新组件,原则是:
key相同,组件有所变化,react会只更新组件对应变化的属性。
key不同,组件会销毁之前的组件,将整个组件重新渲染。
key的使用场景
在项目开发中,key属性的使用场景最多的还是由数组动态创建的子组件的情况,需要为每个子组件添加唯一的key属性值。那会有的人就会自然而然想到,key和动态渲染的子元素获取的index位置的值很接近,那不是可以直接用index附上key的值呢key={index}?
例如:
{dataList.map((item,index)=>{ return{item.name}}) }
在你尝试过后会发现,报错没了,渲染也没问题不是很正常嘛?!但是强烈不推荐用数组index来作为key。
如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。
例如:
本来index=2的元素向前移动后,那该元素的key不也同样发生了改变那这样会改变的Key就没有任何的存在意义,既然是作为“身份证”一样的存在,那就不容有失。当然,在你用key值创建子组件的时候,若数组的内容只是作为纯展示,而不涉及到数组的动态变更,其实是可以使用index作为key的。
以上就是关于“react中的key怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
分享标题:react中的key怎么使用
标题网址:http://pwwzsj.com/article/jicccd.html