Как JSX стал виртуальным DOM?

Что такое виртуальный DOM?

Одно слово — «Мы можем использовать объект в javascript для представления структуры DOM».

Virtual DOM (Virtual Document Object Model) — это основанное на JavaScript представление в памяти фактического DOM веб-страницы. Он действует как посредник между моделью данных приложения и реальной моделью DOM, позволяя приложению эффективно и действенно обновлять пользовательский интерфейс. Виртуальный DOM сокращает количество операций DOM, необходимых для обновления пользовательского интерфейса, и повышает общую производительность веб-приложений за счет сведения к минимуму объема требуемых манипуляций с DOM.

Итак, в основном, когда вы пишете что-то (JSX) вроде этого:

Вы создаете много виртуальных DOM.

Как JSX становится «объектом» в javascript?

Как вы, возможно, знаете, любой код, который мы написали, это всего лишь шаблон строки для компьютера. И эта строка «JSX» не может быть выполнена узлом или браузером.

Итак, мы должны перенести эти «JSX» во что-то исполняемое.

Вот как работает Babel.

Babel поможет нам перенести JSX/TSX, который вы написали, в настоящий JS-файл, который сможет выполнить Node или браузер.

Давайте попробуем простейшую демонстрацию и разберемся, как она работает!

Запачкаем руки!

1. Создайте пустую папку:

mkdir transfer-jsx-demo && cd transfer-jsx-demo

2. Создайте исходный файл, вызовите test.js :

let virtualTree = (
  <div id="root">
    <h1>Hello, Virtual DOM!</h1>
    <p>This is a simple example of using a virtual DOM.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
);

3. Запустите среду NPM:

npm init -y

4. Установите зависимости Babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-react

5. Создайте конфигурационный файл Babel, вызовите .babelrc :

{
  "presets": [
    "@babel/preset-react"
  ]
}

6. Запускайте Babel и побеждайте!

npx babel test.jsx --out-file test.js

Надеюсь, вы увидите результат в test.js файле.

let virtualTree = /*#__PURE__*/React.createElement("div", {
  id: "root"
}, /*#__PURE__*/React.createElement("h1", null, "Hello, Virtual DOM!"), /*#__PURE__*/React.createElement("p", null, "This is a simple example of using a virtual DOM."), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Item 1"), /*#__PURE__*/React.createElement("li", null, "Item 2"), /*#__PURE__*/React.createElement("li", null, "Item 3")));

На данный момент мы уже научились преобразовывать коды JSX в коды JS, которые могут выполняться Node или браузерами.

В следующей статье я напишу про «Пошаговое создание простейшего виртуального DOM».

🌋 Подписывайтесь и хорошего дня!