key 有什么作用, 可以省略吗?

在 react 组件开发的过程中, key是一个常用的属性值, 多用于列表开发. 本文从源码的角度, 分析key在react内部是如何使用的, key是否可以省略.

ReactElement 对象

我们在编程时直接书写的jsx代码, 实际上是会被编译成 ReactElement 对象, 所以key是ReactElement对象的一个属性.

构造函数

在把jsx转换成ReactElement对象的语法时, 有一个兼容问题. 会根据编译器的不同策略, 编译成 2 种方案.

  1. 最新的转译策略: 会将jsx语法的代码, 转译成jsx()函数包裹

    jsx函数: 只保留与key相关的代码(其余源码本节不讨论)

    1. /**
    2.  * https://github.com/reactjs/rfcs/pull/107
    3.  * @param {*} type
    4.  * @param {object} props
    5.  * @param {string} key
    6.  */
    7. export function jsx(type, config, maybeKey) {
    8.   let propName;
    10.   // 1. key的默认值是null
    11.   let key = null;
    13.   // Currently, key can be spread in as a prop. This causes a potential
    14.   // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
    15.   // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
    16.   // but as an intermediary step, we will use jsxDEV for everything except
    17.   // <div {...props} key="Hi" />, because we aren't currently able to tell if
    18.   // key is explicitly declared to be undefined or not.
    19.   if (maybeKey !== undefined) {
    20.     key = '' + maybeKey;
    21.   }
    23.   if (hasValidKey(config)) {
    24.     // 2. 将key转换成字符串
    25.     key = '' + config.key;
    26.   }
    27.   // 3. 将key传入构造函数
    28.   return ReactElement(
    29.     type,
    30.     key,
    31.     ref,
    32.     undefined,
    33.     undefined,
    34.     ReactCurrentOwner.current,
    35.     props,
    36.   );
    37. }

  2. 传统的转译策略: 会将jsx语法的代码, 转译成React.createElement()函数包裹

    React.createElement()函数: 只保留与key相关的代码(其余源码本节不讨论)

    1. /**
    2.  * Create and return a new ReactElement of the given type.
    3.  * See https://reactjs.org/docs/react-api.html#createelement
    4.  */
    5. export function createElement(type, config, children) {
    6.   let propName;
    8.   // Reserved names are extracted
    9.   const props = {};
    11.   let key = null;
    12.   let ref = null;
    13.   let self = null;
    14.   let source = null;
    16.   if (config != null) {
    17.     if (hasValidKey(config)) {
    18.       key = '' + config.key; // key转换成字符串
    19.     }
    20.   }
    22.   return ReactElement(
    23.     type,
    24.     key,
    25.     ref,
    26.     self,
    27.     source,
    28.     ReactCurrentOwner.current,
    29.     props,
    30.   );
    31. }

可以看到无论采取哪种编译方式, 核心逻辑都是一致的:

  1. key的默认值是null
  2. 如果外界有显式指定的key, 则将key转换成字符串类型.
  3. 调用ReactElement这个构造函数, 并且将key传入.
  1. // ReactElement的构造函数: 本节就先只关注其中的key属性
  2. const ReactElement = function(type, key, ref, self, source, owner, props) {
  3.   const element = {
  4.     $$typeof: REACT_ELEMENT_TYPE,
  5.     type: type,
  6.     key: key,
  7.     ref: ref,
  8.     props: props,
  9.     _owner: owner,
  10.   };
  11.   return element;
  12. };

源码看到这里, 虽然还只是个皮毛, 但是起码知道了key的默认值是null. 所以任何一个reactElement对象, 内部都是有key值的, 只是一般情况下(对于单节点)很少显式去传入一个 key.

Fiber 对象

react的核心运行逻辑, 是一个从输入到输出的过程(回顾reconciler 运作流程). 编程直接操作的jsx是reactElement对象,我们(程序员)的数据模型是jsx, 而react内核的数据模型是fiber树形结构. 所以要深入认识key还需要从fiber的视角继续来看.

fiber对象是在fiber树构造循环过程中构造的, 其构造函数如下:

  1. function FiberNode(
  2.   tag: WorkTag,
  3.   pendingProps: mixed,
  4.   key: null | string,
  5.   mode: TypeOfMode,
  6. ) {
  7.   this.tag = tag;
  8.   this.key = key; // 重点: key也是`fiber`对象的一个属性
  10.   // ...
  11.   this.elementType = null;
  12.   this.type = null;
  13.   this.stateNode = null;
  14.   // ... 省略无关代码
  15. }

可以看到, key也是fiber对象的一个属性. 这里和reactElement的情况有所不同:

  1. reactElement中的key是由jsx编译而来, key是由程序员直接控制的(即使是动态生成, 那也是直接控制)
  2. fiber对象是由react内核在运行时创建的, 所以fiber.key也是react内核进行设置的, 程序员没有直接控制.

注意: fiber.key是reactElement.key的拷贝, 他们是完全相等的(包括null默认值).

接下来分析fiber创建, 剖析key在这个过程中的具体使用情况.

fiber对象的创建发生在fiber树构造循环阶段中, 具体来讲, 是在reconcileChildren调和函数中进行创建.

reconcileChildren 调和函数

reconcileChildren是react中的一个明星函数, 最热点的问题就是diff算法原理, 事实上, key的作用完全就是为了diff算法服务的.

注意: 本节只分析 key 相关的逻辑, 对于调和函数的算法原理, 请回顾算法章节React 算法之调和算法

调和函数源码(本节示例, 只摘取了部分代码):

  1. function ChildReconciler(shouldTrackSideEffects) {
  2.   function reconcileChildFibers(
  3.     returnFiber: Fiber,
  4.     currentFirstChild: Fiber | null,
  5.     newChild: any,
  6.     lanes: Lanes,
  7.   ): Fiber | null {
  8.     // Handle object types
  9.     const isObject = typeof newChild === 'object' && newChild !== null;
  11.     if (isObject) {
  12.       switch (newChild.$$typeof) {
  13.         case REACT_ELEMENT_TYPE:
  14.           // newChild是单节点
  15.           return placeSingleChild(
  16.             reconcileSingleElement(
  17.               returnFiber,
  18.               currentFirstChild,
  19.               newChild,
  20.               lanes,
  21.             ),
  22.           );
  23.       }
  24.     }
  25.     //  newChild是多节点
  26.     if (isArray(newChild)) {
  27.       return reconcileChildrenArray(
  28.         returnFiber,
  29.         currentFirstChild,
  30.         newChild,
  31.         lanes,
  32.       );
  33.     }
  34.     // ...
  35.   }
  37.   return reconcileChildFibers;
  38. }

单节点

这里先看单节点的情况reconcileSingleElement(只保留与key有关的逻辑):

  1. function reconcileSingleElement(
  2.   returnFiber: Fiber,
  3.   currentFirstChild: Fiber | null,
  4.   element: ReactElement,
  5.   lanes: Lanes,
  6. ): Fiber {
  7.   const key = element.key;
  8.   let child = currentFirstChild;
  9.   while (child !== null) {
  10.     //重点1: key是单节点是否复用的第一判断条件
  11.     if (child.key === key) {
  12.       switch (child.tag) {
  13.         default: {
  14.           if (child.elementType === element.type) {
  15.             // 第二判断条件
  16.             deleteRemainingChildren(returnFiber, child.sibling);
  17.             // 节点复用: 调用useFiber
  18.             const existing = useFiber(child, element.props);
  19.             existing.ref = coerceRef(returnFiber, child, element);
  20.             existing.return = returnFiber;
  21.             return existing;
  22.           }
  23.           break;
  24.         }
  25.       }
  26.       // Didn't match.
  27.       deleteRemainingChildren(returnFiber, child);
  28.       break;
  29.     }
  30.     child = child.sibling;
  31.   }
  32.   // 重点2: fiber节点创建, `key`是随着`element`对象被传入`fiber`的构造函数
  33.   const created = createFiberFromElement(element, returnFiber.mode, lanes);
  34.   created.ref = coerceRef(returnFiber, currentFirstChild, element);
  35.   created.return = returnFiber;
  36.   return created;
  37. }

可以看到, 对于单节点来讲, 有 2 个重点:

  1. key是单节点是否复用的第一判断条件(第二判断条件是type是否改变).
    • 如果key不同, 其他条件是完全不看的
  2. 在新建节点时, key随着element对象被传入fiber的构造函数.

所以到这里才是key的最核心作用, 是调和函数中, 针对单节点是否可以复用的第一判断条件.

对于单节点来讲, key是可以省略的, react内部会设置成默认值null. 在进行diff时, 由于null===null为true, 前后render的key是一致的, 可以进行复用比较.

如果单节点显式设置了key, 且两次render时的key如果不一致, 则无法复用.

多节点

继续查看多节点相关的逻辑:

  1. function reconcileChildrenArray(
  2.   returnFiber: Fiber,
  3.   currentFirstChild: Fiber | null,
  4.   newChildren: Array<*>,
  5.   lanes: Lanes,
  6. ): Fiber | null {
  7.   if (__DEV__) {
  8.     // First, validate keys.
  9.     let knownKeys = null;
  10.     for (let i = 0; i < newChildren.length; i++) {
  11.       const child = newChildren[i];
  12.       // 1. 在dev环境下, 执行warnOnInvalidKey.
  13.       //  - 如果没有设置key, 会警告提示, 希望能显式设置key
  14.       //  - 如果key重复, 会错误提示.
  15.       knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
  16.     }
  17.   }
  19.   let resultingFirstChild: Fiber | null = null;
  20.   let previousNewFiber: Fiber | null = null;
  22.   let oldFiber = currentFirstChild;
  23.   let lastPlacedIndex = 0;
  24.   let newIdx = 0;
  25.   let nextOldFiber = null;
  26.   // 第一次循环: 只会在更新阶段发生
  27.   for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
  28.     if (oldFiber.index > newIdx) {
  29.       nextOldFiber = oldFiber;
  30.       oldFiber = null;
  31.     } else {
  32.       nextOldFiber = oldFiber.sibling;
  33.     }
  34.     // 1. 调用updateSlot, 处理公共序列中的fiber
  35.     const newFiber = updateSlot(
  36.       returnFiber,
  37.       oldFiber,
  38.       newChildren[newIdx],
  39.       lanes,
  40.     );
  41.     if (newFiber === null) {
  42.         // 如果无法复用, 则退出公共序列的遍历
  43.         if (oldFiber === null) {
  44.           oldFiber = nextOldFiber;
  45.         }
  46.         break;
  47.      }
  48.   }
  50.   // 第二次循环
  51.   if (oldFiber === null) {
  52.     for (; newIdx < newChildren.length; newIdx++) {
  53.       // 2. 调用createChild直接创建新fiber
  54.       const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
  55.     }
  56.     return resultingFirstChild;
  57.   }
  59.   for (; newIdx < newChildren.length; newIdx++) {
  60.     // 3. 调用updateFromMap处理非公共序列中的fiber
  61.     const newFiber = updateFromMap(
  62.       existingChildren,
  63.       returnFiber,
  64.       newIdx,
  65.       newChildren[newIdx],
  66.       lanes,
  67.     );
  68.   }
  70.   return resultingFirstChild;
  71. }

在reconcileChildrenArray中, 有 3 处调用与fiber有关(当然顺便就和key有关了), 它们分别是:

  1. updateSlot

    1. function updateSlot(
    2.   returnFiber: Fiber,
    3.   oldFiber: Fiber | null,
    4.   newChild: any,
    5.   lanes: Lanes,
    6. ): Fiber | null {
    7.   const key = oldFiber !== null ? oldFiber.key : null;
    9.   if (typeof newChild === 'object' && newChild !== null) {
    10.     switch (newChild.$$typeof) {
    11.       case REACT_ELEMENT_TYPE: {
    12.         //重点: key用于是否复用的第一判断条件
    13.         if (newChild.key === key) {
    14.           return updateElement(returnFiber, oldFiber, newChild, lanes);
    15.         } else {
    16.           return null;
    17.         }
    18.       }
    19.     }
    20.   }
    22.   return null;
    23. }

  2. createChild

    1. function createChild(
    2.   returnFiber: Fiber,
    3.   newChild: any,
    4.   lanes: Lanes,
    5. ): Fiber | null {
    6.   if (typeof newChild === 'object' && newChild !== null) {
    7.     switch (newChild.$$typeof) {
    8.       case REACT_ELEMENT_TYPE: {
    9.         // 重点: 调用构造函数进行创建
    10.         const created = createFiberFromElement(
    11.           newChild,
    12.           returnFiber.mode,
    13.           lanes,
    14.         );
    15.         return created;
    16.       }
    17.     }
    18.   }
    20.   return null;
    21. }

  3. updateFromMap

    1. function updateFromMap(
    2.   existingChildren: Map<string | number, Fiber>,
    3.   returnFiber: Fiber,
    4.   newIdx: number,
    5.   newChild: any,
    6.   lanes: Lanes,
    7. ): Fiber | null {
    8.     if (typeof newChild === 'object' && newChild !== null) {
    9.       switch (newChild.$$typeof) {
    10.         case REACT_ELEMENT_TYPE: {
    11.           //重点: key用于是否复用的第一判断条件
    12.           const matchedFiber =
    13.             existingChildren.get(
    14.               newChild.key === null ? newIdx : newChild.key,
    15.             ) || null;
    16.           return updateElement(returnFiber, matchedFiber, newChild, lanes);
    17.         }
    18.     }
    19.     return null;
    20.   }
    21. }

    针对多节点的diff算法可以分为3步骤(请回顾算法章节React 算法之调和算法):

  4. 第一次循环: 比较公共序列
    • 从左到右逐一遍历, 遇到一个无法复用的节点则退出循环.
  5. 第二次循环: 比较非公共序列
    • 在第一次循环的基础上, 如果oldFiber队列遍历完了, 证明newChildren队列中剩余的对象全部都是新增.
      • 此时继续遍历剩余的newChildren队列即可, 没有额外的diff比较.
    • 在第一次循环的基础上, 如果oldFiber队列没有遍历完, 需要将oldFiber队列中剩余的对象都添加到一个map集合中, 以oldFiber.key作为键.
      • 此时则在遍历剩余的newChildren队列时, 需要用newChild.key到map集合中进行查找, 如果匹配上了, 就将oldFiber从map中取出来, 同newChild进行diff比较.
  6. 清理工作
    • 在第二次循环结束后, 如果map集合中还有剩余的oldFiber,则可以证明这些oldFiber都是被删除的节点, 需要打上删除标记.

通过回顾diff算法的原理, 可以得到key在多节点情况下的特性:

  1. 新队列newChildren中的每一个对象(即reactElement对象)都需要同旧队列oldFiber中有相同key值的对象(即oldFiber对象)进行是否可复用的比较. key就是新旧对象能够对应起来的唯一标识.
  2. 如果省略key或者直接使用列表index作为key, 表现是一样的(key=null时, 会采用index代替key进行比较). 在新旧对象比较时, 只能按照index顺序进行比较, 复用的成功率大大降低, 大列表会出现性能问题.
    • 例如一个排序的场景: oldFiber队列有100个, newChildren队列有100个(但是打乱了顺序). 由于没有设置key, 就会导致newChildren中的第n个必然要和oldFiber队列中的第n个进行比较, 这时它们的key完全一致(都是null), 由于顺序变了导致props不同, 所以新的fiber完全要走更新逻辑(理论上比新创建一个的性能还要耗).
    • 同样是排序场景可以出现的bug: 上面的场景只是性能差(又不是不能用), key使用不当还会造成bug
      • 还是上述排序场景, 只是列表中的每一个item内部又是一个组件, 且其中某一个item使用了局部状态(比如class组件里面的state). 当第二次render时, fiber对象不会delete只会update导致新组件的state还沿用了上一次相同位置的旧组件的state, 造成了状态混乱.

总结

在react中key是服务于diff算法, 它的默认值是null, 在diff算法过程中, 新旧节点是否可以复用, 首先就会判定key是否相同, 其后才会进行其他条件的判定. 在源码中, 针对多节点(即列表组件)如果直接将key设置成index和不设置任何值的处理方案是一样的, 如果使用不当, 轻则造成性能损耗, 重则引起状态混乱造成bug.