Автор Пайал Миттал

React, самый популярный интерфейсный фреймворк в настоящее время, и по уважительным причинам, не говоря уже о его виртуальной DOM, односторонней привязке данных, простоте и некоторых других удивительных функциях.

Preact, с другой стороны, - это умный подход, предлагающий крошечное ценностное предложение React, имеющее тот же состав API, но намного быстрее и проще, чем React.

«Цель разработки PreactJS - обеспечить эффективность использования памяти, лучшую производительность и более тесную совместимость с React».

В течение нескольких лет широкий спектр веб-сайтов, от небольших проектов с открытым исходным кодом до крупных ТНК, сумел перейти на Preact, включая Google, Uber, Pepsi, Financial Times, Tencent QQ, Housing.com, The New York Times, Dailymotion, Groupon и этот список можно продолжать до бесконечности.

Здесь мы обсудим несколько вещей о Preact-

Что такое Preact ??

Preact - это библиотека JavaScript, известная как «альтернатива Fast 3kb React с тем же API ES6» или «Drop-in replace for React», созданная Джейсоном Миллером. Самое интересное в этой библиотеке - ее небольшой размер. Конкретный термин «альтернатива 3 КБ» используется для обозначения его размера 3 КБ.

Несмотря на свой меньший размер, он утверждает, что работает лучше, чем React. Это библиотека клонов React, которая идентична React с точки зрения современного API, компонентов и виртуальной DOM. Заменить React на Preact очень просто, и это тоже, не беспокоясь о снижении производительности.

Что Preact предлагает вам в магазине?

Вы были бы удивлены, увидев, насколько легко использовать Preact. Все, что вам нужно сделать, это установить Preact и preact-compat и псевдоним this preact-compat в вашем коде с React. (Здесь compat означает совместимость)

«preact-compat - это уровень совместимости размером 2 КБ, который позволяет вам использовать множество библиотек экосистемы React и использовать их с Preact. »

Этот псевдоним позволяет использовать экосистему React в вашем приложении. Вы можете импортировать и использовать модули и библиотеки React в любом количестве в своем проекте Preact. Это невероятно, не правда ли ??

Вот небольшой список функций, которые Preact предлагает для вас:

  • Похожие React API и шаблоны
  • Компоненты класса ES6: классы, которые явно определяют компоненты с отслеживанием состояния.
  • Компоненты высшего порядка: возвращайте другие компоненты из render ().
  • Чистые функциональные компоненты без сохранения состояния: функции, которые принимают свойства в качестве аргументов и возвращают JSX / VDOM.
  • Обширная совместимость с React
  • Виртуальный DOM Diffing: Preact Diffing прост, эффективен и чрезвычайно быстр.
  • Поддерживает все современные браузеры и IE11 +
  • Высокооптимизированный алгоритм
  • Бесшовная рендеринг на стороне сервера
  • Переработка компонентов и элементов
  • Прозрачный асинхронный рендеринг с подключаемым планировщиком
  • Мгновенная установка приложения производственного уровня с помощью Preact CLI

Особенности Preact

Preact прекрасно поддерживает почти все современные браузеры, такие как Chrome, Firefox, Safari, Edge и IE11 +.

Из-за множества плагинов и надстроек компании быстро переходят на него. Он направлен на достижение нескольких ключевых целей, как указано ниже:

  • Легкость: особенность, которая делает его очень популярным, - это его значительно меньший размер. К вашему удивлению, большую часть приложения составляет ваш код. Это означает, что, не беспокоясь о том, чтобы держать фреймворк под контролем, у вас будет много времени только на кодирование.
  • Высокая производительность: Preact - одна из самых быстрых виртуальных библиотек DOM. Качества, которые делают его быстрее, - это не только его крошечный размер, но и простая и предсказуемая реализация diff, которая делает его быстрее.
  • Встраиваемый: Preact можно встроить в виджет, и, применив некоторые инструменты, вы можете создать приложение без сложной интеграции.
  • Мгновенно продуктивно: производительность увеличивается во много раз, если вам не нужно работать над ее размером. Будучи легким, он экономит ваши усилия и мгновенно обеспечивает продуктивность.
  • Совместимость с экосистемой: присвоив React псевдониму Preact, вы можете использовать тысячи компонентов из обширной экосистемы React.
  • Переносимость. Компонент виртуального DOM можно легко перенести в другое место, чего нельзя было бы сделать иначе.

Чем Preact отличается от React ??

При обсуждении того, «что отличает Preact от React», самым первым и наиболее очевидным отличием является его размер. Когда React весит около 45 КБ, Preact составляет всего 3 КБ.

Однако есть и другие причины, которые увеличивают различия. Однако многие из них либо несерьезны, либо могут быть полностью удалены с помощью уровня совместимости «preact-compat».

Давайте посмотрим, чем отличается эта так называемая копия React-

  • Вместо className вы можете просто использовать class для классов CSS.
  • this.state и this.props переданы render().
  • Функция h() превращает JSX в структуру, «понятную для Preact».
  • В Preact возможно объединение элементов и компонентов.
  • setTimeout(1) для пакетной обработки обновлений DOM, обработанных или сопоставленных.
  • PropType недоступен в ядре Preact, но поддерживается в preact-compat.
  • Компоненты Preact не реализуют childContextTypes или contextTypes, получают все контекстные записи от getChildContext().

Запуск с Preact CLI

Preact CLI - это интерфейс командной строки, который запускается в терминале вашей системы и помогает сразу же приступить к созданию современных приложений preact без какой-либо настройки. Он построен на таких инструментах с открытым исходным кодом, как Webpack, Terser, Babel и т. Д.

Чтобы начать работу с Preact CLI, вам не нужны какие-либо предварительные знания, и эта простота делает его наиболее предпочтительным способом использования Preact, прежде всего. Здесь для вас организовано все, от горячей перезагрузки до критического встраивания CSS. С ним вы можете ожидать отличной и потрясающей производительности от проектов Preact.

Вы можете установить его с помощью простой команды-

npm i -g preact-cli

Давайте пойдем дальше и выделим его нестандартные особенности.

  • Полностью автоматическое разделение кода
  • Дифференциальное обслуживание JavaScript
  • Поддержка шаблонов PRPL для эффективной загрузки
  • Предварительный рендеринг для быстрой работы с первой отрисовкой
  • Поддержка модулей Sass, Stylus, LESS и CSS.
  • Замена горячего модуля
  • Помощники по автоматическому монтированию приложений и отладке

Переход с React на Preact

Preact - прекрасный выбор для разработки прогрессивных и интерактивных веб-приложений. Небольшой размер Preact предпочтительнее, если у вас ограниченный бюджет производительности при загрузке. Большие пакеты JS приводят к увеличению времени загрузки, но за счет сокращения кода библиотеки с помощью Preact он загружается быстрее.

Переход на Preact с React может сократить количество килобайт в вашем проекте и ускорить его за счет повышения интерактивности за один RTT.

В основном есть два подхода к переключению с React на Preact, а именно:

  1. Настройка и псевдоним preact-compat
  2. Переключение импорта на Preact и удаление несовместимого кода

В существующем приложении React вы можете опробовать Preact, используя уровень совместимости preact-compat . Это позволяет вам продолжить работу с кодом React / React DOM с небольшими изменениями или без каких-либо изменений в базе кода.

Этот preact-compat пакет увеличивает размер пакета всего на 2 КБ и дает большое преимущество, поддерживая обширную экосистему модулей React. Это позволяет вам работать с Preact так же, как react и react-dom.

Процесс включает в себя несколько шагов:

# Установка и настройка

npm i -S preact preact-compat

#Aliasing React to Preact через Webpack

{
"resolve": {
  "alias": {
    "react": "preact-compat",
    "react-dom": "preact-compat"
    }
  }
}

Простое приложение "Hello World"

Давайте сделаем простое приложение "Hello World". Наша конечная цель - создать приложение, которое отображает текст «Hello World» -

#With JSX
const App = <h1>Hello World!</h1>;      
#Without JSX
const App = h('h1', null, 'Hello World');
#Injecting the app into DOM
render(App, document.body);

Поздравляю, мы закончили. Вы создали свое первое приложение Preact.

Переход на Preact X

Недавно Preact Team сделала огромный шаг, выпустив новейшую версию, то есть Preact X, в серии после Preact 8.x. Вкратце, это крошечный, полный и многофункциональный пакет.

По словам команды-

«Мы переосмыслили каждый бит и байт нашего кода и добавили множество основных функций в этот процесс. То же самое касается улучшений совместимости с экосистемой React для поддержки большего количества сторонних библиотек ».

Он содержит множество новых интересных функций, некоторые из которых упомянуты здесь -

  • Fragments: специальные компоненты, которые без дополнительной оболочки DOM-элемента отображают дочерние элементы в соответствии с родительскими элементами. Также они позволяют возвращать несколько узлов из render.
  • Hooks: упростите совместное использование логики в компонентах за счет возможности импорта через preact/hooks.
  • preact-compat перемещен в основной репозиторий, и теперь его можно импортировать через preact/compat (обратите внимание на косую черту).
  • componentDidCatch: разрешите обнаружение и обработку ошибок в render.

В Preact 8.x есть так много других исправлений, что если вы подали заявку на работу с библиотекой, попробуйте Preact X, я уверен, вы не будете разочарованы.

Что ж, ребята, я попытался осветить почти все важные вопросы (короче говоря) в этом блоге. Тем не менее, о Preact можно узнать гораздо больше. Все, что мы узнаем, никогда не будет достаточно.

«Знание безгранично и нерушимо. Он никогда не может быть уничтожен и остается в этой вселенной в той или иной форме ».

Заключительные слова:

Вы не знаете, что использовать, React или Preact? Ну, это полностью зависит от требований вашего проекта. Оба они имеют свой собственный набор функций и функций, хотя и очень похож, но достаточно непохожий.

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

Спасибо, что дочитали до конца !! Если вам понравилось, перейдите на наш сайт https://www.habilelabs.io/blog/, чтобы узнать о других подобных материалах.

Ссылка: