react 、vue中key值的作用

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

你可能感兴趣的:(react,vue,key值的作用)