Как работает React под капюшоном? ⇐ Javascript

[Anonymous]

Я пытаюсь понять, как действительно работает React. Я расскажу об этом с помощью некоторых пробелов, которые нужно заполнить, и если я был заманирован или сформулировал это неправильно, я надеюсь, что вы поправляете меня. < /P>
import { createRoot } from "react-dom/client";

function Header() {
console.log("inside Header component");
return
hello from Header
}

function App() {
console.log("inside App component");
retrun (


hello world

);
}

createRoot(document.getElementById("root")).render();
< /code>
В приведенном выше коде сначала Babel Transpile код в вызовы JSX или вызовы react.createElement (), затем при запуске на выборе клиента для корневого узла выполняется с использованием document.getElementById. Этот узел преобразуется в элемент реагирования корневой узел, а затем называется метод рендеринга. React.createElement (приложение, реквизит, ... дети), и это вернет элемент реагирования объекта что -то вроде этого < /p>
{
type: App,
children: [ /*there is a question here i will ask below*/],
key: null,
props: ...
}
< /code>
Вопрос в том, что будет детьми, будет ли это Createlement () Call или объект, который я имею в виду, когда React действительно оценивает функцию компонента. Рекурсивируется ли оттуда, чтобы создать целое дерево элементов, если это означает, что функция приложения будет вызвана, а на консоли будет отображаться сообщение «Внутри приложения». Сообщение «внутренний заголовок» также будет показан в консоли до создания даже волоконного дерева. или он оценивает компоненты при создании дерева волоконного дерева.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... r-the-hood