主页 / 问题 / 1028948
Accepted
Трипольский Пётр
Asked:2020-09-28 20:13:51 +0000 UTC2020-09-28 20:13:51 +0000 UTC

为什么 React 中的 key 只需要在枚举中？

  • 772

任务是实现我们自己的 JSX 工厂。我们从 React 文档中知道 JSX 被转译为一个函数调用React.createElement(type,props,child)，其中 child 表示为 rest 参数（传递一个以逗号分隔的子数组）。但是当前树和新树如何比较呢？毕竟，这些是完全独立的对象。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <p>It's</p>
        <p>OK</p>
      </div>
    );
  }
}

export default App;

另外，如果没有枚举中的关键字段，则无法部分呈现的标准是什么？我们可以连续放置两个 p 块，不会发生任何不好的事情......

javascript

1 个回答

  1. Best Answer

    当收到孩子时，会发生“数组展平” - 以摆脱返回数组的map()包含。此外，树的元素的比较可以通过以下算法进行：

    1. 我们比较当前匹配元素的key和type

    2. 如果他们匹配，去找父母

      • 如果它们匹配，则重复该操作
      • 如果缺少父母之一，则元素不相等
      • 如果同时没有两个父母，则比较为真

    该算法在伪代码中的实现：

    bool Element::equals(
    const Element* a,
    const Element* b,
    bool recursive=true
) {
    if (a->key!=b->key) {
        return false;
    } else if (a->type!=b->type) {
        return false;
    } else if (recursive) {
        const Element* parent1 = a;
        const Element* parent2 = b;
        while(true) {
            parent1 = parent1->parent;
            parent2 = parent2->parent;
            if (parent1==nullptr&&parent2==nullptr) {
                return true;
            } else if (parent1==nullptr&&parent2!=nullptr) {
                return false;
            } else if (parent1!=nullptr&&parent2==nullptr) {
                return false;
            } else if (!equals(parent1, parent2, false)) {
                return false;
            } else {
                continue;
            }
        }
    } else {
        return true;
    }
}

    不能部分呈现的标准是在一行中存在三个或更多（在后代树的字符串表示中）等效元素，因为在尝试确定更改时，最后一个将被删除，而不是那些没有改变。

    在此处输入图像描述

    您可以在此存储库中阅读有关此现象的更多信息。

    • 1

相关问题