序列化时未显示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的“返回”方法，因此也从未对其进行扩展，但是为什么没有对此进行引用？

{
    '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))

隐藏参考有什么意义吗？ 据我所知，它有点模糊的对象自省。

如果愿意，您可以使用键盘进行游戏。

Answer 1

我几乎得到空的物体。 JSXList的链接存储在哪里？

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

所有物业在哪里？

在那。 您只给了它一个属性： name: 'pete' 。 如果您期望看到div等，则您之所以不这样做，是因为以下两行不相等：

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

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

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

React.createElement创建一个小对象，描述要渲染的内容，即您正在看到的小对象。 接下来通常发生的是，react的对帐算法决定是否需要进一步处理。 如果是这样，则只有这样，它将实例化FuncList，调用FuncList({ name: 'Pete' })并生成更大的对象。