Внутренние объекты объекта 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?Где все свойства?Они как-то спрятаны внутри объекта?Похоже, что метод return из 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 создает небольшой объект, описывающий, что визуализировать, - маленький объект, который вы видите.Что обычно происходит дальше, так это алгоритм согласования реакции, который решает, нужно ли ему идти дальше.Если это так, то только тогда он будет создавать экземпляр FuncList, вызывая FuncList({ name: 'Pete' }) и создавая объект большего размера.