Недавно я услышал о Preact и узнал, что сайты с высоким трафиком, такие как IKEA, Bing, Etsy и другие, используют Preact, поэтому мне стало любопытно. Я хотел знать, как Preact работает под капотом, а также сходства и различия между react и preact, поэтому я решил изучить это. Эта серия — моя подготовка к путешествию и мои мысли об этом.

Я рекомендую зарегистрироваться и создать предварительный код в nexuscode.онлайн следовать вместе.

Как и React, Preact использует виртуальный DOM. Виртуальный DOM — это простое описание древовидной структуры с использованием объектов:

let vdom = {
  type: 'p',         // a <p> element
  props: {
    class: 'big',    // with class="big"
    children: [
      'Hello World!' // and the text "Hello World!"
    ]
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Preact предоставляет способ построения этих описаний, которые затем можно сравнить с деревом DOM браузера. Каждая часть дерева сравнивается, и дерево DOM браузера обновляется в соответствии со структурой, описанной деревом Virtual DOM.

Вместо того, чтобы описывать, как обновлять DOM в ответ на такие вещи, как ввод с клавиатуры или мыши, нам нужно только описать, как должна выглядеть DOM после получения этого ввода. Это означает, что мы можем многократно давать Preact описания древовидных структур, и он будет обновлять дерево DOM браузера в соответствии с каждым новым описанием — независимо от его текущей структуры.

Существует три способа создания виртуальных деревьев DOM с помощью Preact.

createElement(): функция, предоставляемая Preact
HTM: HTML-подобный синтаксис, который вы можете написать непосредственно в JavaScript.
JSX: HTML-подобный синтаксис, который можно скомпилировать в JavaScript.


создатьЭлемент

Простейшим подходом будет прямой вызов функции createElement() Preact.

import { createElement, render } from 'preact';

let vdom = createElement(
  'p',              // a <p> element
  { class: 'big' }, // with class="big"
  'Hello World!'    // and the text "Hello World!"
);

render(vdom, document.body);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Приведенный выше код создает «описание» виртуального DOM элемента абзаца. Первым аргументом createElement является имя элемента HTML. Второй аргумент — это реквизит элемента — объект, содержащий атрибуты (или свойства), которые нужно установить для элемента. Любые дополнительные аргументы являются дочерними для элемента, которые могут быть строками (например, «Hello World!») или элементами Virtual DOM из дополнительных вызовов createElement().

Последняя строка указывает Preact построить реальное дерево DOM, которое соответствует нашему «описанию» виртуального DOM, и вставить это дерево DOM в тело веб-страницы.


JSX

JSX позволяет нам описать наш элемент абзаца, используя HTML-подобный синтаксис. JSX должен быть скомпилирован с помощью такого инструмента, как Babel, или вы можете использовать nexuscode.онлайн для компиляции JSX внутри вашего браузера и мгновенного просмотра результата. Давайте перепишем предыдущий пример с использованием JSX без изменения его функциональности.

import { createElement, render } from 'preact';

let vdom = <p class="big">Hello World!</p>;

render(vdom, document.body);
Войти в полноэкранный режим

Выйти из полноэкранного режима


НТМ

HTM — это альтернатива JSX, в которой используются стандартные шаблоны с тегами JavaScript, что устраняет необходимость в компиляторе. Если вы не сталкивались с шаблонами с тегами, это особый тип строкового литерала, который может содержать поля ${expression}.

import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`
    <p class="big">Hello World!</p>
  `;
}

render(html`<${App} />`, document.body);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Все эти примеры дают один и тот же результат: виртуальное дерево DOM, которое можно передать Preact для создания или обновления существующего дерева DOM.
В следующей главе мы узнаем о компонентах и ​​событиях.

Пожалуйста, поделитесь своими идеями и задайте любые вопросы, которые у вас есть, или поделитесь своим кодом через nexuscode.онлайн в разделе комментариев ниже.