react中key的作用

34次阅读

共计 1216 个字符,预计需要花费 4 分钟才能阅读完成。

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

key 相同:若组件属性有所变化,则 react 只更新组件对应的属性;没有变化则不更新。
key 值不同:则 react 先销毁该组件,然后重新创建该组件。

用法:
(一般同级同结构的子节点都需要采用 key 属性,方便 diff 算法的使用)

纯静态的同级同结构节点的渲染,可以采用 index 作为 key 的值,因为这里不需要动态去变化节点里面的内容的值;
对于一组动态变化的数组来说,采用 index 作为 key 的值,会有可能出现问题,因为 index 的值和数组内的元素内容不具有关联性,所以即使采用了 index 作为 key,子组件的内容有可能不会随着属性的变化而发生变化(只要组件内该元素不与属性构成联系),所以一般采用数组中元素的某一个唯一值作为 key,这样一来,只要统一位置的节点的 key 值不一致,就会直接销毁和新建而不是直接更新;
对于一个不想受到父组件属性状态影响而导致没必要的渲染的组件,可以采用 key 值,因为只要 key 值不发生改变,组件的属性不变,即使父组件渲染,该组件也不会发生变化,只有组件的状态或者属性发生变化,组件才会二次渲染;一旦 key 值变化,就直接组件销毁然后再新建该组件。

以上就是我对 react 中 key 的认识和了解,虽然没有过多的深入研究 react 里面关于 key 的源码分析,但通过这篇博客,也会一定程度上对 react 的 key 有更深入的认识,若有不正确的地方,欢迎指出。

正文完
 0