Использование Preact в качестве альтернативы React

Preact является реализацией парадигмы виртуального компонента DOM, как и React и многие другие подобные библиотеки. В отличие от React, его размер составляет всего 3 КБ, и он также превосходит его по скорости. Он создан Джейсоном Миллером и доступен по известной разрешительной и открытой лицензии MIT.

Зачем использовать Preact?

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

Если вы начинаете новый проект или разрабатываете уже существующий, Preact может сэкономить вам много времени. Вам не нужно заново изобретать колесо, пытаясь изучить новую библиотеку, поскольку она похожа и совместима с React — до такой степени, что вы можете использовать существующие пакеты React с ним только с некоторым псевдонимом, благодаря preact-compatnpm i -g preact-cli@latest


Плюсы и минусы

Есть много различий между React и Preact, которые мы можем обобщить в трех пунктах:

• Функции и API : Preact включает только часть API React, а не все доступные функции в React.
• Размер : Preact намного меньше, чем React.
• Производительность : Preact быстрее, чем React.

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

Preact Pros

• Preact легок, меньше (размером всего 3 КБ при распаковке) и быстрее, чем React (см. Эти тесты ). Вы также можете запустить тесты производительности в вашем браузере по этой ссылке .
• Preact в значительной степени совместим с React и имеет тот же API-интерфейс ES6, что и React, что упрощает принятие Preact в качестве новой библиотеки для создания пользовательских интерфейсов в вашем проекте или замену React на Preact для существующего проекта по соображениям производительности.
• Он имеет хорошую документацию и примеры, доступные на официальном сайте.
• Он имеет мощный и официальный интерфейс командной строки для быстрого создания новых проектов Preact, без хлопот с настройками Webpack и Babel.
• Многие функции вдохновлены всей работой, уже проделанной над React.
• Он также имеет свой собственный набор дополнительных функций, независимых от React, например Linked State .

React Pros

• React поддерживает одностороннюю привязку данных.
• Он поддерживается крупной компанией Facebook.
• Хорошая документация, примеры и учебные пособия на официальном сайте и в Интернете.
• Большое сообщество.
• Используется на сайте Facebook, который имеет миллионы посетителей по всему миру.
• Имеет собственное официальное расширение для разработчиков инструментов отладки для Chrome.
• Он имеет шаблонный проект Create React App для быстрого создания проектов с нулевой конфигурацией.
• Он имеет хорошо продуманную и сложную кодовую базу.

Реагировать минусы

• React имеет относительно большой размер по сравнению с Preact или другими существующими аналогичными библиотеками. (Реагирующий минимизированный исходный файл имеет размер около 136 КБ или около 42 КБ при минимизации и распаковке.)
• Это медленнее, чем Preact.
• В результате его сложной кодовой базы начинающим разработчикам сложнее внести свой вклад.

Примечание. Еще один недостаток, который я перечислил при написании этой статьи, заключался в том, что React имел пункт о выдаче патента в паре с лицензией BSD, что делало его юридически непригодным для некоторых случаев использования. Однако в сентябре 2017 года лицензия React сменила MIT, что решило эти проблемы с лицензией.

Preact Минусы

• Preact поддерживает только функциональные компоненты без сохранения состояния и определение компонентов на основе классов ES6, поэтому здесь нет createClass .
• Нет поддержки контекста .
• Нет поддержки для React propTypes.
• Меньшее сообщество, чем React.

Начало работы с Preact CLI

Preact CLI — это инструмент командной строки, созданный автором Preact Джейсоном Миллером. Это позволяет очень легко создать новый проект Preact, не увязая в сложностях конфигурации, поэтому давайте начнем с его установки.

Откройте свой терминал (Linux или macOS) или командную строку (Windows), затем выполните следующие команды:

 preact create my-app

Это установит последнюю версию Preact CLI, при условии, что на вашем локальном компьютере разработки установлены Node и NPM .

Теперь вы можете создать свой проект с этим:

 preact init

Или с этим, если вы хотите создать свое приложение в интерактивном режиме:

 npm start

Затем перейдите в корневую папку вашего приложения и запустите:

 npm run build

Это запустит сервер разработки с прямой перезагрузкой.

Наконец, когда вы закончите разработку своего приложения, вы можете создать производственный выпуск, используя это:

 ├── node_modules
├── package.json
├── package-lock.json
└── src
    ├── assets
    ├── components
    │   ├── app.js
    │   └── header
    ├── index.js
    ├── lib
    ├── manifest.json
    ├── routes
    │   ├── home
    │   └── profile
    └── style
        └── index.css

 components

 import './style';
import App from './components/app';

export default App;

 import { h, Component } from 'preact';
import { Router } from 'preact-router';

import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';

export default class App extends Component {
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Header />
                <Router onChange={this.handleRoute}>
                    <Home path="/" />
                    <Profile path="/profile/" user="me" />
                    <Profile path="/profile/:user" />
                </Router>
            </div>
        );
    }
}

 npm i -S preact preact-compat

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