react 、vue中key值的作用

   key值的作用主要用来减少没必要的diff算法的对比,对于同一个组件或者节点来说,只要父节点状态或属性发生改变,该组件就会进行diff
   对比,即使该组件没有发生改变;如果为该组件引入key值,在进行diff对比前先做一次校验,判断该组件是否需要diff对比,也可以判断该
   组件是直接更新操作还是销毁或者新建操作,从而提高了diff算法的效率;特别在渲染同级同结构的组件们时,key可以为它们加上了身份的
   标志,在rerender时,可以通过key来判断该组件是否已经存在,是否需要跟新或者销毁,新建等操作,提高了diff算法在同级节点上的操作。
   原理: 因为在reactelement中有一个属性是key,该属性默认是为空值,所以一般情况下,只要组件不加上key值,react是不会去校验组件
   的key,而是直接采用diff算法进行对比,一旦组件加上了key值,react就会在渲染时对该组件的身份进行校验,首先校验新旧组件的key值
   是不是一致,不一致的话,该组件直接销毁,然后在新建该组件;如果一致,则比较组件的属性是否发生变化,如果发生变化,则采用diff算
   法进行对比,然后得出差异对象,如果属性没发生变化,则认为该组件不需要改变;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值