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

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

如果愿意，您可以使用codepad来玩耍。

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' })并产生更大的对象。

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

1 个答案: