序列化时不显示 React.Element 对象内部

Question

我可以有一个这样的功能组件：

const FuncList = ({ name }) => {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    )
}

我可以实例化它，基本上可以看到整个元素内容：

const obj = FuncList({ name: 'Pete' })
console.log(JSON.stringify(obj, null, 4))
-----
{
    'type': 'div',
    'key': null,
    'ref': null,
    'props': {
        'className': 'shopping-list',
        'children': [
            {
                'type': 'h1',
                'key': null,
                'ref': null,
                'props': {
                    'children': [
                        'Shopping List for ',
                        'mike'
                    ]
                },
                '_owner': null,
                '_store': {}
            },
            {
                'type': 'ul',
                'key': null,
                'ref': null,
                'props': {
                    'children': [
                        {
                            'type': 'li',
                            'key': null,
                            'ref': null,
                            'props': {
                                'children': 'Instagram'
                            },
                            '_owner': null,
                            '_store': {}
                        },
                        ....
                    ]
                },
                '_owner': null,
                '_store': {}
            }
        ]
    },
    '_owner': null,
    '_store': {}
}

现在当我将它与 JSX 语法一起使用时：

const obj = <JSXList name="Pete" />;
// same as: const obj = React.createElement(JSXList, { name: "Pete" });
console.log(JSON.stringify(obj, null, 4))

我得到几乎空的对象。 JSXList 的链接存储在哪里？所有的属性在哪里？它们是否以某种方式隐藏在对象内部？看起来 JSXList 的 'return' 方法从未被调用过，因此它从未被扩展，但是为什么没有引用它呢？

{
    'key': null,
    'ref': null,
    'props': {
        'name': 'Pete'
    },
    '_owner': null,
    '_store': {}
}

如果我使用 'div' 而不是 JSXLint 作为第一个参数，我至少会得到指示元素用途的 'type' 属性。这背后有什么设计原理吗？

const obj = React.createElement('div', { name: "Pete" });
console.log(JSON.stringify(obj, null, 4))

隐藏该引用有什么意义吗？据我所知，它有点模糊的对象内省。

你可以使用codepad来玩，如果你喜欢。

Answer 1

我得到几乎空的对象。 JSXList 的链接存放在哪里？

在 obj.type 中。您没有在日志中看到类型，因为函数不可序列化，因此 JSON.stringify 会跳过它们。

所有属性在哪里？

它就在那里。你只给了它一个属性：name: 'pete'。如果您希望看到 div 之类的内容，那么您没有看到的原因是以下两行 not 等效：

const obj = FuncList({ name: 'Pete' })
const obj = <FuncList name="Pete" />;

正如您在代码中的注释中指出的那样，jsx 扩展到此，这又不等同于调用 FuncList：

React.createElement(FuncList, { name: "Pete" });

React.createElement 创建一个小对象来描述要渲染的内容，这就是您所看到的小对象。接下来通常发生的是，react 的协调算法决定它是否需要更进一步。如果是，那么它只会实例化 FuncList，调用FuncList({ name: 'Pete' }) 并生成更大的对象。