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

Question

I can have a functional component like this:

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

I can instantiate it to see basically the entire element content:

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': {}
}

Now when I use it with JSX syntax this:

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

I get almost empty object. Where is the link to JSXList stored? Where are all the properties? Are they hidden inside the object somehow? It looks like 'return' method of JSXList was never called, thus it was never expanded, but why there's no reference to it?

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

If I would use 'div' instead of JSXLint as a first argument, I would get at least 'type' property which would indicate the purpose of the element. Is there any design rationale behind that?

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

Is there any point in hiding that reference? It sort of obscure object introspection, as far as I can tell.

You can use codepad to play around if you like.

Answer 1

I get almost empty object. Where is the link to JSXList stored?

In obj.type. You're not seeing type in the log because functions are not serializable, so JSON.stringify skips them.

Where are all the properties?

It's there. You only gave it one property: name: 'pete' . If you're expecting to see divs and such, the reason you're not is that the following two lines are not equivalent:

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

As you pointed out in a comment in your code, the jsx expands to this, which again is not equivalent to calling FuncList:

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

React.createElement creates a small object describing what to render, which is the small object you're seeing. What normally happens next is that react's reconciliation algorithm decides whether it needs to take things farther. If it does, then only then will it instantiate the FuncList, calling FuncList({ name: 'Pete' }) and producing the larger object.