javascript - React 中的平面数组与嵌套数组的处理方式不同

Question

我注意到我可以将一组嵌套数组传递给 React，它会正确呈现项目，但是当我这样做时，它不会提示我的元素缺少 key .

const stuff = 'a,b,c';

// Nested Array
// React is fine with it and automatically assigns keys
// Sample data: [[a, <br />], [b, <br />], [c, <br />]]
const Foo = () => <div>{stuff.split(',').map(itm => [itm, <br />])}</div>;

// Flat Array
// React warns me that I should assign a key to each element in array
// Sample data: [a, <br />, b, <br />, c, <br />]
const Bar = () => <div>{stuff.split(',').map(itm => [itm, <br />]).reduce((a, b) => a.concat(b), [])}</div>;

sample 笔:

https://codepen.io/FezVrasta/pen/NppLPR

为什么会这样？我在 React 中找不到任何对“嵌套数组”支持的引用，在“自动分配键”中也找不到。

Answer 1

你会注意到即使控制台打印了一个警告，React 仍然显示 Foo和 Bar在您生成的 HTML 中。 React 使用唯一键进行协调，同时尝试提高渲染性能。您可以在 React reconciliation recursing on children 上阅读更多相关信息页。不提供 key 意味着 React 无法像设计的那样高效。

关于你为什么不向嵌套数组的控制台输出警告的问题，我们必须深入研究源代码:

生成警告的函数称为 validateExplicitKey , 住在 ReactElementValidator.js模块。

此函数用于 validateChildKeys在同一个模块中——从 React 15.4.2 开始，查看源代码给出了以下内容:

function validateChildKeys(node, parentType) {
  if (typeof node !== 'object') {
    return;
  }
  if (Array.isArray(node)) {                     // 1.
    for (var i = 0; i < node.length; i++) {
      var child = node[i];                       // 2.
      if (ReactElement.isValidElement(child)) {  // 3.
        validateExplicitKey(child, parentType);
      }
    }
  } else if (ReactElement.isValidElement(node)) {
    // This element was passed in a valid location.
    if (node._store) {
      node._store.validated = true;
    }
  } else if (node) {
    var iteratorFn = getIteratorFn(node);
    // Entry iterators provide implicit keys.
    if (iteratorFn) {
      if (iteratorFn !== node.entries) {
        var iterator = iteratorFn.call(node);
        var step;
        while (!(step = iterator.next()).done) {
          if (ReactElement.isValidElement(step.value)) {
            validateExplicitKey(step.value, parentType);
          }
        }
      }
    }
  }
}

1. 数组的数组会进入第一个代码块
2. child将设置为 child = ["b", Object] (其中“对象”是我们通过 JSX 创建的 br 节点的 React 虚拟 dom 表示)

3. 数组将通过函数 ReactElement.isValidElement 运行:

   ReactElement.isValidElement = function (object) {
     return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
   };
   

与 REACT_ELEMENT_TYPE被设置为:

var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;

数组是一个对象，不是null , 但它是 $$typeof此处未设置属性，因此检查失败。

$$typeof尚未设置，因为 React 仅将此属性添加到它创建的元素以识别某物是否为 React 元素。这包括 native HTML 元素，而不是数据类型。

因此 ReactElement.isValidElement检查失败，并且永远不会显示警告。