Небольшое прочтение, почему вам следует меньше думать о JSX и больше о том, что происходит под капотом.
Как говорится в официальном документе, JSX - это просто синтаксический сахар.
Возьмем пример:
Можете ли вы отрендерить этот компонент приложения и вывести что-то вроде этого?
Вы заметили разницу в JSX и выводе? Как сделать так, чтобы текст h2 выглядел иначе, чем вы написали в JSX?
Вы можете приостановить чтение и сначала попробовать свои силы, прежде чем искать решение.
Нам нужно понимать, что JSX, который мы пишем, не отображается напрямую в DOM. Добро пожаловать в React 🙅🏻♂️
JSX фактически преобразуется в элементы React с зависимостями типа babel-plugin-transform-react-jsx.
Таким образом, технически функция рендеринга возвращает элементы React. React.createElement - это функция, которая используется для этой цели.
✳️ React.createElement принимает следующие аргументы:
тип: «h1», «div», «span» и т. д., т. е. это будет строка в случае компонентов хоста.
props: объект, содержащий свойства, которые вы передаете таким элементам, как key, className. например, {key: 5, className: "App"}
children: то, что отображается внутри элемента. Это может быть текст (внутри h2) или массив элементов реакции (внутри div).
Могут быть и другие аргументы, которые нам сейчас не нужны. Мы рассмотрим их на … отдыхе.
Итак, данный JSX аналогичен написанию этого:
С помощью элементов React создаются узлы Fiber, а затем наступает рабочий жизненный цикл, в котором происходит рендеринг. Жизненный цикл работы выходит за рамки данной статьи.
Итак, мы знаем, что процесс рендеринга сейчас очень далек. И мы можем использовать промежуточные шаги для создания нашего вывода. Мы собираемся изменить createElement в React, чтобы он имел волшебное / неожиданное поведение.
✳️ Возврат React.createElement выглядит так:
{
$$typeof: Symbol(react.element),
type: 'h2’,
props: {
key: "2",
className:"...."
children: "..normal text"
}
}
✳️ Мы возьмем существующую функцию React. createElement и немного поиграем.
Это жестко кодирует дочерние элементы всех тегов h2 в вашем приложении. Мы только что изменили элемент реакции.
Точно так же вы даже можете изменить тип и отобразить кнопки вместо div. Попробуйте.
✳️ Еще одна интересная вещь - вы можете изменять свои любимые сайты, созданные на React, такие как Instagram или Twitter, с помощью консоли Chrome с прикрепленным отладчиком.
Вот ссылка на рабочий код, чтобы вы могли поиграть с ним.
✳️ https://codesandbox.io/s/elastic-shtern-i6dvh?file=/src/App.js
Удачного кодирования…! Оставайся дома, оставайся в безопасности.