Вот почему и как

По их словам, в конце концов, лучшие технологии будут преобладать.

Тем не менее, когда дело доходит до создания приложений React.js, мы часто совершаем ошибку:
Мы не используем Preact. Я здесь не для того, чтобы говорить чушь вроде «React мертв» или
«Мы должны выбросить React».

Я здесь, чтобы познакомить вас с классной альтернативой React.js: Preact.

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

Между тем, Preact также поддерживает почти все, что поддерживает React, поэтому пора подумать о переводе вашего приложения на Preact.

Вот почему и как.

Результаты переключения моих приложений на Preact

Во-первых, немного мотивации для вас.

В основном я разработчик React.js. Поэтому я строю на нем и свои личные проекты. Как и многие другие разработчики React, я забыл о том, что Preact действительно существует, и реализовал некоторые личные проекты с помощью React. Понимая, что я могу сэкономить на размере связки, я забеспокоился.

Я был уверен, что полностью переключиться на Preact будет не так-то просто. Тем не менее я попробовал - и был удивлен.

Сначала я переключил страницу на основе React в Astro на Preact. Это сработало из коробки, поскольку Astro отлично поддерживает обе библиотеки.

Изменения в размере пакета: с 333 килобайт до 54 килобайт.
Какая разница! Я тоже был в шоке.

Следующее приложение было старым проектом, который я построил в Гэтсби. Страница на основе React.js имела размер 403 килобайта. Переключение на Preact привело к получению пакета размером 205 килобайт - опять же, огромная экономия в размере.

Надеюсь, теперь у вас больше мотивации дать Preact шанс - вот что вам нужно знать о переключателе. Если вы хотите узнать больше о Preact и React с точки зрения производительности, посмотрите это:



Я создал одно и то же приложение на React и Preact. Вот различия.
И измеренный размер, производительность и реализация javascript.plainenglish.io



Работает ли перенос моего приложения на Preact?

Preact не претендует на замену React.js. Тем не менее, это довольно полная альтернатива React.js. Хотя из-за своего размера он имел репутацию предлагать лишь несколько функций, это неправда. А документация Preact дает нам более подробное представление о том, какие функции отсутствуют в Preact:

Как видите, по словам самого Preact, различия не так уж велики. Даже все хуки, известные нам по React, можно использовать через импорт, специфичный для Preact, например import { useState } from "preact/hooks".

Итак, а как насчет перечисленных недостающих функций? Что ж, как утверждает Preact, PropTypes, например, полностью поддерживаются в preact-compat. Этот инструмент помогает нам переносить приложения на Preact, в основном без необходимости вносить изменения в нашу кодовую базу (мы скоро это увидим).

Итак, как мне переключить приложение React на Preact?

Переключиться на Preact не так уж и сложно, в зависимости от ваших уже существующих настроек. Особенно в Gatsby и Next.js, двух наиболее часто используемых инструментах для создания приложений React сегодня, переключение несложно. Оба используют preact-compat для коммутатора. Это означает, что ваша существующая кодовая база, специфичная для React, будет переведена в Preact под капотом. Вы можете использовать импорт и функции React, preact-compat получил вашу поддержку.

Я сделал два дополнительных руководства по переключению между Gatsby и Next.js:



Как уменьшить размер пакета Gatsby, включив поддержку Preact
Не переписывая кодовую базу javascript.plainenglish.io





Хотите сделать приложение Next.js быстрее? Включение поддержки Preact (вот как)
Как включить поддержку Preact в вашем приложении Next.js и сэкономить пару килобайт почти бесплатно. javascript.plainenglish.io



Переключить наше приложение CRA React на Preact также не так сложно, благодаря классному стороннему инструменту: cra-preact, который является оболочкой для уровня совместимости Preact preact/compat. Мы можем установить его с помощью yarn add cra-preact.

Затем все, что нам нужно сделать, это заменить наш раздел скриптов в package.json следующим образом:

Теперь просто запустите yarn run build - preact compat должен автоматически обрабатывать ваши импортированные реакции и перенаправлять их в Preact под капотом. Чтобы проверить это, я создаю небольшое приложение React, используя useState и PropTypes.

Производственная версия приложения React составляла 140 килобайт, после переключения на Preact с cra-preact осталось всего 30,2 килобайт, но все работает нормально.

Для большинства производственных приложений в React.js create-response-app не подходит. Поскольку мы рассмотрели Next и Gatsby, переключение с помощью таких инструментов, как Webpack или Parcel, по-прежнему отсутствует. К счастью, в документации Preact есть хорошие руководства по этим переключателям здесь.

Начиная с Preact с нуля

Пока что я показал, как перейти с React на Preact. Преимущество этого процесса в том, что вы можете писать все на React, а preact-compat должен все обрабатывать. Если вы хотите написать свое приложение с Preact с самого начала, есть еще пара отличий:

Отличия:

  • Вы можете использовать class вместо className в качестве атрибута для предоставления классов CSS.
  • Передача реквизита работает иначе:
  • Preact использует собственные глобальные обработчики событий браузера для обработки событий. Поэтому Preact использует onInput вместо onChange для полей ввода. (Собственный onchange браузера не запускается при каждом нажатии клавиши, как в React. Он срабатывает только после того, как вы покинете текстовое поле с измененным вводом.)
  • Разница в отношении собственного глобального обработчика событий также влияет на onDoubleClick. Собственная реализация Preact использует onDblClick.

Последняя мысль

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

Благодаря удобным инструментам миграции мы можем создавать приложения React.js как обычно, а затем пытаться перенести их в Preact, чтобы сохранить размер пакета. Кроме того, вы также можете начать создавать свое приложение с Preact с нуля, заменив CRA или просто включив поддержку Preact в своем пакете изначально.

Спасибо за чтение!

Подписывайтесь на меня в Twitter, чтобы быть в курсе

Больше контента на plainenglish.io