react-key的作用

文章参考

  1. 列表 & Keys
  2. React之key详解
  3. 浅谈React diff算法与key

初步认识

React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己用的。如果我们动态地创建 React 元素,而且 React 元素内包含数量或顺序不确定的子元素时,我们就需要提供 key 这个特殊的属性。

react-diff

这里react团队对传统diff算法优化主要基于三个策略:
1.相同层级的节点但DOM结构发生改变-----直接卸载并重新creat
2.相同层级节点但是DOM结构一样-----不会卸载,但是会update
3.所有同一层级的子节点.他们都可以通过key来区分-----同时遵循1.2两点

key相同

若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。

key值不同

则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructor和componentWillUnmount都会执行)

不建议使用索引来进行排序

我们可以思考下,key做为DOM节点标识,如果是前后两次arr分别为[1,2,3,4]和[5,6,7,8]和前后两次arr分别为[1,2,3,4]和[4,3,2,1]的情况,很明显前者可以认为是DOM改变了,后者可以认为是DOM节点的位移操作,那么对于第一种情况来说index作为key和没有key值无区别,但是第二种情况用index作为key值效果没有比用数据本身作为key值好。
key没有变化,只需要更新节点,而key变化了则需要删除和创建节点,对系统开销更大。

key属性是添加到自定义的子组件上,而不是子组件内部的顶层的组件上

前面已经说过,react-diff是针对同一层级去比较,因此key的返回也是针对同一层级,所以我们只需要在同一层级唯一即可。

元素的key在他的兄弟元素之间应该唯一;数组元素中使用的key在其兄弟之间应该是独一无二的。然而,它们不需要是全局唯一的。当我们生成两个不同的数组时,我们可以使用相同的键

key会作为给React的提示,但不会传递给你的组件。

如果您的组件中需要使用和key相同的值,请将其作为属性传递:

const content = posts.map((post) =>
  <post key="{post.id}" id="{post.id}" title="{post.title}">
);
阅读更多
换一批

没有更多推荐了,返回首页