Автор Пайал Миттал
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, а именно:
- Настройка и псевдоним
preact-compat
- Переключение импорта на 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 constApp
=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/, чтобы узнать о других подобных материалах.
Ссылка: