react循环的值为什么要有key_React中key的必要性与使用

React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图。更新的过程是由数据驱动的,新的数据自该组件顶层向下流向子组件,每个组件调用自己的render方法得到新的视图,并与之前的视图作diff-比较差异,完成更新。这个过程就叫作reconciliation-调和。

React通过virtual dom来实现高效的视图更新。基本原理是用纯js对象模拟dom树,每当更新时,根据组件们的render方法计算出新的虚拟dom树,并与此前的虚拟dom树作diff,得到一个patch(差异补丁),最后映射到真实dom树上完成视图更新。而两棵树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。但是在前端当中,很少出现跨越层级移动DOM元素的情况,所以React采用了简化的diff算法,只会对virtual dom中同一个层级的元素进行对比,这样算法复杂度就可以达到 O(n)。

由于React采用的diff算法是对新旧虚拟dom树同层级的元素挨个比较,碰到循环输出的元素时会有一些问题,比如列表。先来看一个例子:

// 旧v-dom

  • first
  • second

// 新v-dom

  • zero
  • first
  • second

React在diff两棵树时,发现原来的两个li元素都与新v-dom中对应位置上的两个li元素不同,就会对其修改,并向真实dom树中插入新的second节点。实际上,我们可能只是进行了在first之前插入新zero节点的操作,而现在进行了额外的修改操作。

React官方文档提示我们应该使用key属性来解决上述问题。key是一个字符串,用来唯一标识同父同层级的兄弟元素。当React作diff时,只要子元素有key属性,便会去原v-dom树中相应位置(当前横向比较的层级)寻找是否有同key元素,比较它们是否完全相同,若是则复用该元素,免去不必要的操作。

延续第一个例子,如果每个li元素都有key属性:

// 旧v-dom

  • first
  • second

// 新v-dom

  • zero
  • first
  • second

现在React就知道了,新增了key为"0"的元素,而"1"与"2"仅仅移动了位置。

key必须是字符串类型,它的取值可以用数据对象的某个唯一属性,或是对数据进行hash来生成key。

{list.map(v=>

{v.text})}

但是强烈不推荐用数组index来作为key。如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。来看下例子:

  • {list.map((v,idx)=>
  • {v})}

// ['a','b','c']=>

  • a
  • b
  • c

// 数组重排 -> ['c','a','b'] =>

  • c
  • a
  • b

React发现key为0,1,2的元素的text都变了,将会修改三者的html,而不是移动它们。

渲染同类型元素不带key只会产生性能问题,如果渲染的是不同类型的状态性组件,组件将会被替换,状态丢失。

class Box extends React.Component {

constructor(p) {

super(p)

this.state = {type: true}

this.handler = this.handler.bind(this)

}

handler() {

this.setState({

type: !this.state.type

})

}

render() {

return (

haha

{this.state.type ?

(

: (

}

)

}

}

如上述代码,每次按下按钮,原Son_1与Son_2组件的实例都将被销毁,并创建新的Son_1与Son_2实例,不能继承原来的状态;而它们实际上只是调换了位置。给它们加上key可以避免问题:

{this.state.type ?

(

: (

}

所以,碰到数组->列表的映射,或是同级元素需要移位的情况,一定要给元素加上key属性!

结论:用key可以提升react的性能,但是在很多地方维护key会增大复制操作业务的复杂程度,需根据情况权衡

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>