源码分析
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。
react利用key来识别组件,它是一种身份标识标识。
这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。
key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。 key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructor和componentWillUnmount都会执行)
另外需要指明的是:
key不是用来提升react的性能的,不过用好key对性能是有帮组的。
key 的使用场景
key属性的使用场景最多的还是由数组动态创建的子组件的情况
key其它注意事项 当然除了为数据元素生成的组件要添加key,且key要稳定且唯一之外,还需要注意以下几点:
key属性是添加到自定义的子组件上,而不是子组件内部的顶层的组件上。
key值的唯一是有范围的,即在数组生成的同级同类型的组件上要保持唯一,而不是所有组件的key都要保持唯一
不仅仅在数组生成组件上,其他地方也可以使用key,主要是react利用key来区分组件的,相同的key表示同一个组件,react不会重新销毁创建组件实例,只可能更新;key不同,react会销毁已有的组件实例,重新创建组件新的实例。
所以在开发过程中,遇到循环渲染组件的时候都会加一个key的属性,而且你会发现子组件是无法获取key的值,因为这个key值是给react内部做标记使用,并非给开发者使用。
最后更新于
这有帮助吗?