Preact: быстрая 3KB альтернатива ReactJS с тем же API ES6

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

Что такое Preact?

Preact — очень быстрая альтернатива React с тем же API ES6, поддерживает компоненты, виртуальный DOM и весит всего 3 КБ. Если вас беспокоит размер и производительность React, вам следует рассмотреть возможность использования Preact в качестве «библиотеки клонов», которая претендует на лучшую производительность и, кроме того, она чрезвычайно легкая.

Preact экспортирует общий Component класс, который может быть расширен для создания инкапсулированных, самообновляющихся частей пользовательского интерфейса. Компоненты поддерживают все стандартные React методы жизненного цикла, лайк shouldComponentUpdate() а также componentWillReceiveProps(), Предоставление конкретных реализаций этих методов является предпочтительным механизмом управления тем, когда и как обновляются компоненты.

Переход от Реакта к Преакту

Самым важным моментом React является потрясающая работа, которую выполняет компонент. Вы можете использовать его от кого угодно и где угодно в своем проекте. Хотя не все компоненты React совместимы с Preact, его можно сделать совместимым с помощью Реактивный слой совместимости. Удивительно, что все, что вам нужно сделать, это установить preact и preact-compat, удалить response и add — это псевдоним в Webpack, и все.

Это одна из самых удивительных возможностей Preact, потому что, как уже упоминалось, вот пример проекта который использует preact-compat работать с существующей библиотекой React без изменений, достигнув уменьшения размера более чем на 95% (приятель). Мы уверены, что если вы действительно заботитесь о размере своего пакета приложений, то теперь preact будет вашим BFF. Стоит сказать, что если вы хотите перейти на Preact из существующего проекта React, вам необходимо тщательно протестировать свое приложение перед переключением, так как вы можете потерять некоторые функции React (которые могут быть компенсированы производительностью само приложение). Причина, по которой Preact не пытается включить каждую отдельную функцию React, заключается в том, чтобы оставаться небольшим и сфокусированным — в противном случае было бы более целесообразно просто отправлять оптимизации в проект React, который уже является очень сложной и хорошо спроектированной базой кода.

Отладка с помощью Preact

Вы можете проверять и изменять состояние компонентов пользовательского интерфейса Preact во время выполнения, используя Инструменты разработчика React расширение браузера.

  1. Установите Инструменты разработчика React расширение
  2. Импорт «preact/devtoolsмодуль в вашем приложении
  3. Перезагрузите и перейдите на вкладку «Реагировать» в инструментах разработки браузера

Содействие в Preact

Preact открыт для pull-запроса и любой поддержки. Вы можете поддержать проект с ежемесячным пожертвованием и помочь им продолжить свою деятельность. Не забудь посетите официальный репозиторий на Github для получения дополнительной информации о библиотеке.

Ссылка на основную публикацию
Adblock
detector